D3 Examples - Old atlas style #3

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.

xxxxxxxxxx
 
<!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>
​
    