Built with blockbuilder.org
forked from as-eldlc's block: D3 aggregation tutorial
forked from as-eldlc's block: D3 treemap tutorial
xxxxxxxxxx
<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_10.csv", function(data){
data_sorted = data.sort(function(x,y){
return +x.time>+y.time;
})
console.log(data_sorted);
return;
// 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