Old atlas style #3

A sort of colorized old atlas map style with a relief layer by Richard Edes Harrison. Uses a turbulence filter and some compositing to soften/distress the path fills and blurs the stroke. The stroke around each state is kept on the inner edge only by clipping each state to itself.

US TopoJSON via Mike Bostock

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  background: url('harrison.png') no-repeat center center;
  background-size: contain;
}

.state {
  stroke-width: 2px;
}

rect {
  stroke: none;
  fill: rgba(224,186,148,0.3);
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script>

var width = 960,
    height = 500;

var projection = d3.geo.albers()
  .rotate([96, 0])
  .parallels([29.5, 45.5])
  .center([-0.62, 38.65])
  .scale(1065)
  .translate([width / 2, height / 2])
  .precision(.1);

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

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

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

svg.append("rect")
  .attr("width", width)
  .attr("height", height);

var colors = ["#00d565", "#d5008e", "#d5d500", "#0ab0cc", "#bf5a15"];

d3.json("us.json", function(err, us) {

var neighbors = topojson.neighbors(us.objects.states.geometries),
      features = topojson.feature(us, us.objects.states).features;

features.forEach(function(d,i){

// Greedy color selection
    d.properties.color = colors.filter(function(c){
      return neighbors[i].map(function(n){
        return features[n].properties.color;
      }).indexOf(c) === -1;
    })[0];

// Mix it up a bit, get fifth color in
    colors.push(colors.shift());

// circular <use> doesn't work in FF
    defs.append("clipPath")
      .attr("id", "clip" + i)
      .append("path")
        .attr("d", path(d));

});

svg.selectAll(".state")
    .data(features)
    .enter()
    .append("path")
      .attr("class", "state")
      .attr("d", path)
      .style("fill",function(d){
        return transparent(d.properties.color, 0.3);
      })
      .style("stroke",function(d,i){
        return d.properties.color;
      })
      .attr("clip-path", function(d,i){
        return "url(#clip" + i + ")";
      })
      .attr("filter", "url(#splotch)");

var filter = defs.append("filter")
      .attr("id", "splotch");

filter.append("feTurbulence")
    .attr("type", "fractalNoise")
    .attr("baseFrequency", ".01,.01")
    .attr("numOctaves", 4);

filter.append("feColorMatrix")
    .attr("values", "0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2")
    .attr("result", "texture");

filter.append("feComposite")
    .attr("in", "SourceGraphic")
    .attr("in2", "texture")
    .attr("operator", "in");

filter.append("feGaussianBlur")
    .attr("stdDeviation", 3.5);

});

function transparent(color, alpha) {
  var rgb = d3.rgb(color);
  return "rgba(" + [rgb.r, rgb.g, rgb.b, alpha].join(",") + ")";
}

</script>

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