somehow-sankey
— part of somehow
WIP svelte infographics
by Spencer Kelly

WIP svelte sankey diagram component

<script>
  import { Sankey, Node } from 'somehow-sankey'
</script>
<Sankey height="600">
  <Col>
    <Node name="Property Taxes" to="Toronto" value="4400" color="sea" />
    <Node name="Province/Fed" to="Toronto" value="2500" color="red" />
    <Node name="TTC Fares" to="Toronto" value="1300" color="sky" />
    <Node name="Fees" to="Toronto" value="900" color="sky" />
  </Col>
  <Col>
    <Node name="Toronto" value="11600" color="blue" />
  </Col>
</Sankey>

this library includes a custom layout alg that is inspired by d3's.

It renders nodes in html, so text and interactions are easier.

MIT

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes