D3 Examples - Old atlas style

Old atlas style
A sort of colorized old atlas map style with a relief layer by Richard Edes Harrison. The stroke around each state is kept on the inner edge only by clipping each state to itself.
Note: the blur filter results look terrible in Safari.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
svg {
  background: url('harrison.png') no-repeat center center;
  background-size: contain;
}
​
path {
  fill: none;
}
​
.mesh {
  stroke: #999;
  stroke-width: 0.5px;
  stroke-dasharray: 4,2,1,2;
}
​
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);
​
svg.append("rect")
  .attr("width", width)
  .attr("height", height);
​
var colors = d3.scale.ordinal()
  .range(["#7accbf", "#9fe468", "#cdc268", "#bfa2d3", "#d9ea56", "#df7aa9", "#e49a56"]);
​
d3.json("us.json", function(err, us) {
​
  var mesh = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }),
      neighbors = topojson.neighbors(us.objects.states.geometries),
      features = topojson.feature(us, us.objects.states).features;
​
  // Coloring algo from https://bl.ocks.org/1wheel/5899035
  features.forEach(function(d,i){
​
    d.properties.color = colors(d.color = d3.max(neighbors[i], function(n) { return features[n].color; }) + 1 | 0);
​
  });
​
  var defs = svg.append("defs");
​
  // Scale the blur a bit between tiny and huge states
  var scale = d3.scale.pow()
    .domain([0, 25000])
    .range([2, 8]);
​
  features.forEach(function(feature,i){
​
    var scaled = scale(path.area(feature));
​
    defs.append("filter")
      .attr("id", "blur" + i)
      .append("feGaussianBlur")
        .attr("stdDeviation", scaled);
​
    // circular <use> doesn't work in FF
    defs.append("clipPath")
      .attr("id", "clip" + i)
      .append("path")
        .attr("d", path(feature));
​
    svg.append("path")
      .attr("class", "state")
      .attr("stroke", feature.properties.color)
      .attr("stroke-width", scaled)
      .attr("clip-path", "url(#clip" + i + ")")
      .attr("filter", "url(#blur" + i + ")")
      .attr("d", path(feature));
​
  });
​
  svg.append("path")
    .datum(mesh)
    .attr("class", "mesh")
    .attr("d", path);
​
});
​
</script>
​
    