chart = {
const base = vl.markRect({ tooltip: true }).encode(
vl.x().fieldO('source').sort(vl.field('source_group')).title(null).axis({ orient: 'top' }),
vl.y().fieldO('target').sort(vl.field('source_group')).title(null),
vl.color().fieldN('source_group').title('group')
);
const reverse = base.encode(
vl.x().fieldO('target').sort(vl.field('source_group')),
vl.y().fieldO('source').sort(vl.field('source_group'))
);
return vl
.layer(base, reverse)
.data(data.links)
.width(700)
.height(700)
.render();
}
// load data, update links data to include node group data
data = FileAttachment("miserables.json")
.json()
.then(data => {
const nodesMap = new Map(data.nodes.map(n => [n.id, n]));
return {
nodes: data.nodes,
links: data.links.map(l => ({
...l,
source_group: nodesMap.get(l.source).group,
target_group: nodesMap.get(l.target).group
}))
};
})
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.
