Map with Custom Graticule

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: white;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

.fill {
  fill: #fff;
}

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

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

</style>
<body>
  <div id="map"></div>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/d3-geo-projection@2"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>

const map = d3.select("#map");
    const width = map.node().getBoundingClientRect().width;
    const height = width / 2;

const color = d3.scaleThreshold()
	  .domain(d3.range(9))
    .range(d3.schemeCategory10);

const projection = d3.geoNaturalEarth2().rotate([-11.5,0]);

const path = d3.geoPath().projection(projection);
  
    const zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([[0,0], [width, height]])
    .extent([[0, 0], [width, height]])
    .on("zoom", zoomed);
  
    const svg = map.append("svg")
    .attr("xmlns:xlink","https://www.w3.org/1999/xlink")
    .attr("width", width)
    .attr("height", height);

const g = svg.append('g');

/*
    const graticule = d3.geoGraticule();
    */
    const graticule = d3.geoGraticule10();
    //console.log(grat.coordinates[4]=grat.coordinates[3]);

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);    
      
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
  if (error) throw error;

svg.selectAll("path")
       .data(topojson.feature(world, world.objects.countries).features)
       .enter().append("path")
       .attr("class",".border")
       .attr('fill', d => color( Math.random() * 10 ))
       .attr("d", path);
  
});
  
  
function zoomed(){
  g.attr("transform", d3.event.transform);
}   
  </script>
</body>

https://unpkg.com/d3@4

https://unpkg.com/d3-geo-projection@2

https://unpkg.com/topojson-client@3