Skip to content

Instantly share code, notes, and snippets.

@Digital-Banana
Last active October 23, 2019 20:03
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Digital-Banana/15695c6967f6de32367d63d064cd1cbb to your computer and use it in GitHub Desktop.
Heerlen Choropleth
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Heerlen</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<section id="heerlen">
<h1>Inwoners Heerlen</h1>
<p>Op 30 april 2017 had Heerlen 86.910 inwoners. De gemeente is daarmee de vierde in grootte van Limburg, na Maastricht, Venlo en Sittard-Geleen.</p>
<figure>
<svg id="map"/>
</figure>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js" charset="utf-8"></script>
<script src="buurten.json"></script>
<script src="index.js"></script>
</body>
</html>
var margin = { top: 50, right: 50, bottom: -20, left: 50 },
width = 300 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var svg = d3.select("#map")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top +")");
var projection = d3.geoMercator()
.center([5.961, 50.865])
.scale(110000)
.translate([width / 2, height / 2]);
var path = d3.geoPath()
.projection(projection);
var totaalInw = [0, 100, 250, 500, 1000, 1500, 2000, 3000, 5000];
var palette = ['#fff7f3','#fde0dd','#fcc5c0','#fa9fb5','#f768a1','#dd3497','#ae017e','#7a0177','#49006a'];
var color = d3.scaleLinear()
.domain(totaalInw)
.range(palette);
var tip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
d3.json("buurten.json", function(err, json) {
if (err) throw error;
function drawMap() {
svg = svg.append("g")
.attr("class", "heerlen")
.selectAll("#map")
.data(json.features);
svg
.enter().append("g")
.attr("class", function(d) {
return "buurt " + d.properties.BU_NAAM;
})
.append("path")
.attr("d", path)
.style("fill", function(d) {
return color(d.properties.AANT_INW);
})
.on("mouseover", function(d) {
tip.transition()
.duration(300)
.style("opacity", .9)
tip.html(
"<h4>" + "Plaats " + "</h4>" + "<p>" + d.properties.BU_NAAM + "</p>" +
"<br>" + "<hr> " +
"<h4>" + "Inwoners " + "</h4>" + "<p>" + d.properties.AANT_INW) + "</p>"
})
.on("mousemove", function(d) {
tip
.style("left", (d3.event.pageX + 15) + "px")
.style("top", (d3.event.pageY + 5) + "px");
})
.on("mouseout", function(d) {
tip.transition()
.duration(300)
.style("opacity", 0);
});
};
drawMap();
});
html {
font-family: 'Roboto', sans-serif;
}
body {
background: whitesmoke;
}
#map {
display: block;
padding: 0;
}
figure {
padding: 0;
margin: 0;
}
g.buurt path {
stroke: #444;
stroke-width: 1px;
stroke-linejoin: round;
stroke-linecap: round;
}
.buurt path:hover, .heerlen path:hover {
opacity: .85;
transition: .2s;
}
div.tooltip {
position: absolute;
width: 160px;
height: 110px;
padding: 15px;
background: #eee;
border: 1px solid #444;
border-radius: 3px;
pointer-events: none;
}
h1, h2, h3, h4, p, a, span, div {
margin: 0;
}
.tooltip p {
margin: 0;
display: inline;
width: 200px;
}
#heerlen {
width: 800px;
padding: 20px;
}
#heerlen h1 {
font-size: 1.2em;
color: #555;
margin: 0 0 5px 0;
}
#heerlen p {
color: #aaa;
width: 400px;
line-height: 1.4;
font-size: .7em;
margin-bottom: 20px;
}
h2 {
font-size: .9em;
font-weight: 400;
color: dimgray;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment