Last active
October 23, 2019 20:03
-
-
Save Digital-Banana/15695c6967f6de32367d63d064cd1cbb to your computer and use it in GitHub Desktop.
Heerlen Choropleth
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> | |
| <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> |
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
| 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(); | |
| }); |
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
| 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