Built with blockbuilder.org
forked from romsson's block: start simple partition
forked from romsson's block: double treemap
forked from romsson's block: double treemap
license: mit |
Built with blockbuilder.org
forked from romsson's block: start simple partition
forked from romsson's block: double treemap
forked from romsson's block: double treemap
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font-family: Helvetica; | |
font-size: 10px; | |
} | |
.point { | |
fill: black; | |
} | |
rect, circle { | |
fill: none; | |
stroke: black; | |
stroke-width: 1; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v4.js"></script> | |
<script src="http://romsson.github.io/d3-gridding/build/d3-gridding.js"></script> | |
<script src="https://romsson.github.io/d3-gridding/example/utils/utils.js"></script> | |
<script> | |
var width = 400, | |
height = 300; | |
var data = [], nb_year = 12, nb_flow = 10, nb_product = 2; | |
d3.range(nb_year).map(function(y) { | |
d3.range(nb_flow).map(function(f) { | |
d3.range(nb_product).map(function(p) { | |
data.push({"year": y, "flow": f, "product": p}); | |
}); | |
}); | |
}); | |
var params = [{ | |
"size": function() { return [width, height]; }, | |
"offset": function(d) { return [0, 0]; }, | |
"mode": "horizontal", | |
"valueHeight": "__agg", | |
"orient": "center", | |
"padding": 2, | |
"level": 0 | |
}, { | |
"size": function(d) { return [d.width, d.height]; }, | |
"offset": function(d) { return [d.x, d.y]; }, | |
"mode": "vertical", | |
"valueHeight": "__agg", | |
"orient": "up", | |
"padding": 5, | |
"level": 1 | |
}, { | |
"size": function(d) { return [d.width, d.height]; }, | |
"offset": function(d) { return [d.x, d.y]; }, | |
"mode": "treemap", | |
"padding": 2, | |
"level": 1 | |
}]; | |
var svgSquares = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g"); | |
function update() { | |
nested_data = generate_nesting_agg([ | |
{groupBy: "", fn: function(d) { return d.length}, accessor: function(d) { return d; }}, | |
{groupBy: "year", fn: function(d, i) {return d.length; }, accessor: function(d) { return d.value; }, sortBy: "year"}, | |
{groupBy: "flow", fn: function(d) {return Math.random(); }, accessor: function(d) { return d.value; }} | |
], "data"); | |
draw(svgSquares, nested_data[0], params, 0, "0_"); | |
svgSquares.selectAll(".index").remove(); | |
} | |
update(); | |
</script> |