marijer · July 9, 2021 20:45
diff --git a/README.md b/README.md
diff --git a/barchart.js b/barchart.js
 var Barchart = {
 	width: 400,
 	height: 500,
 	topCitiesShown: 20,
 	filesource: 'source_maps/Bevolking_grootte_2014_edited.csv',
 	transitionDuration: 1000,
 	selectedValue: 'bevolking2014',

 	padding: { top:10, 
 				right: 20, 
 				bottom: 20, 
 				left: 120 },

 	heightScale: undefined,
 	widthScale: undefined,
 	yAxis: undefined,
 	xAxis: undefined,
 	svg: undefined,

 	initSvg: function() {
 		Barchart.heightScale = d3.scale.ordinal()
 					.rangeRoundBands([ Barchart.padding.top, Barchart.height - Barchart.padding.bottom ], 0.2);
 	
 		Barchart.widthScale =  d3.scale.linear()
 					.range([ 0, Barchart.width - Barchart.padding.right - Barchart.padding.left ]);

 		Barchart.yAxis = d3.svg.axis()
 					.scale(Barchart.heightScale)
 					.orient("left");

 		Barchart.xAxis= d3.svg.axis()
 				.scale(Barchart.widthScale)
 				.orient("bottom")
 				.tickFormat(d3.format("s"))
 				.ticks(Math.round(Barchart.width / 60))
 				.tickSize(-Barchart.height + (Barchart.padding.bottom + Barchart.padding.top + 5));/* weird magic number here */	

 		Barchart.svg = d3.select("#chart-hook")
 			.append("svg")
 			.attr("width", Barchart.width)
 			.attr("height", Barchart.height);
 	},

 	init: function(data) {
 		Barchart.initSvg();
 		data = Barchart.removeEmptyValues(data);
 		data = Barchart.sortData(data);
 		data = Barchart.filterData(data, Barchart.topCitiesShown);

 		Barchart.heightScale.domain(data.map(function(d) { return d.properties.GM_NAAM; } ));

 		var rects = Barchart.svg.selectAll("rect")
 						.data(data)
 						.enter()
 						.append("rect")

 		rects.attr({
 				x: Barchart.padding.left,
 				y: function(d) {
 					return Barchart.heightScale(d.properties.GM_NAAM);
 				},
 				width: 0,
 				height: Barchart.heightScale.rangeBand(),
 				class: function(d){
 					return 'bar ' + d.properties.GM_CODE;
 				},
 			    fill: function(d) { 
 	            	if(d.properties.bevolking2014){
 	            		return color(d.properties.bevolking2014);
 	            	} else {
 	            		return 'yellow';
 	            	}
 	            }
 			})
 			.on('mouseover', function(d) {
 				Map.mouseOver(d);
 				Barchart.mouseOver(d);
 				Tooltip.set(d);
 			})
 			.on('mouseout', function(d){
 				Map.mouseOut(d);
 				Barchart.mouseOut(d);
 				Tooltip.hide();	
 			})

 		Barchart.updateWidthScale(data);
 		Barchart.updateChart(Barchart.selectedValue);

 		Barchart.svg.append("g")
 			.attr("class", "x axis")
 			.attr("transform", "translate(" + Barchart.padding.left + "," + (Barchart.height - Barchart.padding.bottom) + ")")
 			.call(Barchart.xAxis);

 		Barchart.svg.append("g")
 			.attr("class", "y axis barchart")
 			.attr("transform", "translate(" + Barchart.padding.left + ",0)")
 			.call(Barchart.yAxis);		
 	},

 	mouseOver: function(d) {
 		Barchart.svg.selectAll('.' + 'bar')
 			.classed('fadeout', true);

        Barchart.svg.select('.' + d.properties.GM_CODE)
        	.classed('active', true);
 	},

 	mouseOut: function(d) {
 		Barchart.svg.selectAll('.' + 'bar')
 			.classed('fadeout', false);

        Barchart.svg.select('.' + d.properties.GM_CODE)
        	.classed('active', false);
 	},

 	sortData: function(data) {
 		data.sort(function(a, b) {
 			return d3.descending(+a.properties[Barchart.selectedValue], +b.properties[Barchart.selectedValue]);
 		});
 		return data;
 	},

 	removeEmptyValues: function(data) {
 		for( var i = 0, l = data.length; i < l; i++) {
 			if(!data[i].properties[Barchart.selectedValue] || !data[i].properties.GM_NAAM) {
 				data[i].properties[Barchart.selectedValue] = 0;
 			}
 		}
 		return data;	
 	},

 	filterData: function(data, top) {
 		data = data.filter(function(d, i) {
 		    if( i < top) { return true; }
 		});
 		return data;	
 	},

 	updateWidthScale: function(data) {
 		Barchart.widthScale.domain([ 0, d3.max(data, function(d) {
 			if(d.properties[Barchart.selectedValue]){
 				return +d.properties[Barchart.selectedValue];
 			}else {
 				return 0;
 			}
 		}) ]);
 	},

 	updateChart: function(value) {
 		Barchart.svg.selectAll("rect")
 			.transition()
 			.duration(Barchart.transitionDuration)
 			.attr("width", function(d) {
 				return Barchart.widthScale(+d.properties[value]);
 			});	
 	}

 };
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Where do people live in the Netherlands?</title>

 	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

 	<link rel="stylesheet" type="text/css" href="main.css" />
 </head>
 <body>
 	<div class="content-wrapper">
 		<div class="intro">
 			<h3>The Netherlands</h3>
 			<h1>Where do people live?</h1>
 			<p>While the Netherlands is the twenty-seventh most densely populated country in the world, the amount of people living in munipalities is relatively low. None of the municapilties,and thus therefore the cities, have more than a million inhabitants.
 		</div>

 		<div class="chartwrapper">
 			<div class="sidebar fl-left" id="chart-hook"></div>
 			<div class="content fl-left" id="country-hook"></div>
 		</div>	

 		<div class="source">
 			source: <a href="http://statline.cbs.nl/Statweb/selection/?VW=T&DM=SLNL&PA=03759NED&D1=0%2c15%2c17&D2=0&D3=101-104%2c111%2c115-116%2c118-120%2c122%2c124%2c128%2c130%2c133%2c135%2c141%2c143%2c147%2c149%2c151%2c156-157%2c162-163%2c168%2c170%2c172%2c176%2c179%2c187-190%2c198%2c202%2c204-205%2c207%2c209-210%2c212-213%2c216%2c219%2c225-227%2c232%2c234-235%2c238-239%2c242%2c245%2c248%2c251-252%2c255-258%2c262-263%2c265%2c267-269%2c271%2c273%2c275%2c277-278%2c280-281%2c283%2c288%2c293-294%2c297-298%2c302-303%2c307-308%2c310%2c312%2c318%2c320-321%2c323-324%2c326%2c334-336%2c339-343%2c347%2c352%2c356-357%2c361%2c364%2c366%2c369%2c373%2c377%2c380%2c382-384%2c386%2c388%2c396%2c399%2c405-406%2c410%2c413%2c415-419%2c423%2c427-430%2c432%2c436%2c442-443%2c445-446%2c448%2c450%2c454%2c457%2c461-464%2c467%2c469%2c473%2c478-479%2c481-483%2c488-489%2c496-497%2c501%2c506-507%2c510%2c512%2c519%2c524%2c526%2c528-529%2c532%2c542-543%2c545%2c549-550%2c553-556%2c558%2c560-562%2c566%2c568-571%2c573%2c576%2c578-579%2c590-591%2c594%2c597-598%2c600%2c602-604%2c614-615%2c617-618%2c625-626%2c628%2c632%2c637-639%2c642%2c645-646%2c654%2c656%2c661%2c664-665%2c667%2c669%2c673-674%2c677%2c680%2c685%2c690%2c702-704%2c707%2c709%2c711-713%2c716%2c719-720%2c725%2c728-731%2c735%2c737-740%2c746%2c748%2c750%2c755%2c757-758%2c764-765%2c770%2c773%2c776%2c778-779%2c781%2c784%2c789%2c791%2c793%2c799-801%2c803-805%2c807%2c812%2c816%2c818%2c821-822%2c826-827%2c832%2c834-835%2c842%2c848-851%2c853%2c860%2c863-864%2c870-871%2c873%2c877-878%2c880%2c883%2c887-889%2c895%2c897%2c899%2c901%2c904%2c906%2c908%2c912-913%2c919-920%2c922-924%2c926%2c929-931%2c933-934%2c937%2c939-940%2c945%2c950-952%2c955%2c958%2c961-966%2c968-969%2c971%2c975-976%2c979%2c981%2c984%2c988-989%2c993%2c995-996%2c998-999%2c1008%2c1010%2c1012-1013%2c1015%2c1018%2c1024-1025%2c1027%2c1029-1030%2c1033%2c1036-1037%2c1041%2c1050-1051%2c1055-1056%2c1058%2c1062%2c1065-1066%2c1073-1074%2c1076-1077%2c1079-1080%2c1082%2c1084%2c1092-1093%2c1095%2c1098%2c1100-1101%2c1104%2c1107-1108&D4=l&HDR=G1%2cG3%2cT&STB=G2" target="_blank">Dutch population data 2014, CBS, 2014</a>; <a href="http://www.cbs.nl/nl-NL/menu/themas/dossiers/nederland-regionaal/publicaties/geografische-data/archief/2015/wijk-en-buurtkaart-2014-art.htm" target="_blank">Municapilities map of the Netherlands, CBS, 2014</a>
 		</div>
 	</div>
 	
 	<div id="tooltip" class="hidden"></div>

 	<script type="text/javascript" src="main.js"></script>
 	<script type="text/javascript" src="map.js"></script>
 	<script type="text/javascript" src="barchart.js"></script>

 </body>
 </html>
diff --git a/main.css b/main.css
 html, body {
 	margin: 0;
 	padding: 0;
 }

 * { outline: none; }

 body {
 	font-family: Helvetiva, Arial;
 	background: #EFEFEF;
 }

 a {
    text-decoration: none;
    color: #009EE8;;
 }

 a:hover {
    text-decoration: underline;
 }

 h1, h2, h3 {
 	font-family: "Helvetica Neue";
    margin: 0;
    padding: 0;
 }

 h1 {
 	margin: 0 0 .2em;
 	padding: 0;
    font-weight: 400;
 }

 h3 {
    color: #7D7D7D;
    font-size: 1em;
 }

 p {
    margin: 0;
    padding: 0;
    line-height: 1.3em;
 }

 .hidden { 
    visibility: hidden; 
    opacity: 0;
 }

 .fl-left { float: left; }

 .content-wrapper {
 	max-width: 960px;
 	min-width: 360px;
 	margin: 0 auto;
    border-left: 1px solid #D7D9E2;
    border-right: 1px solid #D7D9E2;
    padding: 20px;
 	background: #FFF;
 	min-height: 100vh;
 	height: 100%;
 }

 .intro {
    margin-bottom: 20px;
 }

 .chartwrapper { overflow: hidden; }

 .sidebar{ width: 430px; }

 .content {
    width: 530px;
    background: #D5E5EA;
 }

 .source {
    margin-top: 20px;
    font-size: .8em;
 }

 /* TOOLTIP */

 #tooltip {
    position: absolute;
    padding: 10px;
    line-height: 20px;
    background: #FFF;
    border-radius: 4px;
    box-shadow: 1px 1px 1px #CCC;
    border: 1px solid #CCC;
    pointer-events: none;
    transition: opacity .2s linear;
 }

 .tooltip-label {
    font-size: 1.1em;    
    font-weight: bold;
    padding-bottom: .1em;
 }

 .tooltip-num {
    font-weight: bold;
 }

 /* SVG */
 .axis path,
 .axis line {
    fill: none;
    stroke: rgb(245, 245, 245);
    shape-rendering: crispEdges;
    pointer-events: none;
 }

 .axis text {
    font-family: sans-serif;
    font-size: 11px;
    pointer-events: none;
 }

 rect {
    transition: fill 0.3s;
    cursor: pointer;
    opacity: 9;
 }

 rect.active {
    opacity: 1;
 }

 .y.axis path,
 .y.axis line {
    opacity: 0;
 }

 path {
    stroke-width: .3;
    stroke: #FFB36A;
    cursor: pointer;
    transition: opacity .2s ease;
 }

 .fadeout {
 	opacity: 0.7;
 	stroke-opacity: 0.3;
 }

 .gemeente.hover{
 	opacity: 1;
    stroke-width: 1.5;
    stroke-opacity: 1;
 }
diff --git a/main.js b/main.js
 var colorRange= ['#ffffcc','#ffeda0','#fed976','#feb24c','#fd8d3c','#fc4e2a','#e31a1c','#bd0026','#800026'],
 	populationData = 'z_Bevolking_grootte_2014_edited.csv',
 	mapsource = "z_wgs84_edited.json";

 var color = d3.scale.quantize()
                .range(colorRange);

 function setColorDomain(data) {
    color.domain([
        d3.min(data, function(d) { return +d.properties.bevolking2014; }),
        d3.max(data, function(d) { return +d.properties.bevolking2014; })
    ]);
 }

 var Tooltip = {
 	numFormat: d3.format("s"),

 	set: function(d) {
 		var num = Tooltip.numFormat(+d.properties.bevolking2014);

 		if(num === '0'){
 			num = 'onbekend';
 		}

 		Tooltip.updateContent(d.properties.GM_NAAM, num);
 		Tooltip.show();
 	},

 	updateContent: function(title, content) {
 		var html = '<div class="tooltip-label">' + title + '</div>';
 		html += '<div class="tooltip-content">population 2014: <span class="tooltip-num">' + content + '</span></div>';
 		
 		d3.select("#tooltip").html(html);
 	},

 	updatePosition: function() {
 		//Get this bar's x/y values, then augment for the tooltip
 		var xPosition = (d3.event.pageX),
 			yPosition = (d3.event.pageY - 28);

 		var clientRect = d3.select("#tooltip").node().getBoundingClientRect();


 		d3.select("#tooltip")
 		  .style("left", (xPosition - clientRect.width / 2) + "px")
 		  .style("top", yPosition - clientRect.height + "px");
 	
 	}, 

 	show: function() {
 		Tooltip.updatePosition();
 		d3.select("#tooltip").classed("hidden", false);
 	},

 	hide: function() {
 		d3.select("#tooltip").classed("hidden", true);
 	}
 };

 function mergeData(data, dataset2, fn) {
 	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 compareKey = dataset2[j].code; //Gemcode: "0003"
 			if (+gemeenteCode === +compareKey) {
 				fn(dataset[i].properties, dataset2[j])
 				break;
 			}
 		}
 	}
 	return dataset;			
 }

 function initCharts(data) {
 	Map.init(data);
    Barchart.init(data);
 }

 function geodataLoaded (geo_data, populationdata) {
 	var mergedData = mergeData(geo_data.features, populationdata, function(d, d2) {
 		d.bevolking2014 = d2.aantal;
 	});
 	initCharts(mergedData)
 }

 function initGeodata(populationdata) {
 	d3.json(mapsource, function(data) {
 		Map.orig_geo_data = data;
 		geodataLoaded(data, populationdata);
 	})
 }

 function initPopulationData () {
 	d3.csv(populationData, function(populationdata) {
 		initGeodata(populationdata);
 	})		
 }

 initPopulationData();
diff --git a/map.js b/map.js
 var projection = d3.geo.mercator().scale(1).translate([0,0]).precision(0);
 var path = d3.geo.path().projection(projection);

 var Map = {
 	svg: undefined,
 	width: 530,
 	height: 500,
 	orig_geo_data: undefined,
 	html_hook: '#country-hook',

 	initSvg: function() {
 		Map.svg = d3.select(Map.html_hook)
 						.append('svg')
 						.attr('width', Map.width)
 						.attr('height', Map.height);
 	},

 	init: function(geo_data) {
 		Map.initSvg();

 		var bounds = path.bounds(Map.orig_geo_data);

 		var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / Map.width,
 		  (bounds[1][1] - bounds[0][1]) / Map.height);

 		var transl = [(Map.width - scale * (bounds[1][0] + bounds[0][0])) / 2,
 		  (Map.height - scale * (bounds[1][1] + bounds[0][1])) / 2];
 		
 		projection.scale(scale).translate(transl);

 		setColorDomain(geo_data);

 		Map.svg.selectAll('path')
 			.data(geo_data)
 			.enter()
 			.append('path')
 			.filter(function(d) {
 				return d.properties.WATER !== 'JA';
 			})
 			.attr({
 				d: path,
 	            fill: function(d) { 
 	            	if(d.properties.bevolking2014){
 	            		return color(d.properties.bevolking2014);
 	            	} else {
 	            		return '#EFEFEF';
 	            	}
 	            },
 	            stroke: function(d) { return '#FFF' },
 				class: function(d) { return 'gemeente ' + d.properties.GM_CODE; }
 	          })
 			.on('mouseover', function(d) {
 	            Barchart.mouseOver(d);
 	            Map.mouseOver(d);
 	            Tooltip.set(d);
 			})
 			.on('mouseout', function(d) {
 				Map.mouseOut(d);
 					Barchart.mouseOut(d);
 	            Tooltip.hide();
 			})
 	},

 	mouseOver: function(d) {
 		Map.svg.select('.' + d.properties.GM_CODE)
 			.classed('hover', true);

 		Map.svg.selectAll('.gemeente')
 			.classed('fadeout', true);
 	},

 	mouseOut: function(d) {
 		Map.svg.select('.' + d.properties.GM_CODE)
 			.classed('hover', false);

 		Map.svg.selectAll('.gemeente')
 			.classed('fadeout', false);
 	}
 }
diff --git a/z_Bevolking_grootte_2014_edited.csv b/z_Bevolking_grootte_2014_edited.csv
diff --git a/z_wgs84_edited.json b/z_wgs84_edited.json
	var Barchart = {
	width: 400,
	height: 500,
	topCitiesShown: 20,
	filesource: 'source_maps/Bevolking_grootte_2014_edited.csv',
	transitionDuration: 1000,
	selectedValue: 'bevolking2014',

	padding: { top:10,
	right: 20,
	bottom: 20,
	left: 120 },

	heightScale: undefined,
	widthScale: undefined,
	yAxis: undefined,
	xAxis: undefined,
	svg: undefined,

	initSvg: function() {
	Barchart.heightScale = d3.scale.ordinal()
	.rangeRoundBands([ Barchart.padding.top, Barchart.height - Barchart.padding.bottom ], 0.2);

	Barchart.widthScale = d3.scale.linear()
	.range([ 0, Barchart.width - Barchart.padding.right - Barchart.padding.left ]);

	Barchart.yAxis = d3.svg.axis()
	.scale(Barchart.heightScale)
	.orient("left");

	Barchart.xAxis= d3.svg.axis()
	.scale(Barchart.widthScale)
	.orient("bottom")
	.tickFormat(d3.format("s"))
	.ticks(Math.round(Barchart.width / 60))
	.tickSize(-Barchart.height + (Barchart.padding.bottom + Barchart.padding.top + 5));/* weird magic number here */

	Barchart.svg = d3.select("#chart-hook")
	.append("svg")
	.attr("width", Barchart.width)
	.attr("height", Barchart.height);
	},

	init: function(data) {
	Barchart.initSvg();
	data = Barchart.removeEmptyValues(data);
	data = Barchart.sortData(data);
	data = Barchart.filterData(data, Barchart.topCitiesShown);

	Barchart.heightScale.domain(data.map(function(d) { return d.properties.GM_NAAM; } ));

	var rects = Barchart.svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")

	rects.attr({
	x: Barchart.padding.left,
	y: function(d) {
	return Barchart.heightScale(d.properties.GM_NAAM);
	},
	width: 0,
	height: Barchart.heightScale.rangeBand(),
	class: function(d){
	return 'bar ' + d.properties.GM_CODE;
	},
	fill: function(d) {
	if(d.properties.bevolking2014){
	return color(d.properties.bevolking2014);
	} else {
	return 'yellow';
	}
	}
	})
	.on('mouseover', function(d) {
	Map.mouseOver(d);
	Barchart.mouseOver(d);
	Tooltip.set(d);
	})
	.on('mouseout', function(d){
	Map.mouseOut(d);
	Barchart.mouseOut(d);
	Tooltip.hide();
	})

	Barchart.updateWidthScale(data);
	Barchart.updateChart(Barchart.selectedValue);

	Barchart.svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + Barchart.padding.left + "," + (Barchart.height - Barchart.padding.bottom) + ")")
	.call(Barchart.xAxis);

	Barchart.svg.append("g")
	.attr("class", "y axis barchart")
	.attr("transform", "translate(" + Barchart.padding.left + ",0)")
	.call(Barchart.yAxis);
	},

	mouseOver: function(d) {
	Barchart.svg.selectAll('.' + 'bar')
	.classed('fadeout', true);

	Barchart.svg.select('.' + d.properties.GM_CODE)
	.classed('active', true);
	},

	mouseOut: function(d) {
	Barchart.svg.selectAll('.' + 'bar')
	.classed('fadeout', false);

	Barchart.svg.select('.' + d.properties.GM_CODE)
	.classed('active', false);
	},

	sortData: function(data) {
	data.sort(function(a, b) {
	return d3.descending(+a.properties[Barchart.selectedValue], +b.properties[Barchart.selectedValue]);
	});
	return data;
	},

	removeEmptyValues: function(data) {
	for( var i = 0, l = data.length; i < l; i++) {
	if(!data[i].properties[Barchart.selectedValue] \|\| !data[i].properties.GM_NAAM) {
	data[i].properties[Barchart.selectedValue] = 0;
	}
	}
	return data;
	},

	filterData: function(data, top) {
	data = data.filter(function(d, i) {
	if( i < top) { return true; }
	});
	return data;
	},

	updateWidthScale: function(data) {
	Barchart.widthScale.domain([ 0, d3.max(data, function(d) {
	if(d.properties[Barchart.selectedValue]){
	return +d.properties[Barchart.selectedValue];
	}else {
	return 0;
	}
	}) ]);
	},

	updateChart: function(value) {
	Barchart.svg.selectAll("rect")
	.transition()
	.duration(Barchart.transitionDuration)
	.attr("width", function(d) {
	return Barchart.widthScale(+d.properties[value]);
	});
	}

	};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Where do people live in the Netherlands?</title>

	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<link rel="stylesheet" type="text/css" href="main.css" />
	</head>
	<body>
	<div class="content-wrapper">
	<div class="intro">
	<h3>The Netherlands</h3>
	<h1>Where do people live?</h1>
	<p>While the Netherlands is the twenty-seventh most densely populated country in the world, the amount of people living in munipalities is relatively low. None of the municapilties,and thus therefore the cities, have more than a million inhabitants.
	</div>

	<div class="chartwrapper">
	<div class="sidebar fl-left" id="chart-hook"></div>
	<div class="content fl-left" id="country-hook"></div>
	</div>

	<div class="source">
	source: <a href="http://statline.cbs.nl/Statweb/selection/?VW=T&DM=SLNL&PA=03759NED&D1=0%2c15%2c17&D2=0&D3=101-104%2c111%2c115-116%2c118-120%2c122%2c124%2c128%2c130%2c133%2c135%2c141%2c143%2c147%2c149%2c151%2c156-157%2c162-163%2c168%2c170%2c172%2c176%2c179%2c187-190%2c198%2c202%2c204-205%2c207%2c209-210%2c212-213%2c216%2c219%2c225-227%2c232%2c234-235%2c238-239%2c242%2c245%2c248%2c251-252%2c255-258%2c262-263%2c265%2c267-269%2c271%2c273%2c275%2c277-278%2c280-281%2c283%2c288%2c293-294%2c297-298%2c302-303%2c307-308%2c310%2c312%2c318%2c320-321%2c323-324%2c326%2c334-336%2c339-343%2c347%2c352%2c356-357%2c361%2c364%2c366%2c369%2c373%2c377%2c380%2c382-384%2c386%2c388%2c396%2c399%2c405-406%2c410%2c413%2c415-419%2c423%2c427-430%2c432%2c436%2c442-443%2c445-446%2c448%2c450%2c454%2c457%2c461-464%2c467%2c469%2c473%2c478-479%2c481-483%2c488-489%2c496-497%2c501%2c506-507%2c510%2c512%2c519%2c524%2c526%2c528-529%2c532%2c542-543%2c545%2c549-550%2c553-556%2c558%2c560-562%2c566%2c568-571%2c573%2c576%2c578-579%2c590-591%2c594%2c597-598%2c600%2c602-604%2c614-615%2c617-618%2c625-626%2c628%2c632%2c637-639%2c642%2c645-646%2c654%2c656%2c661%2c664-665%2c667%2c669%2c673-674%2c677%2c680%2c685%2c690%2c702-704%2c707%2c709%2c711-713%2c716%2c719-720%2c725%2c728-731%2c735%2c737-740%2c746%2c748%2c750%2c755%2c757-758%2c764-765%2c770%2c773%2c776%2c778-779%2c781%2c784%2c789%2c791%2c793%2c799-801%2c803-805%2c807%2c812%2c816%2c818%2c821-822%2c826-827%2c832%2c834-835%2c842%2c848-851%2c853%2c860%2c863-864%2c870-871%2c873%2c877-878%2c880%2c883%2c887-889%2c895%2c897%2c899%2c901%2c904%2c906%2c908%2c912-913%2c919-920%2c922-924%2c926%2c929-931%2c933-934%2c937%2c939-940%2c945%2c950-952%2c955%2c958%2c961-966%2c968-969%2c971%2c975-976%2c979%2c981%2c984%2c988-989%2c993%2c995-996%2c998-999%2c1008%2c1010%2c1012-1013%2c1015%2c1018%2c1024-1025%2c1027%2c1029-1030%2c1033%2c1036-1037%2c1041%2c1050-1051%2c1055-1056%2c1058%2c1062%2c1065-1066%2c1073-1074%2c1076-1077%2c1079-1080%2c1082%2c1084%2c1092-1093%2c1095%2c1098%2c1100-1101%2c1104%2c1107-1108&D4=l&HDR=G1%2cG3%2cT&STB=G2" target="_blank">Dutch population data 2014, CBS, 2014</a>; <a href="http://www.cbs.nl/nl-NL/menu/themas/dossiers/nederland-regionaal/publicaties/geografische-data/archief/2015/wijk-en-buurtkaart-2014-art.htm" target="_blank">Municapilities map of the Netherlands, CBS, 2014</a>
	</div>
	</div>

	<div id="tooltip" class="hidden"></div>

	<script type="text/javascript" src="main.js"></script>
	<script type="text/javascript" src="map.js"></script>
	<script type="text/javascript" src="barchart.js"></script>

	</body>
	</html>
	html, body {
	margin: 0;
	padding: 0;
	}

	* { outline: none; }

	body {
	font-family: Helvetiva, Arial;
	background: #EFEFEF;
	}

	a {
	text-decoration: none;
	color: #009EE8;;
	}

	a:hover {
	text-decoration: underline;
	}

	h1, h2, h3 {
	font-family: "Helvetica Neue";
	margin: 0;
	padding: 0;
	}

	h1 {
	margin: 0 0 .2em;
	padding: 0;
	font-weight: 400;
	}

	h3 {
	color: #7D7D7D;
	font-size: 1em;
	}

	p {
	margin: 0;
	padding: 0;
	line-height: 1.3em;
	}

	.hidden {
	visibility: hidden;
	opacity: 0;
	}

	.fl-left { float: left; }

	.content-wrapper {
	max-width: 960px;
	min-width: 360px;
	margin: 0 auto;
	border-left: 1px solid #D7D9E2;
	border-right: 1px solid #D7D9E2;
	padding: 20px;
	background: #FFF;
	min-height: 100vh;
	height: 100%;
	}

	.intro {
	margin-bottom: 20px;
	}

	.chartwrapper { overflow: hidden; }

	.sidebar{ width: 430px; }

	.content {
	width: 530px;
	background: #D5E5EA;
	}

	.source {
	margin-top: 20px;
	font-size: .8em;
	}

	/* TOOLTIP */

	#tooltip {
	position: absolute;
	padding: 10px;
	line-height: 20px;
	background: #FFF;
	border-radius: 4px;
	box-shadow: 1px 1px 1px #CCC;
	border: 1px solid #CCC;
	pointer-events: none;
	transition: opacity .2s linear;
	}

	.tooltip-label {
	font-size: 1.1em;
	font-weight: bold;
	padding-bottom: .1em;
	}

	.tooltip-num {
	font-weight: bold;
	}

	/* SVG */
	.axis path,
	.axis line {
	fill: none;
	stroke: rgb(245, 245, 245);
	shape-rendering: crispEdges;
	pointer-events: none;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	pointer-events: none;
	}

	rect {
	transition: fill 0.3s;
	cursor: pointer;
	opacity: 9;
	}

	rect.active {
	opacity: 1;
	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	path {
	stroke-width: .3;
	stroke: #FFB36A;
	cursor: pointer;
	transition: opacity .2s ease;
	}

	.fadeout {
	opacity: 0.7;
	stroke-opacity: 0.3;
	}

	.gemeente.hover{
	opacity: 1;
	stroke-width: 1.5;
	stroke-opacity: 1;
	}
	var colorRange= ['#ffffcc','#ffeda0','#fed976','#feb24c','#fd8d3c','#fc4e2a','#e31a1c','#bd0026','#800026'],
	populationData = 'z_Bevolking_grootte_2014_edited.csv',
	mapsource = "z_wgs84_edited.json";

	var color = d3.scale.quantize()
	.range(colorRange);

	function setColorDomain(data) {
	color.domain([
	d3.min(data, function(d) { return +d.properties.bevolking2014; }),
	d3.max(data, function(d) { return +d.properties.bevolking2014; })
	]);
	}

	var Tooltip = {
	numFormat: d3.format("s"),

	set: function(d) {
	var num = Tooltip.numFormat(+d.properties.bevolking2014);

	if(num === '0'){
	num = 'onbekend';
	}

	Tooltip.updateContent(d.properties.GM_NAAM, num);
	Tooltip.show();
	},

	updateContent: function(title, content) {
	var html = '<div class="tooltip-label">' + title + '</div>';
	html += '<div class="tooltip-content">population 2014: <span class="tooltip-num">' + content + '</span></div>';

	d3.select("#tooltip").html(html);
	},

	updatePosition: function() {
	//Get this bar's x/y values, then augment for the tooltip
	var xPosition = (d3.event.pageX),
	yPosition = (d3.event.pageY - 28);

	var clientRect = d3.select("#tooltip").node().getBoundingClientRect();


	d3.select("#tooltip")
	.style("left", (xPosition - clientRect.width / 2) + "px")
	.style("top", yPosition - clientRect.height + "px");

	},

	show: function() {
	Tooltip.updatePosition();
	d3.select("#tooltip").classed("hidden", false);
	},

	hide: function() {
	d3.select("#tooltip").classed("hidden", true);
	}
	};

	function mergeData(data, dataset2, fn) {
	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 compareKey = dataset2[j].code; //Gemcode: "0003"
	if (+gemeenteCode === +compareKey) {
	fn(dataset[i].properties, dataset2[j])
	break;
	}
	}
	}
	return dataset;
	}

	function initCharts(data) {
	Map.init(data);
	Barchart.init(data);
	}

	function geodataLoaded (geo_data, populationdata) {
	var mergedData = mergeData(geo_data.features, populationdata, function(d, d2) {
	d.bevolking2014 = d2.aantal;
	});
	initCharts(mergedData)
	}

	function initGeodata(populationdata) {
	d3.json(mapsource, function(data) {
	Map.orig_geo_data = data;
	geodataLoaded(data, populationdata);
	})
	}

	function initPopulationData () {
	d3.csv(populationData, function(populationdata) {
	initGeodata(populationdata);
	})
	}

	initPopulationData();
	var projection = d3.geo.mercator().scale(1).translate([0,0]).precision(0);
	var path = d3.geo.path().projection(projection);

	var Map = {
	svg: undefined,
	width: 530,
	height: 500,
	orig_geo_data: undefined,
	html_hook: '#country-hook',

	initSvg: function() {
	Map.svg = d3.select(Map.html_hook)
	.append('svg')
	.attr('width', Map.width)
	.attr('height', Map.height);
	},

	init: function(geo_data) {
	Map.initSvg();

	var bounds = path.bounds(Map.orig_geo_data);

	var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / Map.width,
	(bounds[1][1] - bounds[0][1]) / Map.height);

	var transl = [(Map.width - scale * (bounds[1][0] + bounds[0][0])) / 2,
	(Map.height - scale * (bounds[1][1] + bounds[0][1])) / 2];

	projection.scale(scale).translate(transl);

	setColorDomain(geo_data);

	Map.svg.selectAll('path')
	.data(geo_data)
	.enter()
	.append('path')
	.filter(function(d) {
	return d.properties.WATER !== 'JA';
	})
	.attr({
	d: path,
	fill: function(d) {
	if(d.properties.bevolking2014){
	return color(d.properties.bevolking2014);
	} else {
	return '#EFEFEF';
	}
	},
	stroke: function(d) { return '#FFF' },
	class: function(d) { return 'gemeente ' + d.properties.GM_CODE; }
	})
	.on('mouseover', function(d) {
	Barchart.mouseOver(d);
	Map.mouseOver(d);
	Tooltip.set(d);
	})
	.on('mouseout', function(d) {
	Map.mouseOut(d);
	Barchart.mouseOut(d);
	Tooltip.hide();
	})
	},

	mouseOver: function(d) {
	Map.svg.select('.' + d.properties.GM_CODE)
	.classed('hover', true);

	Map.svg.selectAll('.gemeente')
	.classed('fadeout', true);
	},

	mouseOut: function(d) {
	Map.svg.select('.' + d.properties.GM_CODE)
	.classed('hover', false);

	Map.svg.selectAll('.gemeente')
	.classed('fadeout', false);
	}
	}
gemeente	aantal	code
Aa en Hunze	25357	1680
Aalburg	12846	738
Aalsmeer	30759	358
Aalten	27013	197
Achtkarspelen	28016	59
Alblasserdam	19801	482
Albrandswaard	25069	613
Alkmaar	94866	361
Almelo	72459	141
Almere	196013	34
Alphen aan den Rijn	106785	484
Alphen-Chaam	9717	1723
Ameland	3578	60
Amersfoort	150897	307
Amstelveen	85015	362
Amsterdam	810937	363
Apeldoorn	157545	200
Appingedam	12064	3
Arnhem	150823	202
Assen	67190	106
Asten	16440	743
Baarle-Nassau	6612	744
Baarn	24314	308
Barendrecht	47377	489
Barneveld	54152	203
Bedum	10494	5
Beek (L.)	16271	888
Beemster	8910	370
Beesel	13617	889
Bellingwedde	8920	7
Bergeijk	18256	1724
Bergen (L.)	13237	893
Bergen (NH.)	30076	373
Bergen op Zoom	66419	748
Berkelland	44666	1859
Bernheze	29690	1721
Best	28617	753
Beuningen	25288	209
Beverwijk	40093	375
het Bildt	10626	63
De Bilt	42036	310
Binnenmaas	28710	585
Bladel	19834	1728
Blaricum	9094	376
Bloemendaal	22059	377
Bodegraven-Reeuwijk	32910	1901
Boekel	10089	755
Ten Boer	7479	9
Borger-Odoorn	25627	1681
Borne	21884	147
Borsele	22579	654
Boxmeer	28147	756
Boxtel	30320	757
Breda	179623	758
Brielle	16312	501
Bronckhorst	36932	1876
Brummen	21177	213
Brunssum	28958	899
Bunnik	14626	312
Bunschoten	20492	313
Buren	26019	214
Bussum	32631	381
Capelle aan den IJssel	66178	502
Castricum	34288	383
Coevorden	35769	109
Cranendonck	20344	1706
Cromstrijen	12738	611
Cuijk	24783	1684
Culemborg	27590	216
Dalfsen	27674	148
Dantumadiel	19030	1891
Delft	100046	503
Delfzijl	25698	10
Deurne	31659	762
Deventer	98322	150
Diemen	25930	384
Dinkelland	25947	1774
Doesburg	11437	221
Doetinchem	56344	222
Dongen	25358	766
Dongeradeel	24160	58
Dordrecht	118691	505
Drechterland	19250	498
Drimmelen	26695	1719
Dronten	40413	303
Druten	18210	225
Duiven	25609	226
Echt-Susteren	31976	1711
Edam-Volendam	28920	385
Ede	110656	228
Eemnes	8779	317
Eemsmond	15928	1651
Eersel	18183	770
Eijsden-Margraten	24979	1903
Eindhoven	220920	772
Elburg	22645	230
Emmen	108052	114
Enkhuizen	18376	388
Enschede	158586	153
Epe	32351	232
Ermelo	26045	233
Etten-Leur	42357	777
Ferwerderadiel	8790	1722
Franekeradeel	20445	70
De Friese Meren	51414	1921
Geertruidenberg	21571	779
Geldermalsen	26300	236
Geldrop-Mierlo	38854	1771
Gemert-Bakel	29315	1652
Gennep	17286	907
Giessenlanden	14442	689
Gilze en Rijen	26069	784
Goeree-Overflakkee	48245	1924
Goes	36954	664
Goirle	23098	785
Gorinchem	35242	512
Gouda	70941	513
Grave	12695	786
's-Gravenhage	508940	518
Groesbeek	18977	241
Groningen	198317	14
Grootegast	12165	15
Gulpen-Wittem	14484	1729
Haaksbergen	24344	158
Haaren	13587	788
Haarlem	155147	392
Haarlemmerliede en Spaarnwoude	5535	393
Haarlemmermeer	144061	394
Halderberge	29340	1655
Hardenberg	59577	160
Harderwijk	45732	243
Hardinxveld-Giessendam	17758	523
Haren	18782	17
Harlingen	15821	72
Hattem	11732	244
Heemskerk	39088	396
Heemstede	26364	397
Heerde	18490	246
Heerenveen	49899	74
Heerhugowaard	53307	398
Heerlen	88259	917
Heeze-Leende	15353	1658
Heiloo	22636	399
Den Helder	56597	400
Hellendoorn	35711	163
Hellevoetsluis	38953	530
Helmond	89256	794
Hendrik-Ido-Ambacht	28911	531
Hengelo (O.)	80957	164
's-Hertogenbosch	143733	796
Heumen	16334	252
Heusden	43165	797
Hillegom	20944	534
Hilvarenbeek	15092	798
Hilversum	86426	402
Hof van Twente	34997	1735
Hollands Kroon	47502	1911
Hoogeveen	54664	118
Hoogezand-Sappemeer	34304	18
Hoorn	71703	405
Horst aan de Maas	41727	1507
Houten	48421	321
Huizen	41245	406
Hulst	27388	677
IJsselstein	34275	353
Kaag en Braassem	25745	1884
Kampen	51092	166
Kapelle	12500	678
Katwijk	62782	537
Kerkrade	46784	928
Koggenland	22485	1598
Kollumerland en Nieuwkruisland	12878	79
Korendijk	10702	588
Krimpen aan den IJssel	28825	542
Krimpenerwaard
Laarbeek	21802	1659
Landerd	15266	1685
Landgraaf	37573	882
Landsmeer	10444	415
Langedijk	26935	416
Lansingerland	57122	1621
Laren (NH.)	10862	417
Leek	19597	22
Leerdam	20590	545
Leeuwarden	107342	80
Leeuwarderadeel	10278	81
Leiden	121163	546
Leiderdorp	26813	547
Leidschendam-Voorburg	73356	1916
Lelystad	76142	995
Leudal	36219	1640
Leusden	28997	327
Lingewaal	11060	733
Lingewaard	45776	1705
Lisse	22336	553
Littenseradiel	10926	140
Lochem	33248	262
Loon op Zand	23080	809
Lopik	13999	331
Loppersum	10196	24
Losser	22612	168
Maasdriel	24156	263
Maasgouw	23907	1641
Maassluis	32080	556
Maastricht	122488	935
De Marne	10209	1663
Marum	10378	25
Medemblik	43320	420
Meerssen	19254	938
Menameradiel	13673	1908
Menterwolde	12258	1987
Meppel	32867	119
Middelburg (Z.)	47642	687
Midden-Delfland	18456	1842
Midden-Drenthe	33366	1731
Mill en Sint Hubert	10850	815
Moerdijk	36729	1709
Molenwaard	29032	1927
Montferland	34987	1955
Montfoort	13639	335
Mook en Middelaar	7796	944
Muiden	6287	424
Naarden	17205	425
Neder-Betuwe	22555	1740
Nederweert	16751	946
Neerijnen	12020	304
Nieuwegein	61038	356
Nieuwkoop	27104	569
Nijkerk	40638	267
Nijmegen	168292	268
Nissewaard
Noord-Beveland	7530	1695
Noordenveld	31087	1699
Noordoostpolder	46356	171
Noordwijk	25691	575
Noordwijkerhout	15956	576
Nuenen Gerwen en Nederwetten	22620	820
Nunspeet	26680	302
Nuth	15583	951
Oegstgeest	22910	579
Oirschot	17980	823
Oisterwijk	25802	824
Oldambt	38560	1895
Oldebroek	22835	269
Oldenzaal	32137	173
Olst-Wijhe	17770	1773
Ommen	17361	175
Onderbanken	7881	881
Oost Gelre	29700	1586
Oosterhout	53717	826
Ooststellingwerf	25672	85
Oostzaan	9139	431
Opmeer	11368	432
Opsterland	29863	86
Oss	84954	828
Oud-Beijerland	23715	584
Oude IJsselstreek	39595	1509
Ouder-Amstel	13271	437
Oudewater	9873	589
Overbetuwe	46665	1734
Papendrecht	32117	590
Peel en Maas	43314	1894
Pekela	12706	765
Pijnacker-Nootdorp	51071	1926
Purmerend	79576	439
Putten	23872	273
Raalte	36519	177
Reimerswaal	21927	703
Renkum	31580	274
Renswoude	4924	339
Reusel-De Mierden	12713	1667
Rheden	43640	275
Rhenen	19116	340
Ridderkerk	45253	597
Rijnwaarden	10917	196
Rijssen-Holten	37661	1742
Rijswijk (ZH.)	47634	603
Roerdalen	20832	1669
Roermond	56929	957
De Ronde Venen	42642	736
Roosendaal	77027	1674
Rotterdam	618357	599
Rozendaal	1503	277
Rucphen	22180	840
Schagen	45978	441
Scherpenzeel	9498	279
Schiedam	76450	606
Schiermonnikoog	942	88
Schijndel	23360	844
Schinnen	12901	962
Schouwen-Duiveland	33852	1676
Simpelveld	10844	965
Sint Anthonis	11691	1702
Sint-Michielsgestel	28121	845
Sint-Oedenrode	17934	846
Sittard-Geleen	93691	1883
Sliedrecht	24528	610
Slochteren	15548	40
Sluis	23820	1714
Smallingerland	55467	90
Soest	45493	342
Someren	18690	847
Son en Breugel	16235	848
Stadskanaal	32803	37
Staphorst	16367	180
Stede Broec	21485	532
Steenbergen	23374	851
Steenwijkerland	43350	1708
Stein (L.)	25390	971
Stichtse Vecht	63856	1904
Strijen	8683	617
Súdwest-Fryslân	84180	1900
Terneuzen	54709	715
Terschelling	4780	93
Texel	13552	448
Teylingen	35735	1525
Tholen	25408	716
Tiel	41775	281
Tilburg	210270	855
Tubbergen	21206	183
Twenterand	33929	1700
Tynaarlo	32493	1730
Tytsjerksteradiel	31973	737
Uden	40913	856
Uitgeest	13234	450
Uithoorn	28418	451
Urk	19470	184
Utrecht	328164	344
Utrechtse Heuvelrug	47951	1581
Vaals	9685	981
Valkenburg aan de Geul	16675	994
Valkenswaard	30335	858
Veendam	27792	47
Veenendaal	63252	345
Veere	21868	717
Veghel	37464	860
Veldhoven	44155	861
Velsen	67220	453
Venlo	100428	983
Venray	43112	984
Vianen	19596	620
Vlaardingen	70981	622
Vlagtwedde	15905	48
Vlieland	1110	96
Vlissingen	44444	718
Voerendaal	12454	986
Voorschoten	24951	626
Voorst	23767	285
Vught	25638	865
Waalre	16765	866
Waalwijk	46498	867
Waddinxveen	25508	627
Wageningen	37429	289
Wassenaar	25675	629
Waterland	17134	852
Weert	48721	988
Weesp	18172	457
Werkendam	26387	870
West Maas en Waal	18419	668
Westerveld	18933	1701
Westervoort	15138	293
Westland	103241	1783
Weststellingwerf	25454	98
Westvoorne	13964	614
Wierden	23909	189
Wijchen	41043	296
Wijdemeren	23187	1696
Wijk bij Duurstede	23043	352
Winsum	13850	53
Winterswijk	28881	294
Woensdrecht	21621	873
Woerden	50577	632
De Wolden	23583	1690
Wormerland	15777	880
Woudenberg	12422	351
Woudrichem	14425	874
Zaanstad	150598	479
Zaltbommel	27182	297
Zandvoort	16575	473
Zederik	13656	707
Zeevang	6341	478
Zeewolde	21499	50
Zeist	61250	355
Zevenaar	32283	299
Zoetermeer	123561	637
Zoeterwoude	8075	638
Zuidhorn	18775	56
Zuidplas	40892	1892
Zundert	21399	879
Zutphen	47164	301
Zwartewaterland	22167	1896
Zwijndrecht	44547	642
Zwolle	123159	193