silviaegt · September 8, 2017 20:44
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Metadata sunburst</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
    <link rel="stylesheet" type="text/css" href="sequences.css"/>
  </head>
  <body>
    <div id="main">
      <div id="sequence"></div>
      <div id="chart">
        <div id="explanation" style="visibility: hidden;">
          <span id="percentage"></span><br/>
          of Dewey classifications begin with this sequence of metadata
        </div>
      </div>
    </div>
    <div id="sidebar">
      <!--<input type="checkbox" id="togglelegend"> Legend<br/>-->
      <div id="legend" style="visibility: hidden;"></div>
    </div>
    <script type="text/javascript" src="sequences.js"></script>
 	<script type="text/javascript">
      // Hack to make this example display correctly in an iframe on bl.ocks.org <-- Esta part no entiendo a qué se refiere
      	d3.select(self.frameElement).style("height", "700px");
  	</script>   
  </body>
 </html>
diff --git a/metadata-sequence.csv b/metadata-sequence.csv
diff --git a/sequences.css b/sequences.css
 body {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  background-color: #fff;
  width: 960px;
  height: 700px;
  margin-top: 10px;
 }

 #main {
  float: left;
  width: 750px;
 }

 #sidebar {
  float: right;
  width: 100px;
 }

 #sequence {
  width: 600px;
  height: 70px;
 }

 #legend {
  padding: 10px 0 0 3px;
 }

 #sequence text, #legend text {
  font-weight: 600;
  fill: #fff;
 }

 #chart {
  position: relative;
 }

 #chart path {
  stroke: #fff;
 }

 #explanation {
  position: absolute;
  top: 260px;
  left: 305px;
  width: 140px;
  text-align: center;
  color: #666;
  z-index: -1;
 }

 #percentage {
  font-size: 2.5em;
 }
