D3 Examples - Sketchy World

xxxxxxxxxx
 
<html>
<head>
  <title>D3 in Action Chapter 7 - Example 1</title>
  <meta charset="utf-8" />
<script src="https://d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
<script src="https://d3js.org/topojson.v1.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>
​
<div id="viz">
  <svg>
  </svg>
</div>
<div id="controls" />
</body>
  <footer>
​
<script>
  d3.json("simpleworld.json", createMap);
​
  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;
​
  var originalNode = this;
  d.geometry.coordinates.forEach(function (p) {
    if (p.length < 2) {
      p = p[0];
    }
    var projectedArea = [];
      p.forEach(function (coordinate) {
        var proj = projection(coordinate);
        projectedArea.push({x: proj[0], y: proj[1]});
      })
      if (d.id !== "ATA") {
        d3.select("g.fill").insert("path", "path")
        .attr("class", "sketchy-fill")
        .style("fill", "none")
        .style("stroke-width", "2px")
        .style("stroke-linecap", "round")
        .attr("stroke", colorScale(d.color))
        .attr("d", cheapSketchy(originalNode));
​
        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>
​
    