Zoomable Icicle with Labels and Breadcrumb (d3v4)

The code recreates a breadcrumb on top of a zoomable icicle in d3v4.

Code based off of tophtucker and breadcrumb code from kerryrodden.

forked from timelyportfolio's block: Zoomable Icicle with Labels and Breadcrumb (d3v4)

forked from Thanaporn-sk's block: Zoomable Icicle with Labels and Breadcrumb (d3v4)

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

rect {
  stroke: #fff;
}

</style>
<body>
<div id="breadcrumb"></div>
<div id="icicle"></div>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var width = 960,
    height = 500;

var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([0, height]);

var color = d3.scaleOrdinal(d3.schemeCategory20c);

var vis = d3.select('#icicle').append("svg")
    .attr("width", width)
    .attr("height", height)

var partition = d3.partition()
    .size([width, height])
    .padding(0)
    .round(true);
	
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
  w: 150, h: 30, s: 3, t: 10
};

var rect = vis.selectAll("rect");
var fo = vis.selectAll("foreignObject");
var totalSize=0;

d3.json("readme.json", function(error, root) {
  if (error) throw error;

root = d3.hierarchy(d3.entries(root)[0], function(d) {
      return d3.entries(d.value)
    })
    .sum(function(d) { return d.value })
    .sort(function(a, b) { return b.value - a.value; });

partition(root);
  
  //add breadcrumb
  initializeBreadcrumbTrail();
  var percentage = 100;
	  var percentageString = percentage + "%";

d3.select("#percentage")
		  .text(percentageString);

d3.select("#explanation")
		  .style("visibility", "");

function clicked(d) {
	
	x.domain([d.x0, d.x1]);
	y.domain([d.y0, height]).range([d.depth ? 20 : 0, height]);

rect.transition()
      .duration(750)
      .attr("x", function(d) { return x(d.x0); })
      .attr("y", function(d) { return y(d.y0); })
      .attr("width", function(d) { return x(d.x1) - x(d.x0); })
      .attr("height", function(d) { return y(d.y1) - y(d.y0); });
	  
	  fo.transition()
        .duration(750)
      .attr("x", function(d) { return x(d.x0); })
      .attr("y", function(d) { return y(d.y0); })
      .attr("width", function(d) { return x(d.x1-d.x0); })
      .attr("height", function(d) { return y(d.y1-d.y0); });
	  
	  // code to update the BreadcrumbTrail();
	var percentage = (100 * d.value / totalSize).toPrecision(3);
	  var percentageString = percentage + "%";
	  if (percentage < 0.1) {
		percentageString = "< 0.1%";
	  }

d3.select("#percentage")
		  .text(percentageString);

d3.select("#explanation")
		  .style("visibility", "");

var sequenceArray = d.ancestors().reverse();
	  //sequenceArray.shift(); // remove root node from the array
	  updateBreadcrumbs(sequenceArray, percentageString);
}

function initializeBreadcrumbTrail() {
  // Add the svg area.
  var trail = d3.select("#breadcrumb").append("svg")
      .attr("width", width)
      .attr("height", 50)
      .attr("id", "trail");
  // Add the label at the end, for the percentage.
  trail.append("text")
    .attr("id", "endlabel")
    .style("fill", "#000");
	
	  // Make the breadcrumb trail visible, if it's hidden.
  d3.select("#trail")
      .style("visibility", "");
}

// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) {
  var points = [];
  points.push("0,0");
  points.push(b.w + ",0");
  points.push(b.w + b.t + "," + (b.h / 2));
  points.push(b.w + "," + b.h);
  points.push("0," + b.h);
  if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
    points.push(b.t + "," + (b.h / 2));
  }
  return points.join(" ");
}

// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString) {

// Data join; key function combines name and depth (= position in sequence).
  var trail = d3.select("#trail")
      .selectAll("g")
      .data(nodeArray, function(d) { return d.data.key + d.depth; });

// Remove exiting nodes.
  trail.exit().remove();

// Add breadcrumb and label for entering nodes.
  var entering = trail.enter().append("g");

entering.append("polygon")
      .attr("points", breadcrumbPoints)
      .style("fill", function(d) { return color((d.children ? d : d.parent).data.key); });

entering.append("text")
      .attr("x", (b.w + b.t) / 2)
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.data.key; });
	 
  // Merge enter and update selections; set position for all nodes.
  entering.merge(trail).attr("transform", function(d, i) {
    return "translate(" + i * (b.w + b.s) + ", 0)";
  });

// Now move and update the percentage at the end.
  d3.select("#trail").select("#endlabel")
      .attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(percentageString);

}

</script>

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