Old school D3 from simpler times

All examples By author By category About

wboykinm

Full window Github gist

Sketchy Continental USA

A #d3js sketch-style map based on Daniel P. Huffman's Times Approximate Linework, using d3.sketchy and a fill adaptation by Elijah Meeks.

<html>
<head>
  <title>Sketchy Map with D3</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: 600px;
  }

.countries {
    fill: #e2e3e3;
    stroke: none;
  }

</style>
<body>

<div id="viz">
  <svg>
  </svg>
</div>
<div id="controls" />

<script>
d3.json("admin1_polygons_topo.json", createMap);
var colorScale = d3.scale.ordinal()
  .range(["#F8E1A5", "#4F4D42", "#A38869", "#D7DECF", "#8D927F", "#CFBE99", "#DCE9BD"]);

function createMap(conus) {
  var countries = topojson.feature(conus, conus.objects.admin1);
  var neighbors = topojson.neighbors(conus.objects.admin1.geometries);
  var projection = d3.geo.albers()
    .scale(800)
    .translate([300, 200])
  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]
          });
        })
        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: 1,
          sketch: 1
        });
      })
    })
}

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>
</body>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

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

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