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

forked from wenzelmk's block: BIO 481: Mosquito Barcoding Icicle Chart

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

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