Day 28: Sankey Chart

I modified the animated Sankey chart example from the Fullstack D3 course to create a static Sankey Chart.

I would say the part that cost me more time is to prepare the dataset. Here is what the sankeyData looks like.

Then creating a Sankey chart is easy to use d3.sankey( ). Similar to the force diagram, we will need:

• nodes
• links (source, target, value)

  const { nodes, links } = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .extent([[1, 1], [960 - 1, 600 - 5]])
    ({
        nodes: sankeyData.nodes,
        links: sankeyData.links.map(d => ({
            ...d,
            source: sankeyData.nodes.findIndex(node => node.name === d.source),
            target: sankeyData.nodes.findIndex(node => node.name === d.target)
        }))
    })

Today’s codes.