D3 treemap tutorial

Built with blockbuilder.org

forked from as-eldlc's block: D3 aggregation tutorial

<!DOCTYPE html>
<head>
  <style>

.axis .domain {
  display: none;
}

form {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

svg {
  font: 10px sans-serif;
}
.legend {
    font-size: 12px;
  }
  rect {
    stroke-width: 2;
  }
</style>
</head>
<body>
<svg width="960" height="400"></svg>
  <div id="legend"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    // Initialize SVG
    var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + 	margin.top + ")");
	
  	// Color scale for categories
  	var color = d3.scaleOrdinal(d3.schemeCategory10);
  	
  	// Prepare aggregation
		var nest = d3.nest()
    	.key(function(d) { return d.priority; }) // First we aggregate by prority
    	.key(function(d) { return d.status; }) // Then by status
	  	.rollup(function(leaves) { return {
        "total_cpt": leaves.length, // Compute the number of tasks in each groupe
        // Compute the total time associated with the tasks in this group
        "total_time": d3.sum(leaves, function(d) {return parseFloat(d.time);})} 
      })

// Prepare treemap
		var treemap = d3.treemap()
    	.size([width, height])
    	.padding(1)
    	.round(true);
  	
  	// Load data
    d3.csv("data_task_10000.csv", function(data){
 			// Convert our data structure into a tree structure 
      var root = d3.hierarchy({
        values: nest.entries(data)
      }, function(d) { return d.values; })
      // This create a unique identifier of each leaf
      .eachBefore(function(d) { 
        d.data.id = (d.parent ? d.parent.data.id + "." : "") + (d.data.key ? d.data.key : ""); })
      // This is the value that will be used to draw the rectangles
      .sum(function(d) { if (d.value) {return d.value.total_time;} })
      // This is to display first the bigger rectangles
      .sort(function(a, b) { return b.value.total_time - a.value.total_time; });
      //console.log(root)
      
      // Do generate the treemap 
      treemap(root); 
      
      // Prepare each rectangle
      var cell = g.selectAll("g")
    		// We do not draw the priority rectangles, only the leaves of the tree
        .data(root.leaves())
    		.enter().append("g")
      	// Use x0 and y0 generated by the treemap function
      	.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
      
      // Draw the rectangle
  	cell.append("rect")
      .attr("id", function(d) { return d.data.id; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      // Use the parent attribute to set the color 
      .attr("fill", function(d) { return color(d.parent.data.key); });
      
      // Draw the text (use a clipping path to deal with long strings)
		  cell.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.data.id; })
    	.append("use")
      .attr("xlink:href", function(d) { return "#" + d.data.id; });
  		cell.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
        .text(function(d) { return d.data.key ; })
      .attr("x", 4)
      .attr("y", 10);
 
      // Append a title (shown on mouse hover)
  		cell.append("title")
      	.text(function(d) { return "Total time : " + d.data.value.total_time; });
  		var heightL = 100;
      var svgLeg = d3.select("#legend").append("svg")
            .attr("width", width)
            .attr("height", heightL)
      
      // Draw the legend
      var legendRectSize = 18;
			var legendSpacing = 4;
      var legend = svg.selectAll('.legend')
  		.data(color.domain())
  		.enter()
  		.append('g')
  		.attr('class', 'legend')
  		.attr('transform', function(d, i) {
    		var offset =  20 * color.domain().length / 2;
    		var horz = 30+i*100+10;
    		var vert = height+legendRectSize+10;
        //vert = 0;
        //horz = 0;
    		return 'translate(' + horz + ',' + vert + ')';
  			});
       
      // These are the rectangles
      legend.append('rect')
  			.attr('width', legendRectSize)
  			.attr('height', legendRectSize)
  			.style('fill', color)
  			.style('stroke', color);
      
      // These are the texts
      legend.append('text')
  			.attr('x', legendRectSize + 5)
  			.attr('y', 10)
  			.text(function(d){return d})
  			
    });
		 
  </script>
</body>

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