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.
See also: Outlined version, Combined version
US TopoJSON via Mike Bostock
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.
See also: Outlined version, Combined version
US TopoJSON via Mike Bostock
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
svg { | |
background: url('harrison.png') no-repeat center center; | |
background-size: contain; | |
} | |
.mesh { | |
fill: none; | |
stroke: #ccc; | |
stroke-width: 0.5px; | |
} | |
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 = ["#00d565", "#d5008e", "#d5d500", "#0ab0cc", "#bf5a15"]; | |
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; | |
// Greedy color selection | |
features.forEach(function(d,i){ | |
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()); | |
}); | |
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); | |
}) | |
.attr("filter", "url(#splotch)"); | |
svg.append("path") | |
.datum(mesh) | |
.attr("class", "mesh") | |
.attr("d", path); | |
var filter = svg.append("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 -1.1 1.2") | |
.attr("result", "texture"); | |
filter.append("feComposite") | |
.attr("in", "SourceGraphic") | |
.attr("in2", "texture") | |
.attr("operator", "in"); | |
}); | |
function transparent(color, alpha) { | |
var rgb = d3.rgb(color); | |
return "rgba(" + [rgb.r, rgb.g, rgb.b, alpha].join(",") + ")"; | |
} | |
</script> |