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.
See also: Filled version, Combined version
US TopoJSON via Mike Bostock
Note: the blur filter results look terrible in Safari.
| <!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 http://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> |
