michi-vz chart by chart: sankey and the fountain

This is part 9 of 9 in a series touring all 22 michi-vz chart types, family by family. The series starts in Introducing @michi-vz. Part 8 covered the maps.

Last stop, and a watery one: a diagram about flow, and a chart that is literally a fountain. Every michi-vz chart takes the same props in React, Vue, Svelte, Angular and plain HTML; the first chart below shows all four flavours, the rest show React to keep things short.

The sankey diagram

When quantities flow, split, and recombine, the sankey diagram is the only chart that keeps the accounting visible: band thickness equals flow value, at every stage. Here is where this site's readers go next:

Nodes with unique ids plus directed links between them:

const nodes = [
  { id: "Search" }, { id: "Social" }, { id: "Blog" },
  { id: "Docs" }, { id: "GitHub" }, { id: "npm" },
];
const links = [
  { source: "Search", target: "Blog", value: 120 },
  // ...band thickness is proportional to value...
];

import { SankeyChart } from "@michi-vz/react";

<SankeyChart
  nodes={nodes}
  links={links}
  width={640}
  height={360}
/>;

• linkColorMode: "target" colours flows by destination instead of origin, which changes the story a surprising amount.
• nodeWidth and nodePadding are the two knobs that most affect how dense the diagram feels.

Full props on the sankey API page.

The fountain chart

Every library gets one indulgence. The fountain chart is michi-vz's signature, an homage to the Jet d'Eau here in Geneva: each value becomes a water jet whose height is the value and whose spread is the uncertainty around it, complete with droplets and mist. It is marked experimental, and it is the most fun prop surface in the package:

Each item is one jet; value sets the apex height and spread the halo of uncertainty around it:

const data = [
  { label: "core", value: 120, spread: 30 },
  { label: "react", value: 95, spread: 24 },
  // ...one jet per item; snapshot mode when no x-axis type is set...
];

import { FountainChart } from "@michi-vz/react";

<FountainChart
  dataSet={data}
  width={640}
  height={340}
  style="jet"
/>;

• style: "plume" swaps the asymmetric Jet d'Eau silhouette for a symmetric blooming column.
• A temporal xAxisDataType switches from snapshot mode to trend mode, with a line through the apexes.
• showDroplets and showMist toggle the droplet arcs and the falling skirt; frothLayers tunes the graduated spray.

Full props on the fountain chart API page.

And that is the tour: all 22 chart types across nine posts, each with a live example rendered by the same CDN bundle you would use in production. The series index lives in Introducing @michi-vz, the full gallery is in the docs, and if one of these charts would fit your dashboard, npm i @michi-vz/react (or your framework of choice) is all it takes.