The avatar for @tomshanley
Tom Shanley
Public
Edited
Oct 14, 2022
3 forks
10 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sankeyPlus = import("https://cdn.skypack.dev/sankey-plus@0.6.0?min")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sankeyConfig = ({
width: width,
nodes: {
data: clone(nodes)
},
links: {
data: clone(links)
}
})
Insert cell
Insert cell
Insert cell
sankey = {
let obj = new sankeyPlus.SankeyChart(sankeyConfig);
obj.process();
return obj;
}
Insert cell
Insert cell
Insert cell
chart = {
let containerId = "chart-div";
let container = d3.create("div").attr("id", containerId);

//div needs to be rendered for the .draw() method to work with Observable
yield container.node();

sankey.draw(containerId);

return container.node();
}
Insert cell
Insert cell
exampleChart = draw(
{
width: width,
height: 400,
nodes: { data: clone(nodes), virtualNodePadding: 25 },
links: { virtualLinkType: "virtual", opacity: 0.5, data: clone(links) },
arrows: { enabled: true, color: "grey", length: 10, gap: 50 }
},
"chart-exampleChart-div"
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
circularGapChart = draw(
{
width: width,
nodes: { data: clone(nodes) },
links: {
circularGap: 20,
data: clone(links)
}
},
"chart-circulargap-div"
)
Insert cell
#### links.circularLinkPortionTopBottom
Insert cell
#### links.circularLinkPortionLeftRight
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
simpleNodes = [{ name: "node1" }, { name: "node2" }, { name: "node3" }]
Insert cell
Insert cell
draw(
{
width: width,
nodes: { data: clone(simpleNodes) },
links: { data: clone(simpleLinks), useVirtualRoutes: true }
},
"chart-virtualRoutes-div"
)
Insert cell
Insert cell
Insert cell
Insert cell
#### links.baseRadius
Insert cell
#### links.verticalMargin
Insert cell
#### links.virtualLinkType
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
#### arrows.gap
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more