chart = SankeyChart({
nodes: [{id: 'rare-500', fixedValue: 100},
{id: 'rare-501', fixedValue: 100},
{id: 'rare-502', fixedValue: 100},
{id: 'rare-503', fixedValue: 100},
{id: 'rare-504', fixedValue: 100},
{id: 'core-500', fixedValue: 100},
{id: 'core-501', fixedValue: 100},
{id: 'core-502', fixedValue: 100},
{id: 'core-503', fixedValue: 100},
{id: 'core-504', fixedValue: 100},
{id: 'supercore-500', fixedValue: 100},
{id: 'supercore-501', fixedValue: 100},
{id: 'supercore-502', fixedValue: 100},
{id: 'supercore-503', fixedValue: 100},
{id: 'supercore-504', fixedValue: 100},
{id: 'new-500', },
{id: 'new-501', },
{id: 'new-502', },
{id: 'new-503', },
{id: 'leaving-501', },
{id: 'leaving-502', },
{id: 'leaving-503', },
{id: 'leaving-504', },
],
links: [
[ 'new-500', 'rare-501', 35 ],
[ 'new-501', 'rare-502', 47 ],
[ 'new-502', 'rare-503', 28 ],
[ 'new-503', 'rare-504', 19 ],
[ 'rare-500', 'rare-501', 25 ],
[ 'rare-501', 'rare-502', 37 ],
[ 'rare-502', 'rare-503', 28 ],
[ 'rare-503', 'rare-504', 49 ],
[ 'core-500', 'rare-501', 12 ],
[ 'core-501', 'rare-502', 13 ],
[ 'core-502', 'rare-503', 14 ],
[ 'core-503', 'rare-504', 15 ],
[ 'supercore-500', 'rare-501', 1 ],
[ 'supercore-501', 'rare-502', 5 ],
[ 'supercore-502', 'rare-503', 1 ],
[ 'supercore-503', 'rare-504', 2 ],
[ 'rare-500', 'leaving-501', 25 ],
[ 'rare-501', 'leaving-502', 20 ],
[ 'rare-502', 'leaving-503', 33 ],
[ 'rare-503', 'leaving-504', 12 ],
[ 'new-500', 'core-501', 5 ],
[ 'new-501', 'core-502', 7 ],
[ 'new-502', 'core-503', 8 ],
[ 'new-503', 'core-504', 9 ],
[ 'rare-500', 'core-501', 25 ],
[ 'rare-501', 'core-502', 27 ],
[ 'rare-502', 'core-503', 28 ],
[ 'rare-503', 'core-504', 29 ],
[ 'core-500', 'core-501', 52 ],
[ 'core-501', 'core-502', 58 ],
[ 'core-502', 'core-503', 64 ],
[ 'core-503', 'core-504', 70 ],
[ 'supercore-500', 'core-501', 1 ],
[ 'supercore-501', 'core-502', 0 ],
[ 'supercore-502', 'core-503', 1 ],
[ 'supercore-503', 'core-504', 2 ],
[ 'core-500', 'leaving-501', 4 ],
[ 'core-501', 'leaving-502', 5 ],
[ 'core-502', 'leaving-503', 3 ],
[ 'core-503', 'leaving-504', 2 ],
[ 'new-500', 'supercore-501', 5 ],
[ 'new-501', 'supercore-502', 7 ],
[ 'new-502', 'supercore-503', 8 ],
[ 'new-503', 'supercore-504', 9 ],
[ 'rare-500', 'supercore-501', 1 ],
[ 'rare-501', 'supercore-502', 3 ],
[ 'rare-502', 'supercore-503', 7 ],
[ 'rare-503', 'supercore-504', 9 ],
[ 'core-500', 'supercore-501', 12 ],
[ 'core-501', 'supercore-502', 13 ],
[ 'core-502', 'supercore-503', 14 ],
[ 'core-503', 'supercore-504', 15 ],
[ 'supercore-500', 'supercore-501', 31 ],
[ 'supercore-501', 'supercore-502', 40 ],
[ 'supercore-502', 'supercore-503', 51 ],
[ 'supercore-503', 'supercore-504', 70 ],
[ 'supercore-500', 'leaving-501', 1 ],
[ 'supercore-501', 'leaving-502', 2 ],
[ 'supercore-502', 'leaving-503', 0 ],
[ 'supercore-503', 'leaving-504', 1 ],
]
}, {
nodeGroup: d => d.id.split(/\W/)[0], // take first word for color
nodeAlign: 'center', // e.g., d3.sankeyJustify; set by input above
linkColor: 'source-target', // e.g., "source" or "target"; set by input above
linkSource: ([source,target,value]) => source,
linkTarget: ([source,target,value]) => target,
linkValue: ([source,target,value]) => value,
format: (f => d => `${f(d)} users`)(d3.format(",.1~f")),
width,
height: 600
})
import {SankeyChart} from "@d3/sankey";
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.
