2013 Population Density Heatmap of The Netherlands inspired by mbostock's Projected TopoJSON https://gist.github.com/mbostock/5557726 using following resources:
Last active
October 26, 2015 13:28
-
-
Save rnugraha/e5054a4202170752fb3f to your computer and use it in GitHub Desktop.
Population Density of The Netherlands in 2013
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset='utf-8'> | |
| <style> | |
| .gemeente { | |
| stroke: #fff; | |
| stroke-width:1 | |
| } | |
| .gemeente:hover { | |
| fill: #588C7E !important; | |
| } | |
| .tooltipText { | |
| font-family: 'Helvetica'; | |
| font-size: .8em; | |
| padding: 5px; | |
| background-color: white; | |
| opacity: .6; | |
| } | |
| .name_null { | |
| fill:white; | |
| } | |
| </style> | |
| <body> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js'></script> | |
| <script> | |
| var width = 600, | |
| height = 800; | |
| var path = d3.geo.path() | |
| .projection(null); | |
| var svg = d3.select('body').append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| d3.json('nl-gem-2013.json', function(error, nl) { | |
| if (error) throw error; | |
| var fillColor = d3.scale.linear() | |
| .domain([4000, 250000, 500000, 1000000]) | |
| .range(['#F2E394', '#D87F00', '#D96459', '#8C4646']); | |
| var tooltip = d3.select('body') | |
| .append('div') | |
| .style('position', 'absolute') | |
| .style('z-index', '10') | |
| .style('visibility', 'hidden') | |
| .attr('class', function () {return 'tooltipText'}); | |
| var showGemeenteName = function (d) { | |
| if (d.properties.gm_name !== null) { | |
| tooltip.text(d.properties.gm_name + ' - ' + d.properties.no_res); | |
| return tooltip.style('visibility', 'visible'); | |
| } | |
| }; | |
| var getTooltipPosition = function (d) { | |
| if (d.properties.gm_name !== null) { | |
| return tooltip.style('top', (d3.event.pageY-10)+'px').style('left',(d3.event.pageX+10)+'px'); | |
| } | |
| }; | |
| var hideGemeenteName = function () { | |
| return tooltip.style('visibility', 'hidden'); | |
| }; | |
| svg.append('path') | |
| .datum(topojson.feature(nl, nl.objects.gem_2013_v1)) | |
| .attr('class', 'land') | |
| .attr('d', path); | |
| svg.append('path') | |
| .datum(topojson.mesh(nl, nl.objects.gem_2013_v1, function(a, b) { return a !== b; })) | |
| .attr('class', 'boundary') | |
| .attr('d', path); | |
| svg.selectAll('.gemeente') | |
| .data(topojson.feature(nl, nl.objects.gem_2013_v1).features) | |
| .enter().append('path') | |
| .attr('class', function(d) { return 'gemeente name_' + d.properties.gm_name}) | |
| .attr('id', function(d) { return d.properties.gm_code; }) | |
| .attr('d', path) | |
| .style('fill', function (d) { | |
| return d.properties.no_res > 0 ? fillColor(d.properties.no_res) : 'white'; | |
| }) | |
| .on('mouseover', showGemeenteName) | |
| .on('mousemove', getTooltipPosition) | |
| .on('mouseout', hideGemeenteName); | |
| }); | |
| d3.select(self.frameElement).style('height', height + 'px'); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment