D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
BenHeubl
Full window
Github gist
Central Europe
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> path { fill: none; stroke: #000; stroke-linejoin: round; stroke-linecap: round; } </style> </head> <body> <script> var canvas = d3.select("body").append("svg") .attr("width", 760) .attr("height", 760) d3.json("data3.json", function (data) { var group = canvas.selectAll("g") .data(data.features) .enter() .append("g") var projection = d3.geo.mercator().scale(400).translate([200,600]); var path = d3.geo.path().projection(projection); var areas = group.append("path") .attr("d", path) .attr("class", "area") .attr("fill", "red") .attr("stroke", "red"); group.append ("text") .attr("x", function (d) { return path.centroid(d)[0]; }) .attr("y", function (d) { return path.centroid(d)[1]; }) .attr("text-anchor", "middle") .text(function (d) {return d.properties.name; }) .attr("font-size", 8) }); </script> </body>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js