Sketchy World template

A non-photorealistically rendered, purposefully oversimplified map of the world using (d3.sketchy)[https://github.com/sebastian-meier/d3.sketchy] along with some custom sketchy functions. Also implements (Jason Davies' automatic coloration based on neighbors)[/jasondavies/4188334].

forked from emeeks's block: Sketchy World template

<html>
<head>
  <title>D3 in Action Chapter 7 - Example 1</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>
<script src="d3.sketchy.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 900px;
    border: none;
  }
  
  .countries {
    fill: #FF99CC;
    stroke: none;
  }

</style>
<body>

function createMap(world) {
    var colorScale = d3.scale.ordinal().range(["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]);
    var countries = topojson.feature(world, world.objects.world);
    var neighbors = topojson.neighbors(world.objects.world.geometries);
    
    
  var width = 950
  var height = 500;
  var n = 12; // 12 sinusoidal sections
  var w = 360 / n;
  var northern = []
  var southern = []
  d3.range(n).forEach(function(i) {
    var north = [ ];
    var south = [ ];
    // left
    north.push([
      -180 + i * w, 
      0
    ]) 
    // top
    north.push([
      -180 + i * w + w/2,
      90
    ])
    // right
    north.push([
      -180 + i * w + w,
      0
    ])
    
    // left
    south.push([
      -180 + i * w, 
      0
    ]) 
    // top
    south.push([
      -180 + i * w + w/2,
      -90
    ])
    // right
    south.push([
      -180 + i * w + w,
      0
    ])
    northern.push(north)
    southern.push(south)
  })

var projection = d3.geo.interrupt(d3.geo.sinusoidal.raw)
  .lobes([northern, southern])
      .rotate([0, 0])
      .scale(150)
      .translate([width / 2, height / 2])
      .precision(.1);
    
    
    var geoPath = d3.geo.path()
    .projection(projection);

var svg = d3.select("svg");
var defs = svg.append("defs");

defs.append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", geoPath);

defs.append("clipPath")
    .attr("id", "clip")
  .append("use")
    .attr("xlink:href", "#sphere");

var sketchy = d3sketchy();

var line = d3.svg.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; });
d3.select("svg").append("g").attr("class", "bg");
d3.select("svg").append("g").attr("class", "fill");
d3.select("svg").append("g").attr("class", "border");

d3.select("g.bg").selectAll("path").data(countries.features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("class", "countries")
.each(function (d, i) {

d.color = d3.max(
          neighbors[i], function(n) {return countries.features[n].color; }) + 1 | 0;

sketchy.pathStroke({svg: d3.select("g.border"), path:projectedArea, density:3, sketch:2});
      }
      else {
        d3.select(originalNode).remove();
      }
    })
})

d3.select("g.fill").selectAll("path")
  .attr("stroke-dasharray", function () {return "0," + this.getTotalLength()})
.attr("clip-path", "url(#clip)")
  .transition()
  .delay(function (d,i) {return i * 50})
      .transition()
      .duration(2500)
      .attrTween("stroke-dasharray", tweenDash);

d3.select("g.border").selectAll("path")
  .style("fill", "none")
  .style("stroke", "black")
  .style("stroke-width", 1)
  .attr("stroke-dasharray", function () {return "0," + this.getTotalLength()})
.attr("clip-path", "url(#clip)")
  .transition()
  .delay(function (d,i) {return i * 50})
      .transition()
      .duration(7500)
      .attrTween("stroke-dasharray", tweenDash);

}

function tweenDash() {
  var l = this.getTotalLength(),
      i = d3.interpolateString("0," + l, l + "," + l);
  return function(t) { return i(t); };
}

function cheapSketchy(path) {
  var length = path.getTotalLength();
  var drawCode = "";
  var x = 0;
  var step = 2.5;

while (x < length / 2) {
    var start = path.getPointAtLength(x);
    var end = path.getPointAtLength(length - x);

drawCode += " M" + (start.x + (Math.random() * step - step/2)) + " " + (start.y + (Math.random() * step - step/2)) + "L" + (end.x + (Math.random() * step - step/2)) + " " + (end.y + (Math.random() * step - step/2));

x += step + (Math.random() * step);
  }

return drawCode;
}
</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js