Pencil Sketch d3 v4

An attempt to re-create some of the effect of the d3v3 pencil sketch by Mike Bostok : Pencil Sketch.

The block uses d3v4, takes a line feature, converts the geographic coordinates to svg coordinates and then, when drawing the line, jitters the points and spines between them. Not quite appropriate for a spinning globe, but fine for still maps.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

var width = 960,
    height = 500;

var projection = d3.geoConicConformal()
  .parallels([50,70])
  .scale(1100).rotate([90,0])
  .center([0,64])
  .translate([width/2,height/2]);

var path = d3.geoPath(projection);
	
var colors = ["#99d8c9","#9ebcda","#a8ddb5","#fee8c8","#ece7f2","#f7fcb9","#fa9fb5"];
	
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .style('background','#43a2ca')
  .style('background-opacity',0.2);
	
var g1 = svg.append("g");
var g2 = svg.append("g");

d3.json("coast.json", function(error, world) {

var line = d3.line()
    .x(function(d) { return jitter(d[0],12) })
    .y(function(d) { return jitter(d[1],12) })
    .curve(d3.curveBasis);

g2.selectAll(".path")
    .data(projectedWorld)
	.enter()
	.append("path")
	.attr("d",line)
	.attr("fill","none")
	.attr("stroke","black");
	
  // Fill the land masses with actual land mass data
  d3.json("world.json", function(error, world) {
    g1.append("path")
	  .datum(topojson.feature(  world, world.objects.countries  )   )
	  .attr("d", path )
	  .style('fill','#a8ddb5');
  })
})

function jitter(coord,magnitude) {
  coord += Math.random() * magnitude - magnitude/2;
  return coord;
}

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js