Group Project Bioinformatics

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

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