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