{
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);
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();
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;
}