xxxxxxxxxx
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet">
<style>
body {
background: #f5f5f5;
}
.caption {
font-family: 'Cardo';
font-size: 18px;
font-style: italic;
font-weight: 400;
}
.tick {
font-family: 'Cardo';
font-size: 18px;
font-style: italic;
font-weight: 400;
}
.counties {
stroke: #fff;
stroke-width: .25px;
}
.states {
stroke: #fff;
stroke-linejoin: round;
}
.axis {
font-family: Futura;
font-size: 11px;
}
</style>
<svg width="960" height="1100"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
// my style applied to a mbostock example: https://bl.ocks.org/mbostock/39b34968ad5eab65de1d7da81f78bb27
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var path = d3.geoPath();
var color = d3.scaleThreshold()
.domain([1, 10, 50, 200, 500, 1000, 2000, 4000])
.range(d3.schemePuOr[9]);
var x = d3.scaleSqrt()
.domain([0, 4500])
.rangeRound([440, 950]);
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(0,40)");
g.selectAll("rect")
.data(color.range().map(function(d) {
d = color.invertExtent(d);
if (d[0] == null) d[0] = x.domain()[0];
if (d[1] == null) d[1] = x.domain()[1];
return d;
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return x(d[0]); })
.attr("width", function(d) { return x(d[1]) - x(d[0]); })
.attr("fill", function(d) { return color(d[0]); });
g.append("text")
.attr("class", "caption")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.text("Population per square mile");
g.call(d3.axisBottom(x)
.tickSize(13)
.tickValues(color.domain()))
.select(".domain")
.remove();
d3.json("topo.json", function(error, topology) {
if (error) throw error;
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");
svg.append("g")
.selectAll("path")
.data(topojson.feature(topology, topology.objects.blockgroups).features)
.enter().append("path")
.attr("fill", function(d) { return d3.schemePuOr[9][d.id]; })
.attr("d", path);
svg.append("path")
.datum(topojson.feature(topology, topology.objects.counties))
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", ".25px")
.attr("stroke-opacity", 0.3)
.attr("d", path);
d3.selectAll("path")
.style("filter", "url(#glow)");
});
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js
https://d3js.org/topojson.v2.min.js