This map shows the number of commuters to Dutch municipalities in 2012. Click on a municipality to see were the commuters working there are living.
Source: CBS Statline
xxxxxxxxxx
<meta charset="utf-8">
<style>
path {
fill: lightgrey;
}
</style>
<div id="viz"></div>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var padding = 20;
var svg = d3.select("#viz").append("svg")
.attr("width",width)
.attr("height",height);
var colours = ["#fef0d9","#fdd49e","#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#990000", "#990000"];
var heatmapColour = d3.scale.linear()
.domain(d3.range(0, 1, 1.0 / (colours.length - 1)))
.range(colours);
var c = d3.scale.linear().domain([0,5]).range([0,1]);
queue()
queue()
.defer(d3.json,"https://dl.dropboxusercontent.com/s/k066kxpah3aw8oy/nlGem2012wgs.json?dl=1")
.defer(d3.tsv,"https://dl.dropboxusercontent.com/s/w3ojz1g4458s8yr/nlGemForens2012.tsv?dl=1")
.await(ready);
function ready(error, mapdata,banen) {
var gemIdByName = {};
mapdata.features.forEach(function(d) {
gemIdByName[d.properties.name] = d.properties.code;
});
var banenByID = {};
banen.forEach(function(d) {
banenByID[d.gemcode] = d;
});
var center = d3.geo.centroid(mapdata);
var scale = 100;
var offset = [width/2, height/2];
var projection = d3.geo.mercator()
.scale(scale)
.center(center)
.translate(offset);
var path = d3.geo.path()
.projection(projection);
var bounds = path.bounds(mapdata);
var hscale = scale*width / (bounds[1][0] - bounds[0][0]);
var vscale = scale*height / (bounds[1][1] - bounds[0][1]);
var scale = (hscale < vscale) ? hscale : vscale;
var offset = [width - (bounds[0][0] + bounds[1][0])/2,
height -22 -(bounds[0][1] + bounds[1][1])/2];
projection = d3.geo.mercator()
.center(center)
.scale(scale)
.translate(offset);
path = path.projection(projection);
svg.selectAll("path")
.data(mapdata.features)
.enter().append("path")
.attr("d", path)
.attr("class", function(d) {return "G"+pad(d.properties.GEMNR,4)})
.on("click",function(d){
banen = banenByID["G"+pad(d.properties.GEMNR,4)];
d3.selectAll("path")
.style("fill", function(d) {
v=banen["G"+pad(d.properties.GEMNR,4)];
color = (v=="" || v==0) ? "lightgrey":heatmapColour(c(v));
return color});
});
};
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
</script>
Modified http://d3js.org/queue.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js