D3 Examples - BIO 140/150: DNA Barcoding Icicle Chart

BIO 140/150: DNA 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

xxxxxxxxxx
 
<!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 = 2000,
        height = 1000;
​
    var color = d3.scale.category20b();
​
    var svg = d3.select("body").append("svg")
        .attr("width", width + 100)
        .attr("height", height + 100);
​
    var partition = d3.layout.partition()
        .size([width, height])
        .value(function(d) { return d.size; });
​
    var formatNumber = d3.format(",d");
​
    d3.json("data.json", function(error, root) {
      
      data=root
            var newData = { name :"Total Species", children : [] },
        levels = ["taxon_kingdom_name","taxon_phylum_name","taxon_class_name","taxon_order_name","taxon_family_name","taxon_genus_name"]; 
​
        // For each data row, loop through the expected levels traversing the output tree
            data.forEach(function(d){
    // Keep this as a reference to the current level
        var depthCursor = newData.children;
    // Go down one level at a time
        levels.forEach(function( property, depth ){
​
        // Look to see if a branch has already been created
        var index;
        depthCursor.forEach(function(child,i){
            if ( d[property] == child.name ) index = i;
        });
        // Add a branch if it isn't there
        if ( isNaN(index) ) {
            depthCursor.push({ name : d[property], children : []});
            index = depthCursor.length - 1;
        }
        // Now reference the new child array as we go deeper into the tree
        depthCursor = depthCursor[index].children;
        // This is a leaf, so add the last element to the specified branch
        if ( depth === levels.length - 1 ) depthCursor.push({ name : d.taxon_species_name, size : d.size });
    });
});
      
      console.log(newData);
      
      if (error) throw error;
​
      var nodes = partition.nodes(newData);
      
      //console.log(nodes)
​
      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>
​
    