Built with blockbuilder.org
forked from romsson's block: age pyramid
license: mit |
Built with blockbuilder.org
forked from romsson's block: age pyramid
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font-family: Helvetica; | |
font-size: 10px; | |
} | |
.point { | |
fill: black; | |
} | |
rect { | |
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 = []; | |
d3.range(10).map(function(d, i) { | |
d3.range(2).map(function(e, j) { | |
data.push({"index": i, "value": j, "size": i *(j+1) + i*Math.random()}); | |
}); | |
}); | |
var params = [{ | |
"size": function() { return [width, height]; }, | |
"offset": function(d) { return [0, 0]; }, | |
"mode": "vertical", | |
"padding": 0, | |
"level": 0 | |
}, { | |
"size": function(d) { return [d.width, d.height]; }, | |
"offset": function(d) { return [d.x, d.y]; }, | |
"mode": "horizontal", | |
"valueWidth": "size", | |
"orient": function(d, i) { return +d.key % 2 === 0 ? "left": "right";}, | |
"padding": 10, | |
"level": 1 | |
} | |
]; | |
var svgSquares = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g"); | |
function update() { | |
//nested_data = d3.nest() | |
// .key(function(d, i) { return i; }) | |
// .entries(data); | |
var nested_data = generate_nesting(["", "value"], "data") | |
console.log("NESTED", nested_data) | |
draw(svgSquares, nested_data[0], params, 0, "0_", false); | |
d3.selectAll(".index").remove(); | |
} | |
update(); | |
</script> |