Icon windmill.svg was created by Edward Boatman and is licensed as Creative Commons – Attribution (CC BY 3.0).
Create TopoJSON file from GeoJSON files with:
topojson -o de-wind.json --id-property id --properties name=name --properties color=color --properties count=count -- de.geojson wind.geojson| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <a onclick="show_svg()" href="#">Download</a> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 650, | |
| height = 850 | |
| imgSize = 20 | |
| plantFactor = 5; | |
| var projection = d3.geo.albers() | |
| .center([0, 51.15]) | |
| .rotate([-10.45, 0]) | |
| .parallels([47, 55]) | |
| .scale(6000) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("id", "output"); | |
| d3.json("de-wind.json", function(error, deWind) { | |
| svg.selectAll(".subunit") | |
| .data(topojson.feature(deWind, deWind.objects.de).features) | |
| .enter().append("path") | |
| .attr("class", function(d) { return "subunit " + d.id; }) | |
| .attr("d", path) | |
| .style("fill", function(d) { return d.properties.color; }); | |
| svg.append("path") | |
| .datum(topojson.mesh(deWind, deWind.objects.de, function(a, b) { return a !== b; })) | |
| .attr("d", path) | |
| .attr("class", "subunit-boundary") | |
| .style("fill", "none") | |
| .style("stroke", "#fff") | |
| .style("stroke-dasharray", "2,2") | |
| .style("stroke-linejoin", "round"); | |
| svg.append("path") | |
| .datum(topojson.mesh(deWind, deWind.objects.de, function(a, b) { return a === b; })) | |
| .attr("d", path) | |
| .attr("class", "boundary") | |
| .style("fill", "none") | |
| .style("stroke", "#fff") | |
| .style("stroke-linejoin", "round"); | |
| svg.selectAll(".wind") | |
| .data(topojson.feature(deWind, deWind.objects.wind).features) | |
| .enter().append("image") | |
| .attr("xlink:href","windmill.svg") | |
| .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) | |
| .attr("dy", ".35em") | |
| .attr("height", function(d) { return imgSize + plantFactor*d.properties.count; }) | |
| .attr("width", function(d) { return imgSize + plantFactor*d.properties.count; }) | |
| .attr("x", function(d) { return -(imgSize + plantFactor*d.properties.count)/2; }) | |
| .attr("y", function(d) { return -(imgSize + plantFactor*d.properties.count)/2; }); | |
| svg.selectAll(".wind-label") | |
| .data(topojson.feature(deWind, deWind.objects.wind).features) | |
| .enter().append("text") | |
| .attr("class", "wind-label") | |
| .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) | |
| .text(function(d) { return d.properties.name; }); | |
| svg.selectAll(".wind-label") | |
| .attr("x", function(d) { return d.geometry.coordinates[0] > 10 ? -6 : 10; }) | |
| .attr("y", "5") | |
| .style("text-anchor", function(d) { return d.geometry.coordinates[0] > 10 ? "end" : "start"; }); | |
| }); | |
| function show_svg(evt) { | |
| var img = document.getElementById("output"); | |
| var serializer = new XMLSerializer(); | |
| var svg_blob = new Blob([serializer.serializeToString(img)], | |
| {'type': "image/svg+xml"}); | |
| var url = URL.createObjectURL(svg_blob); | |
| var svg_win = window.open(url, "svg_win"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
