D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
emacgillavry
Full window
Github gist
Basic GeoJSON map in D3
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Maps in D3js</title> <meta name="description" content="Maps in d3js"> <meta name="author" content="Edward Mac Gillavry"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="d3js"> <link rel="shortcut icon" href=""> <style> body { background-color: #fffaf5; } svg { background-color: #fffaf5; } .gemeente { fill: #ccc; stroke-width: 0.4; stroke: #fff; } </style> </head> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <script> let width = 450, height = 600, svg = d3.select("body") .append("svg") .attr('width', width) .attr('height', height); d3.json("gemeenten2017.geojson", function(error, gemeenten) { if (error) throw error; let projection = d3.geoMercator() .fitSize([width, height], gemeenten); let path = d3.geoPath() .projection(projection); svg.append("g") .selectAll("path") .data(gemeenten.features) .enter() .append("path") .attr("class","gemeente") .attr("d", path) .append("title") .text(function(d) { return d.properties.statnaam}); }); </script> </body> </html>
https://d3js.org/d3.v4.min.js