mizhka/zfs.html

## zfs.html
<html>
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>

function humanFileSize(bytes, si) {
    var thresh = si ? 1000 : 1024;
    if(Math.abs(bytes) < thresh) {
        return bytes + ' B';
    }
    var units = si
        ? ['kB','MB','GB','TB','PB','EB','ZB','YB']
        : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
    var u = -1;
    do {
        bytes /= thresh;
        ++u;
    } while(Math.abs(bytes) >= thresh && u < units.length - 1);
    return bytes.toFixed(1)+' '+units[u];
}

// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
  width = 1200 - margin.left - margin.right,
  height = 680 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

    // Read data
    d3.tsv('file:///usr/home/mizhka/temp/20190813/data.tsv', function(data) {
        // stratify the data: reformatting for d3.js
        var root = d3.stratify()
            .id(function(d) { return d.name; })   // Name of the entity (column name is name in csv)
            .parentId(function(d) { return d.name.substr(0,d.name.lastIndexOf("/")); })   // Name of the parent (column name is parent in csv)
        (data);
        root.sum(function(d) { return +d.value })   // Compute the numeric value for each entity

        // Then d3.treemap computes the position of each element of the hierarchy
        // The coordinates are added to the root object above
        d3.treemap()
            .size([width, height])
            .padding(3)
        (root)

        // prepare a color scale
        var color = d3.scaleOrdinal()
            .domain(["bootenv", "data", "guests","build","ccache","poudriere"])
            .range([ "#266EF6", "#E429F2", "#FF8B00", "#FF0130", "#FFD300", "#12E772"])

        // And a opacity scale
        var opacity = d3.scaleLinear()
            .domain([10, 30])
            .range([.5,1])

        console.log(root.links().map(function c(currentValue,index, array) { return currentValue.target; }))

        // use this information to add rectangles:
        svg
            .selectAll("rect")
            .data(root.links().map(function c(currentValue,index, array) { return currentValue.target; }))
            .enter()
            .append("rect")
            .attr('x', function (d) { return d.x0; })
            .attr('y', function (d) { return d.y0; })
            .attr('width', function (d) { return d.x1 - d.x0; })
            .attr('height', function (d) { return d.y1 - d.y0; })
            .style("stroke", "black")
            .style("fill", function(d){ console.log(d.data.name.split("/")[1]); return color(d.data.name.split("/")[1])} )
            .style("opacity", function(d){ return d.data.depth * d.data.value / 100 * d.parent.data.value; });

        // and to add the text labels
        svg
            .selectAll("text")
            .data(root.leaves().filter(d => (d.x1 > d.x0 + 30) && (d.y1 > d.y0 + 10) ))
            .enter()
            .append('text')
            .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
            .attr("y", function(d){ return d.y0+10})    // +20 to adjust position (lower)
            .attr('class', 'id')
            .append('svg:tspan')
            .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
            .attr("dy", function(d){ return 0; })    // +20 to adjust position (lower)
            .text(function(d) { return d.data.name.substr(d.data.name.lastIndexOf("/")+1,d.data.name.length); })
            .attr("font-size", "10px")
            .attr("font-weight", "bold")
            .attr("fill", "white")
            .append('svg:tspan')
            .attr("x", function(d){ return d.x0+5})
            .attr('dy', 10)
            .text(function(d) { return humanFileSize(d.data.value,true); })
            .attr("font-size", "10px")
            .attr("font-weight", "bold")
            .attr("fill", "white")
})
</script>

</html>
	<html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<!-- Load d3.js -->
	<script src="https://d3js.org/d3.v4.js"></script>
	<!-- Create a div where the graph will take place -->
	<div id="my_dataviz"></div>
	<script>

	function humanFileSize(bytes, si) {
	var thresh = si ? 1000 : 1024;
	if(Math.abs(bytes) < thresh) {
	return bytes + ' B';
	}
	var units = si
	? ['kB','MB','GB','TB','PB','EB','ZB','YB']
	: ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
	var u = -1;
	do {
	bytes /= thresh;
	++u;
	} while(Math.abs(bytes) >= thresh && u < units.length - 1);
	return bytes.toFixed(1)+' '+units[u];
	}

	// set the dimensions and margins of the graph
	var margin = {top: 10, right: 10, bottom: 10, left: 10},
	width = 1200 - margin.left - margin.right,
	height = 680 - margin.top - margin.bottom;

	// append the svg object to the body of the page
	var svg = d3.select("#my_dataviz")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	// Read data
	d3.tsv('file:///usr/home/mizhka/temp/20190813/data.tsv', function(data) {
	// stratify the data: reformatting for d3.js
	var root = d3.stratify()
	.id(function(d) { return d.name; }) // Name of the entity (column name is name in csv)
	.parentId(function(d) { return d.name.substr(0,d.name.lastIndexOf("/")); }) // Name of the parent (column name is parent in csv)
	(data);
	root.sum(function(d) { return +d.value }) // Compute the numeric value for each entity

	// Then d3.treemap computes the position of each element of the hierarchy
	// The coordinates are added to the root object above
	d3.treemap()
	.size([width, height])
	.padding(3)
	(root)

	// prepare a color scale
	var color = d3.scaleOrdinal()
	.domain(["bootenv", "data", "guests","build","ccache","poudriere"])
	.range([ "#266EF6", "#E429F2", "#FF8B00", "#FF0130", "#FFD300", "#12E772"])

	// And a opacity scale
	var opacity = d3.scaleLinear()
	.domain([10, 30])
	.range([.5,1])

	console.log(root.links().map(function c(currentValue,index, array) { return currentValue.target; }))

	// use this information to add rectangles:
	svg
	.selectAll("rect")
	.data(root.links().map(function c(currentValue,index, array) { return currentValue.target; }))
	.enter()
	.append("rect")
	.attr('x', function (d) { return d.x0; })
	.attr('y', function (d) { return d.y0; })
	.attr('width', function (d) { return d.x1 - d.x0; })
	.attr('height', function (d) { return d.y1 - d.y0; })
	.style("stroke", "black")
	.style("fill", function(d){ console.log(d.data.name.split("/")[1]); return color(d.data.name.split("/")[1])} )
	.style("opacity", function(d){ return d.data.depth * d.data.value / 100 * d.parent.data.value; });

	// and to add the text labels
	svg
	.selectAll("text")
	.data(root.leaves().filter(d => (d.x1 > d.x0 + 30) && (d.y1 > d.y0 + 10) ))
	.enter()
	.append('text')
	.attr("x", function(d){ return d.x0+5}) // +10 to adjust position (more right)
	.attr("y", function(d){ return d.y0+10}) // +20 to adjust position (lower)
	.attr('class', 'id')
	.append('svg:tspan')
	.attr("x", function(d){ return d.x0+5}) // +10 to adjust position (more right)
	.attr("dy", function(d){ return 0; }) // +20 to adjust position (lower)
	.text(function(d) { return d.data.name.substr(d.data.name.lastIndexOf("/")+1,d.data.name.length); })
	.attr("font-size", "10px")
	.attr("font-weight", "bold")
	.attr("fill", "white")
	.append('svg:tspan')
	.attr("x", function(d){ return d.x0+5})
	.attr('dy', 10)
	.text(function(d) { return humanFileSize(d.data.value,true); })
	.attr("font-size", "10px")
	.attr("font-weight", "bold")
	.attr("fill", "white")
	})
	</script>

	</html>