BIO 481: Mosquito Barcoding Icicle Chart

"Icicle" diagram used to demonstrate the diversity of mosquito samples found in areas of the Shenandoah Valley. Mosquito and mosquito larva samples were collected in JMU's Fall 2017 BIO 481 class and sequenced the DNA Barcoding work flow.

This “icicle” diagram uses d3.layout.partition to divide space with area proportional to the value of nodes in a tree.

forked from mbostock's block: Icicle

<!DOCTYPE html>
<meta charset="utf-8">
<title>Partition - Icicle</title>
<style>

.node {
  fill: #ddd;
  stroke: #fff;
}

.label {
  font: 10px sans-serif;
  text-anchor: middle;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

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

var partition = d3.layout.partition()
    .size([width, height])
    .value(function(d) { return d.size; });

var formatNumber = d3.format(",d");
  
d3.json("flare.json", function(error, root) {
  if (error) throw error;

var nodes = partition.nodes(root);

svg.selectAll(".node")
      .data(nodes)
    .enter().append("rect")
      .attr("class", "node")
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .attr("width", function(d) { return d.dx; })
      .attr("height", function(d) { return d.dy; })
      .style("fill", function(d) { return color(d.name); });

svg.selectAll(".label")
      .data(nodes.filter(function(d) { return d.dx > 6; }))
    .enter().append("text")
      .attr("class", "label")
      .attr("dy", ".35em")
      .attr("transform", function(d) { return "translate(" + (d.x + d.dx / 2) + "," + (d.y + d.dy / 2) + ")rotate(90)"; })
  		.style("font-size", "9px")
      .text(function(d) {return d.name + "\n (" + formatNumber(d.value) +")";});
});

</script>

https://d3js.org/d3.v3.min.js