BIO140/150: Zoomable Sunburst with Labels

Zoomable Sunburst with Labels

forked from metmajer's block: Zoomable Sunburst with Labels

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  stroke: #fff;
  fill-rule: evenodd;
}

text {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

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

var width = 1500,
    height = 1500,
    radius = Math.min(width, height) / 2;

var svgWidth = width + 200,
    svgHeight = height + 200;
    //radius = Math.min(width, height) / 2;
  
var x = d3.scale.linear()
    .range([0, 2 * Math.PI]);

var y = d3.scale.linear()
    .range([0, radius]);

var color = d3.scale.category20b();

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

var svg = d3.select("body").append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
  .append("g")
    .attr("transform", "translate(" + (svgWidth) / 2 + "," + (svgHeight / 2) + ")");

var partition = d3.layout.partition()
    .value(function(d) { return d.size; });

d3.json("data.json", function(error, root) {
      
      data=root
			var newData = { name :"Total", 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 g = svg.selectAll("g")
      .data(partition.nodes(newData))
    .enter().append("g");

var path = g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
    .on("click", click);

function click(d) {
    // fade out all text elements
    text.transition().attr("opacity", 0);

path.transition()
      .duration(750)
      .attrTween("d", arcTween(d))
      .each("end", function(e, i) {
          // check if the animated element's data e lies within the visible angle span given in d
          if (e.x >= d.x && e.x < (d.x + d.dx)) {
            // get a selection of the associated text element
            var arcText = d3.select(this.parentNode).select("text");
            // fade in the text element and recalculate positions
            arcText.transition().duration(750)
              .attr("opacity", 1)
              .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
              .attr("x", function(d) { return y(d.y); });
          }
      });
  }
});

d3.select(self.frameElement).style("height", height + "px");

// Interpolate the scales!
function arcTween(d) {
  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, 1]),
      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
  return function(d, i) {
    return i
        ? function(t) { return arc(d); }
        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
  };
}

function computeTextRotation(d) {
  return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
}

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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