diff --git a/sequences.js b/sequences.js
 /*
 This code owes a lot to the lovely twitter community: @davekelly, @kerryrodden, @johnrladd, @Richard_Starrx -> Thank you :)
 */

 // Dimensions of sunburst.
 var width = 750;
 var height = 600;
 var radius = Math.min(width, height) / 2;

 // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
 var b = {
  w: 75, h: 30, s: 3, t: 10
 };

 // Mapping of step names to colors.


 /*
 SILVIA'S NOTE: In my data there are 825 variables & not 6 like in Rodden's 
 I'm guessing this is part of the problem?
 NOTA SILVIA: En mis datos hay 825 variables y no seis como en el ejemplo 
 ¿supongo que esto puede ser un problema?
 */

 /*
 I TRIED THESE:
 var color = d3.scaleOrdinal(d3.schemeCategory20); <-- d3 v4 
 var colors = d3.scale.category20(); <--d3 v3
 */
 var colors = d3.scale.category20();
 /*
 var colors = {
  "home": "#5687d1",
  "product": "#7b615c",
  "search": "#de783b",
  "account": "#6ab975",
  "other": "#a173d1",
  "end": "#bbbbbb"
 };
 */

 // Total size of all segments; we set this later, after loading the data.
 var totalSize = 0; 

 var vis = d3.select("#chart").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g")
    .attr("id", "container")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

 var partition = d3.layout.partition()
    .size([2 * Math.PI, radius * radius])
    .value(function(d) { return d.size; });

 var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

 // Use d3.text and d3.csv.parseRows so that we do not need to have a header
 // row, and can receive the csv as an array of arrays.


 d3.text("metadata-sequence.csv", function(text) {
  var csv = d3.csv.parseRows(text);
  var json = buildHierarchy(csv);
  createVisualization(json);
 });




 //NOTE TO SILVIA: Here, the 'zoom' function is added to give the effect you desired
 //in the beginning (https://twitter.com/espejolento/status/791312038010118144)
 function zoomBurst(root_data, boro) {
 var root = {"name": "Dewey's clasification",
 "children": root_data}

  var width = 960,
    height = 700,
    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.category20c();

  /*var svg = d3.select(boro).append("svg").attr("class", "col-md-offset-1")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + (height / 2 ) + ")");*/
  
  
  var svg = d3.select("#container");

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

  var arc = d3.svg.arc()
      .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
      .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
      .innerRadius(function(d) { return Math.max(0, y(d.y)); })
      .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
  
  var g = svg.selectAll("g")
      .data(partition.nodes(root))
    .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 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); };
    };
  }

  /*var text = g.append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) { return y(d.y); })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .text(function(d) { return d.name; });*/

  


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

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



 // Main function to draw and set up the visualization, once we have the data.
 function createVisualization(json) {
  
    // 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); };
    };
  }

  // Basic setup of page elements.
  initializeBreadcrumbTrail();
  drawLegend();
  d3.select("#togglelegend").on("click", toggleLegend);

  // Bounding circle underneath the sunburst, to make it easier to detect
  // when the mouse leaves the parent g.
  vis.append("svg:circle")
      .attr("r", radius)
      .style("opacity", 0);

  // For efficiency, filter nodes to keep only those large enough to see.
  var nodes = partition.nodes(json)
      .filter(function(d) {
      return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
      });

  //NOTE TO SILVIA: The 'fill' attribute of the style part of the sector here is where you need to change to color, based on the
  //name of each one.
  var path = vis.data([json]).selectAll("path")
      .data(nodes)
      .enter().append("svg:path")
      .attr("display", function(d) { return d.depth ? null : "none"; })
      .attr("d", arc)
      .attr("fill-rule", "evenodd")
      .style("fill", function(d) { return d.name == 'end' ? '#eeeeee' : colors(d.name); }) // need to call this as a function, not as an object key in the original example
      .style("opacity", 1)
      .on("mouseover", mouseover)
      .on("click",click);

  // Add the mouseleave handler to the bounding circle.
  d3.select("#container").on("mouseleave", mouseleave);

  // Get total size of the tree = value of root node from partition.
  totalSize = path.node().__data__.value;
 };



  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); });
          }
      });
  }



  // Fade all but the current sequence, and show it in the breadcrumb trail.
  function mouseover(d) {

    var percentage = (100 * d.value / totalSize).toPrecision(3);
    var percentageString = percentage + "%";
    if (percentage < 0.1) {
      percentageString = "< 0.1%";
    }

  d3.select("#percentage")
      .text(percentageString);
  
  //NOTE TO SILVIA: Here,  total amount of books is printed in the explanation.
  d3.select("#total")
      .text(d.value);

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

  var sequenceArray = getAncestors(d);
  updateBreadcrumbs(sequenceArray, percentageString);

  // Fade all the segments.
  d3.selectAll("path")
      .style("opacity", 0.3);

  // Then highlight only those that are an ancestor of the current segment.
  vis.selectAll("path")
      .filter(function(node) {
                return (sequenceArray.indexOf(node) >= 0);
              })
      .style("opacity", 1);
 
  }

  // Restore everything to full opacity when moving off the visualization.
  function mouseleave(d) {

  // Hide the breadcrumb trail
  d3.select("#trail")
      .style("visibility", "hidden");

  // Deactivate all segments during transition.
  d3.selectAll("path").on("mouseover", null);

  // Transition each segment to full opacity and then reactivate it.
  d3.selectAll("path")
      .transition()
      .duration(1000)
      .style("opacity", 1)
      .each("end", function() {
              d3.select(this).on("mouseover", mouseover);
            });

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

 // Given a node in a partition layout, return an array of all of its ancestor
 // nodes, highest first, but excluding the root.
 function getAncestors(node) {
  var path = [];
  var current = node;
  while (current.parent) {
    path.unshift(current);
    current = current.parent;
  }
  return path;
 }

 function initializeBreadcrumbTrail() {
  // Add the svg area.
  var trail = d3.select("#sequence").append("svg:svg")
      .attr("width", width)
      .attr("height", 50)
      .attr("id", "trail");
  // Add the label at the end, for the percentage.
  trail.append("svg:text")
    .attr("id", "endlabel")
    .style("fill", "#000");
 }

 // Generate a string that describes the points of a breadcrumb polygon.
 //NOTE TO SILVIA: Here, I changed the polygon's points to dinamically adjust to the text's width, avoiding overlapping
 //from labels in the breadcrumbs.
 function breadcrumbPoints(d, i) {
  var points = [];
  points.push("0,0");
  points.push((10 + b.t + document.getElementById("label-"+d.name).getComputedTextLength()) + ",0");
  points.push((10 + b.t + document.getElementById("label-"+d.name).getComputedTextLength()) + b.t + "," + (b.h / 2));
  points.push((10 + b.t + document.getElementById("label-"+d.name).getComputedTextLength()) + "," + 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 g = d3.select("#trail")
      .selectAll("g")
      .data(nodeArray, function(d) { return d.name + d.depth; });

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

  //NOTE TO SILVIA: Here, labels are written and hidden just to keep track on the text's length to dinamically adjust breadcrumbs.
  entering.append("svg:text")
      .attr("x", (b.w + b.t) / 2)
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("visibility","hidden")
      .attr("text-anchor", "middle")
      .attr("id", function(d,i){return "label-"+d.name;})
      .text(function(d) { return d.name; });
  
   entering.append("svg:polygon")
     .attr("points", breadcrumbPoints)
     .style("fill", function(d) { return d.name == 'end' ? '#eeeeee' : colors(d.name); });
  
  //NOTE TO SILVIA: These labels are the visible ones, adjusted to fit inside the breadcrumbs' width.
  entering.append("svg:text")
      .attr("x", function(d,i){ return b.s + b.t + ((document.getElementById("label-"+d.name).getComputedTextLength()   + 10) / 2)})
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .attr("id", function(d,i){return "texto-"+d.name;})
      .text(function(d) { return d.name; });

  // Set position for entering and updating nodes
  //NOTE TO SILVIA: Changed the translation to dinamically place one breadcrumb after another, considering their varying width.
  suma = 0;
  g.attr("transform", function(d, i) {
    cx = suma + b.s;
    suma = suma + document.getElementById("label-"+d.name).getComputedTextLength() + b.t + 10;
    return "translate(" + (cx) + ", 0)";
  });

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

  // Now move and update the percentage at the end.
  d3.select("#trail").select("#endlabel")
      .attr("x", function(d,i){ return (suma + ((b.s + b.t) * 3))})
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(percentageString);

  // Make the breadcrumb trail visible, if it's hidden.
  d3.select("#trail")
      .style("visibility", "");

 }

 function drawLegend() {

  // Dimensions of legend item: width, height, spacing, radius of rounded rect.
  var li = {
    w: 75, h: 30, s: 3, r: 3
  };

  var legend = d3.select("#legend").append("svg:svg")
      .attr("width", li.w)
      .attr("height", d3.keys(colors).length * (li.h + li.s));

  var g = legend.selectAll("g")
      .data(d3.entries(colors))
      .enter().append("svg:g")
      .attr("transform", function(d, i) {
              return "translate(0," + i * (li.h + li.s) + ")";
           });

  g.append("svg:rect")
      .attr("rx", li.r)
      .attr("ry", li.r)
      .attr("width", li.w)
      .attr("height", li.h)
      .style("fill", function(d) { return d.value; });

  g.append("svg:text")
      .attr("x", li.w / 2)
      .attr("y", li.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.key; });
 }

 function toggleLegend() {
  var legend = d3.select("#legend");
  if (legend.style("visibility") == "hidden") {
    legend.style("visibility", "");
  } else {
    legend.style("visibility", "hidden");
  }
 }

 // Take a 2-column CSV and transform it into a hierarchical structure suitable
 // for a partition layout. The first column is a sequence of step names, from
 // root to leaf, separated by hyphens. The second column is a count of how 
 // often that sequence occurred.
 function buildHierarchy(csv) {
  var root = {"name": "root", "children": []};
  for (var i = 0; i < csv.length; i++) {
    var sequence = csv[i][0];
    var size = +csv[i][1];
    if (isNaN(size)) { // e.g. if this is a header row
      continue;
    }
    var parts = sequence.split("-");
    var currentNode = root;
    for (var j = 0; j < parts.length; j++) {
      var children = currentNode["children"];
      var nodeName = parts[j];
      var childNode;
      if (j + 1 < parts.length) {
   // Not yet at the end of the sequence; move down the tree.
 	var foundChild = false;
 	for (var k = 0; k < children.length; k++) {
 	  if (children[k]["name"] == nodeName) {
 	    childNode = children[k];
 	    foundChild = true;
 	    break;
 	  }
 	}
  // If we don't already have a child node for this branch, create it.
 	if (!foundChild) {
 	  childNode = {"name": nodeName, "children": []};
 	  children.push(childNode);
 	}
 	currentNode = childNode;
      } else {
 	// Reached the end of the sequence; create a leaf node.
 	childNode = {"name": nodeName, "size": size};
 	children.push(childNode);
      }
    }
  }
  return root;
 };
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Metadata sunburst</title>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<link rel="stylesheet" type="text/css"
	href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
	<link rel="stylesheet" type="text/css" href="sequences.css"/>
	</head>
	<body>
	<div id="main">
	<div id="sequence"></div>
	<div id="chart">
	<div id="explanation" style="visibility: hidden;">
	<span id="percentage"></span><br/>
	of Dewey classifications begin with this sequence of metadata
	</div>
	</div>
	</div>
	<div id="sidebar">
	<!--<input type="checkbox" id="togglelegend"> Legend<br/>-->
	<div id="legend" style="visibility: hidden;"></div>
	</div>
	<script type="text/javascript" src="sequences.js"></script>
	<script type="text/javascript">
	// Hack to make this example display correctly in an iframe on bl.ocks.org <-- Esta part no entiendo a qué se refiere
	d3.select(self.frameElement).style("height", "700px");
	</script>
	</body>
	</html>
	body {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 400;
	background-color: #fff;
	width: 960px;
	height: 700px;
	margin-top: 10px;
	}

	#main {
	float: left;
	width: 750px;
	}

	#sidebar {
	float: right;
	width: 100px;
	}

	#sequence {
	width: 600px;
	height: 70px;
	}

	#legend {
	padding: 10px 0 0 3px;
	}

	#sequence text, #legend text {
	font-weight: 600;
	fill: #fff;
	}

	#chart {
	position: relative;
	}

	#chart path {
	stroke: #fff;
	}

	#explanation {
	position: absolute;
	top: 260px;
	left: 305px;
	width: 140px;
	text-align: center;
	color: #666;
	z-index: -1;
	}

	#percentage {
	font-size: 2.5em;
	}
	/*
	This code owes a lot to the lovely twitter community: @davekelly, @kerryrodden, @johnrladd, @Richard_Starrx -> Thank you :)
	*/

	// Dimensions of sunburst.
	var width = 750;
	var height = 600;
	var radius = Math.min(width, height) / 2;

	// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
	var b = {
	w: 75, h: 30, s: 3, t: 10
	};

	// Mapping of step names to colors.


	/*
	SILVIA'S NOTE: In my data there are 825 variables & not 6 like in Rodden's
	I'm guessing this is part of the problem?
	NOTA SILVIA: En mis datos hay 825 variables y no seis como en el ejemplo
	¿supongo que esto puede ser un problema?
	*/

	/*
	I TRIED THESE:
	var color = d3.scaleOrdinal(d3.schemeCategory20); <-- d3 v4
	var colors = d3.scale.category20(); <--d3 v3
	*/
	var colors = d3.scale.category20();
	/*
	var colors = {
	"home": "#5687d1",
	"product": "#7b615c",
	"search": "#de783b",
	"account": "#6ab975",
	"other": "#a173d1",
	"end": "#bbbbbb"
	};
	*/

	// Total size of all segments; we set this later, after loading the data.
	var totalSize = 0;

	var vis = d3.select("#chart").append("svg:svg")
	.attr("width", width)
	.attr("height", height)
	.append("svg:g")
	.attr("id", "container")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var partition = d3.layout.partition()
	.size([2 * Math.PI, radius * radius])
	.value(function(d) { return d.size; });

	var arc = d3.svg.arc()
	.startAngle(function(d) { return d.x; })
	.endAngle(function(d) { return d.x + d.dx; })
	.innerRadius(function(d) { return Math.sqrt(d.y); })
	.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

	// Use d3.text and d3.csv.parseRows so that we do not need to have a header
	// row, and can receive the csv as an array of arrays.


	d3.text("metadata-sequence.csv", function(text) {
	var csv = d3.csv.parseRows(text);
	var json = buildHierarchy(csv);
	createVisualization(json);
	});




	//NOTE TO SILVIA: Here, the 'zoom' function is added to give the effect you desired
	//in the beginning (https://twitter.com/espejolento/status/791312038010118144)
	function zoomBurst(root_data, boro) {
	var root = {"name": "Dewey's clasification",
	"children": root_data}

	var width = 960,
	height = 700,
	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.category20c();

	/*var svg = d3.select(boro).append("svg").attr("class", "col-md-offset-1")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + (height / 2 ) + ")");*/


	var svg = d3.select("#container");

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

	var arc = d3.svg.arc()
	.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
	.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
	.innerRadius(function(d) { return Math.max(0, y(d.y)); })
	.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

	var g = svg.selectAll("g")
	.data(partition.nodes(root))
	.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 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); };
	};
	}

	/*var text = g.append("text")
	.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
	.attr("x", function(d) { return y(d.y); })
	.attr("dx", "6") // margin
	.attr("dy", ".35em") // vertical-align
	.text(function(d) { return d.name; });*/




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

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



	// Main function to draw and set up the visualization, once we have the data.
	function createVisualization(json) {

	// 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); };
	};
	}

	// Basic setup of page elements.
	initializeBreadcrumbTrail();
	drawLegend();
	d3.select("#togglelegend").on("click", toggleLegend);

	// Bounding circle underneath the sunburst, to make it easier to detect
	// when the mouse leaves the parent g.
	vis.append("svg:circle")
	.attr("r", radius)
	.style("opacity", 0);

	// For efficiency, filter nodes to keep only those large enough to see.
	var nodes = partition.nodes(json)
	.filter(function(d) {
	return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
	});

	//NOTE TO SILVIA: The 'fill' attribute of the style part of the sector here is where you need to change to color, based on the
	//name of each one.
	var path = vis.data([json]).selectAll("path")
	.data(nodes)
	.enter().append("svg:path")
	.attr("display", function(d) { return d.depth ? null : "none"; })
	.attr("d", arc)
	.attr("fill-rule", "evenodd")
	.style("fill", function(d) { return d.name == 'end' ? '#eeeeee' : colors(d.name); }) // need to call this as a function, not as an object key in the original example
	.style("opacity", 1)
	.on("mouseover", mouseover)
	.on("click",click);

	// Add the mouseleave handler to the bounding circle.
	d3.select("#container").on("mouseleave", mouseleave);

	// Get total size of the tree = value of root node from partition.
	totalSize = path.node().__data__.value;
	};



	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); });
	}
	});
	}



	// Fade all but the current sequence, and show it in the breadcrumb trail.
	function mouseover(d) {

	var percentage = (100 * d.value / totalSize).toPrecision(3);
	var percentageString = percentage + "%";
	if (percentage < 0.1) {
	percentageString = "< 0.1%";
	}

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

	//NOTE TO SILVIA: Here, total amount of books is printed in the explanation.
	d3.select("#total")
	.text(d.value);

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

	var sequenceArray = getAncestors(d);
	updateBreadcrumbs(sequenceArray, percentageString);

	// Fade all the segments.
	d3.selectAll("path")
	.style("opacity", 0.3);

	// Then highlight only those that are an ancestor of the current segment.
	vis.selectAll("path")
	.filter(function(node) {
	return (sequenceArray.indexOf(node) >= 0);
	})
	.style("opacity", 1);

	}

	// Restore everything to full opacity when moving off the visualization.
	function mouseleave(d) {

	// Hide the breadcrumb trail
	d3.select("#trail")
	.style("visibility", "hidden");

	// Deactivate all segments during transition.
	d3.selectAll("path").on("mouseover", null);

	// Transition each segment to full opacity and then reactivate it.
	d3.selectAll("path")
	.transition()
	.duration(1000)
	.style("opacity", 1)
	.each("end", function() {
	d3.select(this).on("mouseover", mouseover);
	});

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

	// Given a node in a partition layout, return an array of all of its ancestor
	// nodes, highest first, but excluding the root.
	function getAncestors(node) {
	var path = [];
	var current = node;
	while (current.parent) {
	path.unshift(current);
	current = current.parent;
	}
	return path;
	}

	function initializeBreadcrumbTrail() {
	// Add the svg area.
	var trail = d3.select("#sequence").append("svg:svg")
	.attr("width", width)
	.attr("height", 50)
	.attr("id", "trail");
	// Add the label at the end, for the percentage.
	trail.append("svg:text")
	.attr("id", "endlabel")
	.style("fill", "#000");
	}

	// Generate a string that describes the points of a breadcrumb polygon.
	//NOTE TO SILVIA: Here, I changed the polygon's points to dinamically adjust to the text's width, avoiding overlapping
	//from labels in the breadcrumbs.
	function breadcrumbPoints(d, i) {
	var points = [];
	points.push("0,0");
	points.push((10 + b.t + document.getElementById("label-"+d.name).getComputedTextLength()) + ",0");
	points.push((10 + b.t + document.getElementById("label-"+d.name).getComputedTextLength()) + b.t + "," + (b.h / 2));
	points.push((10 + b.t + document.getElementById("label-"+d.name).getComputedTextLength()) + "," + 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 g = d3.select("#trail")
	.selectAll("g")
	.data(nodeArray, function(d) { return d.name + d.depth; });

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

	//NOTE TO SILVIA: Here, labels are written and hidden just to keep track on the text's length to dinamically adjust breadcrumbs.
	entering.append("svg:text")
	.attr("x", (b.w + b.t) / 2)
	.attr("y", b.h / 2)
	.attr("dy", "0.35em")
	.attr("visibility","hidden")
	.attr("text-anchor", "middle")
	.attr("id", function(d,i){return "label-"+d.name;})
	.text(function(d) { return d.name; });

	entering.append("svg:polygon")
	.attr("points", breadcrumbPoints)
	.style("fill", function(d) { return d.name == 'end' ? '#eeeeee' : colors(d.name); });

	//NOTE TO SILVIA: These labels are the visible ones, adjusted to fit inside the breadcrumbs' width.
	entering.append("svg:text")
	.attr("x", function(d,i){ return b.s + b.t + ((document.getElementById("label-"+d.name).getComputedTextLength() + 10) / 2)})
	.attr("y", b.h / 2)
	.attr("dy", "0.35em")
	.attr("text-anchor", "middle")
	.attr("id", function(d,i){return "texto-"+d.name;})
	.text(function(d) { return d.name; });

	// Set position for entering and updating nodes
	//NOTE TO SILVIA: Changed the translation to dinamically place one breadcrumb after another, considering their varying width.
	suma = 0;
	g.attr("transform", function(d, i) {
	cx = suma + b.s;
	suma = suma + document.getElementById("label-"+d.name).getComputedTextLength() + b.t + 10;
	return "translate(" + (cx) + ", 0)";
	});

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

	// Now move and update the percentage at the end.
	d3.select("#trail").select("#endlabel")
	.attr("x", function(d,i){ return (suma + ((b.s + b.t) * 3))})
	.attr("y", b.h / 2)
	.attr("dy", "0.35em")
	.attr("text-anchor", "middle")
	.text(percentageString);

	// Make the breadcrumb trail visible, if it's hidden.
	d3.select("#trail")
	.style("visibility", "");

	}

	function drawLegend() {

	// Dimensions of legend item: width, height, spacing, radius of rounded rect.
	var li = {
	w: 75, h: 30, s: 3, r: 3
	};

	var legend = d3.select("#legend").append("svg:svg")
	.attr("width", li.w)
	.attr("height", d3.keys(colors).length * (li.h + li.s));

	var g = legend.selectAll("g")
	.data(d3.entries(colors))
	.enter().append("svg:g")
	.attr("transform", function(d, i) {
	return "translate(0," + i * (li.h + li.s) + ")";
	});

	g.append("svg:rect")
	.attr("rx", li.r)
	.attr("ry", li.r)
	.attr("width", li.w)
	.attr("height", li.h)
	.style("fill", function(d) { return d.value; });

	g.append("svg:text")
	.attr("x", li.w / 2)
	.attr("y", li.h / 2)
	.attr("dy", "0.35em")
	.attr("text-anchor", "middle")
	.text(function(d) { return d.key; });
	}

	function toggleLegend() {
	var legend = d3.select("#legend");
	if (legend.style("visibility") == "hidden") {
	legend.style("visibility", "");
	} else {
	legend.style("visibility", "hidden");
	}
	}

	// Take a 2-column CSV and transform it into a hierarchical structure suitable
	// for a partition layout. The first column is a sequence of step names, from
	// root to leaf, separated by hyphens. The second column is a count of how
	// often that sequence occurred.
	function buildHierarchy(csv) {
	var root = {"name": "root", "children": []};
	for (var i = 0; i < csv.length; i++) {
	var sequence = csv[i][0];
	var size = +csv[i][1];
	if (isNaN(size)) { // e.g. if this is a header row
	continue;
	}
	var parts = sequence.split("-");
	var currentNode = root;
	for (var j = 0; j < parts.length; j++) {
	var children = currentNode["children"];
	var nodeName = parts[j];
	var childNode;
	if (j + 1 < parts.length) {
	// Not yet at the end of the sequence; move down the tree.
	var foundChild = false;
	for (var k = 0; k < children.length; k++) {
	if (children[k]["name"] == nodeName) {
	childNode = children[k];
	foundChild = true;
	break;
	}
	}
	// If we don't already have a child node for this branch, create it.
	if (!foundChild) {
	childNode = {"name": nodeName, "children": []};
	children.push(childNode);
	}
	currentNode = childNode;
	} else {
	// Reached the end of the sequence; create a leaf node.
	childNode = {"name": nodeName, "size": size};
	children.push(childNode);
	}
	}
	}
	return root;
	};