https://gist.github.com/4544529 (demo) was my first d3 adventure, where I scraped signatures from a White House petition and showed them as a pie chart.
Here, I show them as a US heat map (based on one of Mike Bostock's map demos). You can click on a state, and see how many signatures came from it.
Darker color means more signatures, but since the numbers range from a few dozens to >4500, the scale is logarithmic.
I don't know yet how to use log()
interpolators (I promise to learn), so I just did it quick and dirty with linear()
and masking tape.
forked from thedod's block: Clickable US heat-map of petition signature count
xxxxxxxxxx
<meta charset="utf-8">
<script src="https://d3js.org/d3.v2.min.js?2.9.6"></script>
<script src="histograms.js"></script>
<style>
.background {
fill: none;
pointer-events: all;
}
#states {
stroke: #000;
stroke-width: 1.5px;
}
#states text {
fill: #000;
stroke: none;
text-anchor:middle;
font-size: 10px;
}
#states .active {
fill: steelblue !important;
}
#states text.active {
font-size: 12px;
font-weight:bold;
fill: #fff;
stroke-width: .5px;
fill: #fff !important;
stroke: #000;
}
</style>
<body>
<script>
var hits = {};
var parade = window.histograms.states;
for (var i = 0 ; i<parade.length ; i++)
hits[parade[i].name] = parade[i].hits;
var width = 960,
height = 500,
centered;
var projection = d3.geo.albersUsa()
.scale(width)
.translate([0, 0]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", click);
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.append("g")
.attr("id", "states");
d3.json("states.json", function(json) {
var heatmap = d3.scale.linear()
.domain([0,d3.max(json.features, function(d) { return Math.log(hits[d.properties.abbr] || 1); })])
.interpolate(d3.interpolateRgb)
.range(["#ffffff","#073f07"])
var states = g.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path)
.attr("id", function(d) { return d.properties.abbr; })
.style("fill", function(d) { return heatmap(Math.log(hits[d.properties.abbr] || 1)); })
.on("click", click)
var labels = g.selectAll("text")
.data(json.features)
.enter().append("text")
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
.attr("id", function(d) { return 'label-'+d.properties.abbr; })
.attr("dy", ".35em")
.on("click", click)
.text(function(d) { return d.properties.abbr; });
});
function click(d) {
var x = 0,
y = 0,
k = 1;
if (d && centered !== d) {
var centroid = path.centroid(d);
x = -centroid[0];
y = -centroid[1];
k = 4;
centered = d;
} else {
centered = null;
}
g.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });
g.selectAll("text")
.text(function(d) { return d.properties.abbr; })
.classed("active",false);
if (centered) {
g.select("#label-"+centered.properties.abbr)
.text(function(d) { return d.properties.name+': '+(hits[d.properties.abbr]||'(none)'); })
.classed("active", centered && function(d) { return d === centered; });
}
g.transition()
.duration(1000)
.attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
.style("stroke-width", 1.5 / k + "px");
}
</script>
Modified http://d3js.org/d3.v2.min.js?2.9.6 to a secure url
https://d3js.org/d3.v2.min.js?2.9.6