D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mbostock
Full window
Github gist
Tobler–Mercator
<!DOCTYPE html> <meta charset="utf-8"> <style> .stroke { fill: none; stroke: #000; stroke-width: 3px; } .fill { fill: #fff; } .graticule { fill: none; stroke: #777; stroke-width: 0.5px; stroke-opacity: 0.5; } .land { fill: #222; } .boundary { fill: none; stroke: #fff; stroke-width: 0.5px; } </style> <svg width="960" height="960"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://unpkg.com/topojson-client@3"></script> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var projection = d3.geoProjection(toblerMercatorRaw) .scale((width - 3) / (2 * Math.PI)) .translate([width / 2, height / 2]) .precision(0.1); var path = d3.geoPath() .projection(projection); var graticule = d3.geoGraticule(); svg.append("defs").append("path") .datum(graticule.outline()) .attr("id", "sphere") .attr("d", path); svg.append("use") .attr("class", "stroke") .attr("xlink:href", "#sphere"); svg.append("use") .attr("class", "fill") .attr("xlink:href", "#sphere"); svg.append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path); d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, world) { if (error) throw error; svg.insert("path", ".graticule") .datum(topojson.feature(world, world.objects.land)) .attr("class", "land") .attr("d", path); svg.insert("path", ".graticule") .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) .attr("class", "boundary") .attr("d", path); }); function toblerMercatorRaw(lambda, phi) { var cosPhi = Math.cos(phi); return [lambda * cosPhi * cosPhi, Math.log(Math.tan((Math.PI / 2 + phi) / 2))]; } </script>
https://d3js.org/d3.v4.min.js
https://unpkg.com/topojson-client@3