Skip to content

Instantly share code, notes, and snippets.

@osoken

osoken/index.html

Last active February 6, 2016 10:08
Show Gist options
  • Save osoken/8fd61d9bf581691a794a to your computer and use it in GitHub Desktop.
Save osoken/8fd61d9bf581691a794a to your computer and use it in GitHub Desktop.
Download ZIP
japan.topojson (canvas)
Raw
readme.md

Yuichi Yazaki 作の日本の topojson。 Canvas で最もシンプルな描画。 描画点数が多いため、フレームレートはあまり出ない。

使用しているデータのリポジトリ: https://github.com/dataofjapan/land

データの出典元：地球地図日本

Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<script src='//d3js.org/d3.v3.min.js'></script>
<script src='https://d3js.org/topojson.v1.min.js'></script>
<body>
<div id='map_canvas' style='position:absolute'></div>
<script>
var map={};
map.width = 960;
map.height = 500;
map.scale = 862.5420350331074;
map.translate = [-1607.5029017610468, 824.1369223542354];
map.zoom = d3.behavior.zoom();
map.zoomed = function()
{
map.translate = map.zoom.translate();
map.scale = map.zoom.scale();
map.draw();
}
map.zoom.on('zoom',map.zoomed);
map.zoom.translate(map.translate);
map.zoom.scale(map.scale);
map.canvas = d3.select('#map_canvas')
.append('canvas')
.attr('width', map.width)
.attr('height',map.height)
.call(map.zoom);
map.context = map.canvas.node().getContext('2d');
map.draw = function()
{
map.context.clearRect(0,0,map.width,map.height);
map.projection.scale(map.scale);
map.projection.translate(map.translate);
map.context.beginPath();
map.path(map.prefectures);
map.context.fill();
map.context.stroke();
}
d3.json('/osoken/raw/b8e5859295757bb2ec5b/japan.topojson',function(error,data)
{
if (error)
{
console.log(error);
return;
}
map.prefectures = topojson.feature(data, data.objects.japan);
map.projection = d3.geo.mercator()
.scale(map.scale)
.translate(map.translate);
map.path = d3.geo.path().projection(map.projection).context(map.context);
map.context.lineWidth = 1.2;
map.context.strokeStyle = '#888';
map.context.fillStyle = '#ccc';
map.draw();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment