Module 4 - Municipalities of the Netherlands

README.md

1. downloaded the shp files from http://www.cbs.nl/nl-NL/menu/themas/dossiers/nederland-regionaal/publicaties/geografische-data/archief/2015/wijk-en-buurtkaart-2014-art.htm

2. Worked on the command line with ogr2ogr*:

• ogr2ogr -f "ESRI Shapefile" source_maps/wgs84.shp source_maps/shape-2014-versie-1.0/gem_2014.shp -s_srs EPSG:28992 -t_srs EPSG:4326

• ogr2ogr -f "GeoJSON" -lco COORDINATE_PRECISION=6 source_maps/wgs84.geojson source_maps/wgs84.shp

4. Simplified it to ~1% in mapshaper.org

5. retrieved province data from http://www.cbs.nl/nl-NL/menu/methoden/classificaties/overzicht/gemeentelijke-indeling/2015/default.htm

• terminal commands taken from http://cobr.io/2015/03/how-to-build-a-chloropleth-map-with-leaflet-js-and-a-dash-of-d3-js/

6. to cbs data 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

7. colors from http://colorbrewer2.org/

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]);
			});	
	}

};

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>

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;
}

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();

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);
	}
}

z_Bevolking_grootte_2014_edited.csv

z_wgs84_edited.json