Sketchy World

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].

<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 projection = d3.geo.armadillo()
    .scale(260)
    .translate([440, 360])
    .parallel(20)
    .rotate([-12, 0])
    .precision(.1);

var geoPath = d3.geo.path().projection(projection);

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

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()})
  .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()})
  .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