D3 Examples - bio140/150 Icicle Charts

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    d3.json("bio140_data2.json", function(error, root) { 
        var data= root
     var newData = { name :"root", children : [] },
          levels = ["taxon_kingdom_name","taxon_phylum_name","taxon_class_name","taxon_order_name","taxon_family_name","taxon_genus_name","taxon_species_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.model, size : d.size });
          });
      });
    
    console.log(newData)
    });
  </script>
</body>
​
    