D3 Examples - Pencil Sketch d3 v4

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.

xxxxxxxxxx
 
<!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>
​
<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);
​
  var projectedWorld  = [];
  
  // For each line feature
  topojson.feature(world, world.objects.coast).features.forEach(function(d) {
    var coords = [];
    // Get the each coordinate:
    d.geometry.coordinates.forEach(function(c) {
        // Skip points that might lead to wrapping around the anti-meridian.
        if (Math.abs(c[0] < 175)) {
            coords.push(projection(c));
        }
    })
    projectedWorld.push(coords);  
  })
  
  // Draw several layers of the data with a jittery line:
  g2.selectAll("null")
    .data(projectedWorld)
    .enter()
    .append("path")
    .attr("d",line)
    .style("fill","none")
    .attr("id",function(d,i) { return "i" + i; })
    .attr("stroke","#666");
     
  g2.selectAll(".path2")
    .data(projectedWorld)
    .enter()
    .append("path")
    .attr("d",line)
    .attr("fill","none")
    .attr("stroke","#aaa"); 
​
  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>
    