block by syntagmatic 4a7b498e0f1e3522e60bf3bf740ebc90

Metagenomics Treemap

Full Screen

A prototype treemap visualization by Stamen Design in collaboration with Banfield Lab at UC Berkeley.

Contig Taxonomy table downloaded from the CN-SCN binning project. Visualization based on Nested Treemap by Mike Bostock.

Species and Classes with low contig counts have been hidden to improve text legibility.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font-family: Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #000;
  color: #eee;
  margin: 0;
  padding: 0;
}
h1 {
  color: #fff;
}
text {
  font-size: 12px;
  fill: #eee;
}
.node rect {
  shape-rendering: crispEdges;
  fill: none;
}
.node.depth-0 rect {
}
.depth-0 text {
  fill: #fff;
  font-size: 10px;
}
.depth-1 rect {
}
.depth-1 text {
  font-weight: bold;
  font-size: 16px;
}
.depth-2 rect {
  fill: rgba(255,255,255,0.15);
}
.depth-2 text {
  font-size: 10px;
}
.node--hover rect {
  stroke: #aaa;
}
</style>
<svg width="960" height="700"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var root;

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var format = d3.format(",d");

var color = d3.scaleQuantile()
  .range(["#c51b7d","#e9a3c9","#fde0ef","#f7f7f7","#e6f5d0","#a1d76a","#4d9221"])
  .domain([0,1]);

var nest = d3.nest()
  .key(function(d) { return ""; })   // root
  .key(function(d) { return d["Class winner"]; })
  .key(function(d) { return d["Species winner"]; })
  .sortValues(function(a,b) { return b["Species winner %"] - a["Species winner %"]; });

var treemap = d3.treemap()
    .tile(d3.treemapSquarify.ratio(1.6))
    .size([width, height])
    .paddingOuter(3)
    .paddingTop(15)
    .paddingInner(1)
    .round(true);

d3.tsv("CN-SCN.contig-taxonomy.tsv", function(error, data) {
  if (error) throw error;

  var lookup = d3.nest()
      .key(function(d) { return d["Species winner"] + "-" + d["Class winner"]; })
      .rollup(function(leaves) { return leaves.length; })
      .object(data)

  var subset = data.filter(function(d) {
    if (d["Class winner"] == "unknown") return false;
    return lookup[d["Species winner"] + "-" + d["Class winner"]] > 30;
  });

  root = d3.hierarchy(nest.entries(subset)[0], function(d, depth) { return d.values; })
    .sum(function(d) { return d["Size (bp)"]; })

  treemap(root);

  var cell = svg
    .selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
      .attr("class", function(d,i) { return "node depth-" + d.depth; })
      .each(function(d) { d.node = this; })
      .on("mouseover", hovered(true))
      .on("mouseout", hovered(false));

  cell.append("rect")
      .attr("id", function(d,i) { return "rect-" + i; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .style("fill", function(d) {
        return "children" in d ? null : color(d.data["Species winner %"]);
      });

  cell.append("clipPath")
      .attr("id", function(d,i) { return "clip-" + i; })
    .append("use")
      .attr("xlink:href", function(d,i) { return "#rect-" + i; });
  var label = cell.append("text")
      .attr("clip-path", function(d,i) { return "url(#clip-" + i + ")"; });

  label
    .selectAll("tspan")
      .data(function(d) { return [d.data]; })
    .enter().append("tspan")
      .attr("x", function(d, i) { return i ? null : 2; })
      .attr("y", 12)
      .text(function(d) {
        return d.key;
       });
});

function hovered(hover) {
  return function(d) {
    d3.selectAll(d.ancestors().map(function(d) { return d.node; }))
        .classed("node--hover", hover)
      .select("rect")
        .attr("width", function(d) { return d.x1 - d.x0 - hover; })
        .attr("height", function(d) { return d.y1 - d.y0 - hover; });
  };
}
</script>