Line to Stacked Area Chart with Svelte Transitions

This demonstrates a tricky little transition effect between two classic line chart forms, the line chart and stacked lines chart. To morph smoothly between the two requires some geometric book-keeping, crafting a ‘tween’ function to create the intermediate geometry.

This chart transitions from a conventional multi-line chart to a stacked area chart, using Svelte transitions. LayerCake and D3 add ballast to the foundations. The y axis can be switched from fixed to dynamic.

Check out a working demo here /viz/svelte-layercake-stacked-to-line-chart/.