D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Andrew-Reid
Full window
Github gist
England Topojson
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> svg { background: #9ecae1; } .mesh { fill:none; stroke: white; stroke-width: 0.5px; } .land { fill: #41ab5d; } </style> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/topojson.v1.min.js"></script> </head> <body> <script type="text/javascript"> var width = 400; var height = 400; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var projection = d3.geoMercator() .center([-1.6,52.6]) .scale(2000) .translate([width/2,height/2]); var path = d3.geoPath().projection(projection); var g = svg.append("g"); d3.json("map.json", function(error, england) { g.insert("path", ".land") .datum(topojson.feature(england, england.objects.Clinical_Commissioning_Groups_April_2016_Super_Generalised_Clipped_Boundaries_in_England)) .attr("class", "land") .attr("d", path); g.append("path") .datum(topojson.mesh(england, england.objects.Clinical_Commissioning_Groups_April_2016_Super_Generalised_Clipped_Boundaries_in_England, function(a, b) { return a !== b; })) .attr("class", "mesh") .attr("d", path); }); </script> </body>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v1.min.js