Rendering maps with d3 and Canvas
forked from mbostock's block: U.S. Counties TopoJSON
forked from enjalot's block: WWSD #12: d3 + TopoJSON
license: gpl-3.0 |
Rendering maps with d3 and Canvas
forked from mbostock's block: U.S. Counties TopoJSON
forked from enjalot's block: WWSD #12: d3 + TopoJSON
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
path { | |
fill: #ccc; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
path:hover { | |
fill: red; | |
} | |
</style> | |
<body> | |
<canvas></canvas> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var width = 960, | |
height = 500; | |
var canvas = d3.select("canvas").node() | |
canvas.width = width; | |
canvas.height = height; | |
var ctx = canvas.getContext('2d') | |
var path = d3.geo.path() | |
.context(ctx) | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var url = "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json" | |
d3.json(url, function(error, topology) { | |
if (error) throw error; | |
console.log("topojson", topology) | |
var geojson = topojson.feature(topology, topology.objects.counties); | |
console.log("geojson", geojson) | |
ctx.strokeStyle = "#111"; | |
ctx.fillStyle = "#99ffe8" | |
geojson.features.forEach(function(feature) { | |
ctx.beginPath() | |
path(feature) | |
ctx.fill() | |
ctx.stroke(); | |
}) | |
}); | |
</script> |