|
var width = 960, |
|
height = 500; |
|
|
|
var mapsource = "wgs84_edited.json"; |
|
var gemeentesource = "w_Gemeentenalfabetischperprovincie2015.csv"; |
|
|
|
var projection = d3.geo.mercator().scale(1).translate([0,0]).precision(0); |
|
var path = d3.geo.path().projection(projection); |
|
|
|
var c20 = d3.scale.category20(); |
|
|
|
var svg = d3.select('#country-hook') |
|
.append('svg') |
|
.attr('width', width) |
|
.attr('height', height); |
|
|
|
var gemeentedata; |
|
|
|
function initMap(){ |
|
|
|
d3.json(mapsource, function(geo_data){ |
|
|
|
var bounds = path.bounds(geo_data); |
|
|
|
var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width, |
|
(bounds[1][1] - bounds[0][1]) / height); |
|
|
|
var transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2, |
|
(height - scale * (bounds[1][1] + bounds[0][1])) / 2]; |
|
|
|
projection.scale(scale).translate(transl); |
|
|
|
var mergedData = mergeGeoData(geo_data.features, gemeentedata); |
|
|
|
svg.selectAll('path') |
|
.data(mergedData) |
|
.enter() |
|
.append('path') |
|
.filter(function(d) { |
|
return d.properties.WATER !== 'JA'; |
|
}) |
|
.attr({ |
|
d: path, |
|
fill: function(d) { return c20(d.properties.provincie); }, |
|
stroke: function(d) { return c20(d.properties.provincie); }, |
|
class: function(d) { return 'gemeente ' + d.properties.provincie; } |
|
}) |
|
.on('mouseover', function(d) { |
|
var provincie = d.properties.provincie; |
|
showTooltip(provincie); |
|
|
|
d3.selectAll('.gemeente') |
|
.classed('fadeout', true); |
|
|
|
d3.selectAll('.' + provincie) |
|
.classed('hover', true); |
|
|
|
}) |
|
.on('mouseout', function(d) { |
|
var provincie = d.properties.provincie; |
|
d3.selectAll('.' + provincie) |
|
.classed('hover', false); |
|
|
|
d3.selectAll('.gemeente') |
|
.classed('fadeout', false); |
|
|
|
hideTooltip(); |
|
}) |
|
|
|
}) |
|
} |
|
|
|
function mergeGeoData(data, dataset2) { |
|
var dataset = data; |
|
for( var i = 0, l = dataset.length; i < l; i++) { |
|
var gemeenteCode = dataset[i].properties.GM_CODE.split("GM")[1]; //GM_CODE: "GM0003" |
|
for (var j = 0, jlen = dataset2.length; j < jlen; j++ ) { |
|
var jsonGemeente = dataset2[j].Gemcode; //Gemcode: "0003" |
|
if (gemeenteCode === jsonGemeente) { |
|
dataset[i].properties.provincie = dataset2[j].provcodel; |
|
break; |
|
} |
|
} |
|
} |
|
return dataset; |
|
} |
|
|
|
function getTooltipContent(title) { |
|
var html = '<div class="tooltip-label">' + title + '</h1>'; |
|
return html; |
|
} |
|
|
|
function showTooltip(title){ |
|
//Get this bar's x/y values, then augment for the tooltip |
|
var xPosition = (d3.event.pageX), |
|
yPosition = (d3.event.pageY - 28); |
|
|
|
var content = getTooltipContent(title); |
|
|
|
d3.select("#tooltip") |
|
.style("left", xPosition + "px") |
|
.style("top", yPosition + "px") |
|
.html(content); |
|
|
|
d3.select("#tooltip").classed("none", false); |
|
} |
|
|
|
function hideTooltip() { |
|
d3.select("#tooltip").classed("none", true); |
|
} |
|
|
|
function initGemeentedata() { |
|
d3.csv(gemeentesource, function(data) { |
|
gemeentedata = data; |
|
initMap(); |
|
}) |
|
} |
|
|
|
initGemeentedata(); |
