agustincl/index.html

## index.html
<!DOCTYPE html>
<style>
#chart {
  width: 960px;
  height: 500px;
}

#chart rect.bar {
    stroke: black;
    fill: #777;
}

#yaxis .domain {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

#yaxis text {
    font-family: sans-serif;
    font-size: 11px;
}

svg g.tooltip {
  pointer-events: none;
}

svg g.tooltip rect {
  fill: #bbf;
  stroke: #88f;
  stroke-width: 5;
  opacity: 0.75;
}

</style>
<body>

<div id="chart">
    <svg width="960" height="500">
    <g id="data"></g>
    <g id="yaxis"></g>
    <g class="tooltip" transform="translate(-300,-300)">
      <rect rx="20" ry="20" width="240" height="75">
      </rect>
    </g>
    </svg>
</div>

<script src="http://d3js.org/d3.v2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>

var width = 960,
    height = 500;

function prettySize(s) {
    if (s < 10) {
        return s + "B";
    }
    var e = parseInt(Math.floor(Math.log(s) / Math.log(1024)));
    var sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
    var suffix = sizes[parseInt(e)];
    var val = s / Math.pow(1024, Math.floor(e));
    return val.toFixed(0) + suffix;
}

function draw(d) {
    var vals = [],
        names = [],
        cumulative = [];

    var clustersTotal = 0, ramTotal = 0;
    for (var i = 0; i < d.rows.length; i++) {
        var size = Math.pow(2, d.rows[i].key[1]);
        names.push(size);
        vals.push(d.rows[i].value.count);
        ramTotal += d.rows[i].value.sum;
        var count = parseInt(d.rows[i].value.count);
        clustersTotal += d.rows[i].value.count;
        cumulative.push(prettySize(size) + "-" + prettySize(size*2) +
                        " - " + count + " clusters" +
                        "<br/>Cumulative:<br/>" +
                        prettySize(ramTotal) +
                        " in " + clustersTotal + " clusters");
    }

    var bw = 40, lblh = 30, lblw = 100;

    var y = d3.scale.linear()
        .domain([0, d3.max(vals)])
        .range([height - 5, 0]);

    var textify = function(d, i) {
        return i % 3 == 0 ? prettySize(names[i]) : null;
    };

    var repChart = d3.select("#chart svg #data");

    var tooltip = d3.select("#chart g.tooltip");
    tooltip.attr("visibility", "hidden");

    repChart.selectAll("rect")
        .data(vals)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", lblw)
        .attr("height", y)
        .attr("width", bw)
        .attr("y", function(d, i) { return y(d, i) - lblh; })
        .attr("height", function(d,i) { return height - y(d,i); })
        .on('mouseover', function(d, i) {
            tooltip.selectAll("text").remove();
            tooltip.selectAll("text")
                .data(cumulative[i].split("<br/>"))
              .enter().append("text")
                .attr('x', 10)
                .attr('y', function(dd, ii) { return (ii + 2) * 15; })
                .text(function(dd) { return dd; });
            tooltip.attr("visibility", "visible");
        })
        .on('mousemove', function(d, i) {
            var evt = d3.mouse(this);
            function within(a, b, r, d) { return a > r ? a-d : a; }
            function inw(x) { return within(x, width, width * 0.6, 240); }
            function inh(y) { return within(y, height, height - 100, 75); }
            tooltip.attr("transform", "translate(" + inw(evt[0]) + "," + inh(evt[1]) + ")");
        })
        .on('mouseout', function(d, i) {
            tooltip.attr("visibility", "hidden");
        });

    repChart.selectAll("rect")
        .data(vals)
      .transition()
        .duration(1000)
        .ease('bounce')
        .attr("y", function(d, i) { return y(d, i) - lblh; })
        .attr("x", function(d, i) { return lblw + (i * bw); })
        .attr("height", function(d,i) { return height - y(d,i); });

    repChart.selectAll("text")
        .data(vals)
      .enter().append("text")
        .attr("y", height)
        .attr("x", function(d, i) { return lblw + (bw * i);})
        .attr("dx", -3)
        .attr("dy", "-5")
        .attr("text-anchor", "start")
        .text(textify);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    d3.select("#yaxis")
        .attr("transform", "translate(" + lblw + "," +  (0-lblh) + ")")
        .call(yAxis);
}

d3.json("ram.json", draw);

</script>
</body>
</html>

## ram.json
{"rows":[
{"key":[2,27],"value":{"sum":2072887296,"count":8,"min":250458112,"max":261976064,"sumsqr":537239725405110272}},
{"key":[2,28],"value":{"sum":1409426780160,"count":2791,"min":276828160,"max":536788992,"sumsqr":716801796064776552448}},
{"key":[2,29],"value":{"sum":10510788742016,"count":11248,"min":536870912,"max":1073340416,"sumsqr":10182593940314664163328}},
{"key":[3,30],"value":{"sum":60302981525984,"count":30911,"min":1073741824,"max":2147377152,"sumsqr":119477041564345617955840}},
{"key":[3,31],"value":{"sum":277116318448000,"count":71874,"min":2147483648,"max":4294668288,"sumsqr":1086021200316931942219776}},
{"key":[3,32],"value":{"sum":620860330531296,"count":78600,"min":4294967296,"max":8589533184,"sumsqr":4983674022903707507305472}},
{"key":[3,33],"value":{"sum":645407188838176,"count":43572,"min":8589934592,"max":17179402240,"sumsqr":9807456775002283728303104}},
{"key":[3,34],"value":{"sum":1432447378189760,"count":54156,"min":17179869184,"max":34359271424,"sumsqr":38902396942433549031606272}},
{"key":[3,35],"value":{"sum":1365713745531584,"count":26179,"min":34359738368,"max":68718944256,"sumsqr":74087291727287392264169472}},
{"key":[3,36],"value":{"sum":1757967715082240,"count":17757,"min":68719476736,"max":137436774400,"sumsqr":181086636479845068158533632}},
{"key":[3,37],"value":{"sum":2341896187797504,"count":12448,"min":137951985664,"max":274877095936,"sumsqr":460136057812574274106425344}},
{"key":[3,38],"value":{"sum":2998192377798656,"count":7534,"min":278688251904,"max":542147448832,"sumsqr":1222491312389389426389680128}},
{"key":[3,39],"value":{"sum":2080845703241728,"count":2819,"min":550620979200,"max":1083477622784,"sumsqr":1568689382024998756787683328}},
{"key":[4,40],"value":{"sum":2081651319971840,"count":1394,"min":1133764419584,"max":2165332361216,"sumsqr":3156474721591365226786193408}},
{"key":[4,41],"value":{"sum":47880758947840,"count":17,"min":2704512901120,"max":3161482436608,"sumsqr":135415108128803811839967232}},
{"key":[4,42],"value":{"sum":43980465090560,"count":5,"min":8796093018112,"max":8796093018112,"sumsqr":386856261916393365800222720}},
{"key":[4,43],"value":{"sum":230489419833344,"count":26,"min":8821862821888,"max":8946416873472,"sumsqr":2043343090591770722070167552}}
]}
	<!DOCTYPE html>
	<style>
	#chart {
	width: 960px;
	height: 500px;
	}

	#chart rect.bar {
	stroke: black;
	fill: #777;
	}

	#yaxis .domain {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	#yaxis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	svg g.tooltip {
	pointer-events: none;
	}

	svg g.tooltip rect {
	fill: #bbf;
	stroke: #88f;
	stroke-width: 5;
	opacity: 0.75;
	}

	</style>
	<body>

	<div id="chart">
	<svg width="960" height="500">
	<g id="data"></g>
	<g id="yaxis"></g>
	<g class="tooltip" transform="translate(-300,-300)">
	<rect rx="20" ry="20" width="240" height="75">
	</rect>
	</g>
	</svg>
	</div>

	<script src="http://d3js.org/d3.v2.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	function prettySize(s) {
	if (s < 10) {
	return s + "B";
	}
	var e = parseInt(Math.floor(Math.log(s) / Math.log(1024)));
	var sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
	var suffix = sizes[parseInt(e)];
	var val = s / Math.pow(1024, Math.floor(e));
	return val.toFixed(0) + suffix;
	}

	function draw(d) {
	var vals = [],
	names = [],
	cumulative = [];

	var clustersTotal = 0, ramTotal = 0;
	for (var i = 0; i < d.rows.length; i++) {
	var size = Math.pow(2, d.rows[i].key[1]);
	names.push(size);
	vals.push(d.rows[i].value.count);
	ramTotal += d.rows[i].value.sum;
	var count = parseInt(d.rows[i].value.count);
	clustersTotal += d.rows[i].value.count;
	cumulative.push(prettySize(size) + "-" + prettySize(size*2) +
	" - " + count + " clusters" +
	"<br/>Cumulative:<br/>" +
	prettySize(ramTotal) +
	" in " + clustersTotal + " clusters");
	}

	var bw = 40, lblh = 30, lblw = 100;

	var y = d3.scale.linear()
	.domain([0, d3.max(vals)])
	.range([height - 5, 0]);

	var textify = function(d, i) {
	return i % 3 == 0 ? prettySize(names[i]) : null;
	};

	var repChart = d3.select("#chart svg #data");

	var tooltip = d3.select("#chart g.tooltip");
	tooltip.attr("visibility", "hidden");

	repChart.selectAll("rect")
	.data(vals)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", lblw)
	.attr("height", y)
	.attr("width", bw)
	.attr("y", function(d, i) { return y(d, i) - lblh; })
	.attr("height", function(d,i) { return height - y(d,i); })
	.on('mouseover', function(d, i) {
	tooltip.selectAll("text").remove();
	tooltip.selectAll("text")
	.data(cumulative[i].split("<br/>"))
	.enter().append("text")
	.attr('x', 10)
	.attr('y', function(dd, ii) { return (ii + 2) * 15; })
	.text(function(dd) { return dd; });
	tooltip.attr("visibility", "visible");
	})
	.on('mousemove', function(d, i) {
	var evt = d3.mouse(this);
	function within(a, b, r, d) { return a > r ? a-d : a; }
	function inw(x) { return within(x, width, width * 0.6, 240); }
	function inh(y) { return within(y, height, height - 100, 75); }
	tooltip.attr("transform", "translate(" + inw(evt[0]) + "," + inh(evt[1]) + ")");
	})
	.on('mouseout', function(d, i) {
	tooltip.attr("visibility", "hidden");
	});

	repChart.selectAll("rect")
	.data(vals)
	.transition()
	.duration(1000)
	.ease('bounce')
	.attr("y", function(d, i) { return y(d, i) - lblh; })
	.attr("x", function(d, i) { return lblw + (i * bw); })
	.attr("height", function(d,i) { return height - y(d,i); });

	repChart.selectAll("text")
	.data(vals)
	.enter().append("text")
	.attr("y", height)
	.attr("x", function(d, i) { return lblw + (bw * i);})
	.attr("dx", -3)
	.attr("dy", "-5")
	.attr("text-anchor", "start")
	.text(textify);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	d3.select("#yaxis")
	.attr("transform", "translate(" + lblw + "," + (0-lblh) + ")")
	.call(yAxis);
	}

	d3.json("ram.json", draw);

	</script>
	</body>
	</html>
	{"rows":[
	{"key":[2,27],"value":{"sum":2072887296,"count":8,"min":250458112,"max":261976064,"sumsqr":537239725405110272}},
	{"key":[2,28],"value":{"sum":1409426780160,"count":2791,"min":276828160,"max":536788992,"sumsqr":716801796064776552448}},
	{"key":[2,29],"value":{"sum":10510788742016,"count":11248,"min":536870912,"max":1073340416,"sumsqr":10182593940314664163328}},
	{"key":[3,30],"value":{"sum":60302981525984,"count":30911,"min":1073741824,"max":2147377152,"sumsqr":119477041564345617955840}},
	{"key":[3,31],"value":{"sum":277116318448000,"count":71874,"min":2147483648,"max":4294668288,"sumsqr":1086021200316931942219776}},
	{"key":[3,32],"value":{"sum":620860330531296,"count":78600,"min":4294967296,"max":8589533184,"sumsqr":4983674022903707507305472}},
	{"key":[3,33],"value":{"sum":645407188838176,"count":43572,"min":8589934592,"max":17179402240,"sumsqr":9807456775002283728303104}},
	{"key":[3,34],"value":{"sum":1432447378189760,"count":54156,"min":17179869184,"max":34359271424,"sumsqr":38902396942433549031606272}},
	{"key":[3,35],"value":{"sum":1365713745531584,"count":26179,"min":34359738368,"max":68718944256,"sumsqr":74087291727287392264169472}},
	{"key":[3,36],"value":{"sum":1757967715082240,"count":17757,"min":68719476736,"max":137436774400,"sumsqr":181086636479845068158533632}},
	{"key":[3,37],"value":{"sum":2341896187797504,"count":12448,"min":137951985664,"max":274877095936,"sumsqr":460136057812574274106425344}},
	{"key":[3,38],"value":{"sum":2998192377798656,"count":7534,"min":278688251904,"max":542147448832,"sumsqr":1222491312389389426389680128}},
	{"key":[3,39],"value":{"sum":2080845703241728,"count":2819,"min":550620979200,"max":1083477622784,"sumsqr":1568689382024998756787683328}},
	{"key":[4,40],"value":{"sum":2081651319971840,"count":1394,"min":1133764419584,"max":2165332361216,"sumsqr":3156474721591365226786193408}},
	{"key":[4,41],"value":{"sum":47880758947840,"count":17,"min":2704512901120,"max":3161482436608,"sumsqr":135415108128803811839967232}},
	{"key":[4,42],"value":{"sum":43980465090560,"count":5,"min":8796093018112,"max":8796093018112,"sumsqr":386856261916393365800222720}},
	{"key":[4,43],"value":{"sum":230489419833344,"count":26,"min":8821862821888,"max":8946416873472,"sumsqr":2043343090591770722070167552}}
	]}