xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Map made with d3.js</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: #eeeeee; font-family: Helvetica, Arial, sans-serif; } h1 {font-family: sans-serif; font-weight: 100; font-size: 20px; color: #92CC50; padding-left: 50px; } p {font-family: sans-serif; font-weight: 100; font-size: 11px; padding-left: 50px; line-height: 15px; } a:link { text-decoration: none; color: #92CC50; } a:hover { text-decoration: underline; } a:visited { color: #92CC50; } a:active { color: #92CC50; } text {font-family: sans-serif; font-size: 9px; } svg { background-color: white; } #container { width: 600px; margin-left: auto; margin-right: auto; margin-top: 25px; padding: 25px; background-color: white; box-shadow: 1px 1px 1px 1px #ccc; } path { stroke: white; stroke-width: 0.5; fill: #F4E7D3; } </style> </head> <body> <div id="container"> <h1>Swift nests in the city of Utrecht</h1> <p>This map shows the amount of Swift nests counted in 2014 in relation to the amount of urbanisation. </p><p>Dark neighbourhoods are highly urbanized, light neighbourhoods are less urbanized.</p> <p>Bron: <a href="https://opendata.utrecht.nl/dataset/resultaten-gierzwaluwinventarisatie-2014">Gemeente Utrecht</a>, 2015</p> </div> <script type="text/javascript"> //Width and height var w = 600; var h = 500;//Define map projection var projection = d3.geo.mercator() .center([ 5, 53]) .translate([ w/2-180, -2900 ]) .scale([ 120000 ]); //Define path generator var path = d3.geo.path() .projection(projection); //Create SVG var svg = d3.select("#container") .append("svg") .attr("width", w) .attr("height", h);//Load in GeoJSON data d3.json("7.json", function(json) { //Bind data and create one path per GeoJSON feature svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) // .style("fill", "grey") .style("fill", function(d) { //Get data value //var value = d.properties.STED; if (d.properties.STED <= 1) {return "#C1A080"} if (d.properties.STED <= 2) {return "#D6BD9F"} if (d.properties.STED <= 3) {return "#E0CFB8"} if (d.properties.STED <= 4) {return "#F4E7D3"} if (d.properties.STED <= 5) {return "#F9F4ED"} else { //If value is undefined… return "#ccc"; } }); //Load in zwaluw data d3.csv("zwaluw.csv", function(data) { //Create a circle for each nest svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function(d) { //[0] returns the first coordinate (x) of the projected value return projection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { //[1] returns the second coordinate (y) of the projected value return projection([d.lon, d.lat])[1]; }) .attr("r", function(d) { //Use Math.sqrt to scale by area (not radius) return (d.aantal*2) // return Math.sqrt(+d.aantal / w * 10); }) //.attr("r", 5) .style("fill", "green") .style("opacity", 0.5); svg.selectAll("circle") .append("title") .text(function(d) { return d.aantal+ " nests"; }); }); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js