Published
Edited
Apr 22, 2021
1 fork
2 stars
md`# Circle packing with zoom`
{
let data = await getData();
let hierarchy = makeHierarchy(data, 'liabilities');
let height = 900;
let two = new Two({
type: Two.Types.canvas,
width: width,
height: height
});
let group = two.makeGroup();
let pack = d3.pack()
.size([width,height])
.padding(3);
let root = d3.hierarchy(hierarchy)
.sum(d => d.value)
.sort((a,b) => b.value - a.value);
pack(root);
root.each( node => {
if(node.r > 0) {
let circle = two.makeCircle(node.x, node.y, node.r);
group.add(circle);
// dont need label for root
if(node.parent !== null) {
let text = two.makeText(node.data.currency, node.x, node.y);
text.size = node.r * 0.25;
group.add(text);
}
}
});
two.update();
// Adding zoom
d3.select(two.renderer.domElement).call(d3.zoom()
.scaleExtent([0.5,30])
.on('zoom', (event) => {
group.translation.set(event.transform.x, event.transform.y);
group.scale = event.transform.k;
two.update();
})
);
return two.renderer.domElement;
}
function makeHierarchy(data, what) {
let hierarchy = { name: 'root', children: [], value: 0 };
data.forEach( d => {
/*
assets: "2096.193510424425191384"
currency: "AAVE"
liabilities: "2094.070500346682368036"
rate: "1.00"
*/
let usd = d.values.find(v => v.currency === 'USD');
hierarchy.children.push( {
currency: d.currency,
value: parseFloat(usd[what]),
children: []
});
});
return hierarchy;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
