xxxxxxxxxx
<meta charset="utf-8">
<style>
svg {
background: url('https://www.dropbox.com/s/4rk5x0y76v44o6f/harrison.png?dl=0') no-repeat center center;
background-size: contain;
}
path {
fill: none;
}
.counties {
stroke: #bfbfbf;
stroke-width: .25;
fill: none;
}
.mesh {
stroke: #999;
stroke-width: 0.5px;
stroke-dasharray: 4,2,1,2;
}
.states {
stroke: none;
stroke-width: none;
fill: none;
}
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>
// glowed up old atlas: my take on a great noah veltman example. love his work! https://bl.ocks.org/veltman
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(["#ffc300","#bcff00","#3cff00", "#00ff43","#00ffc3", "#00bbff"]);
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,
counties = topojson.feature(us, us.objects.counties),
states = topojson.feature(us, us.objects.states);
// 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");
//Filter for the outside glow
var filter = defs.append("filter")
.attr("id","glow");
filter.append("feGaussianBlur")
.attr("stdDeviation","3.5")
.attr("result","coloredBlur");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
.attr("in","coloredBlur");
feMerge.append("feMergeNode")
.attr("in","SourceGraphic");
// 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)
.attr("result","coloredBlur");
// 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))
.style("filter", "url(#glow)");
});
svg.selectAll(".counties")
.data(counties.features)
.enter().append("path")
.attr("class", "counties")
.attr("d", path);
d3.selectAll(".counties")
.style("filter", "url(#glow)");
svg.selectAll(".states")
.data(states.features)
.enter().append("path")
.attr("class", "states")
.attr("d", path);
d3.selectAll(".states")
.style("filter", "url(#glow)");
});
</script>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js