JSFiddle - React, Tailwind, and code Playground

by jeffxiao

HTML

<svg width="960" height="960"></svg>

CSS

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: 0.5;
}

JavaScript

// REF: https://bl.ocks.org/mbostock/3757110

var svg = d3.select("svg");
var width = +svg.attr("width");
var height = +svg.attr("height");

var useAE = true;	// TODO: change me
var projection = d3.geoMercator();
if (useAE) {
	projection = d3
    .geoAzimuthalEquidistant()
    .scale(150)
    .translate([width / 2, height / 2])
    .rotate([122.4194, -37.7749])
    .clipAngle(180 - 1e-3)
    .precision(0.1);
}
  
var path = d3.geoPath().projection(projection);

svg
  .append("path")
  .datum(d3.geoGraticule()()) // was: d3.geoGraticule10()
  .attr("class", "graticule")
  .attr("d", path);