@fusion.dev/helix-docs 0.198.0 → 0.199.0

package/content/building-on-the-headless-tier.mdx

@@ -53,11 +53,11 @@ open.
 
 [//]: # (renders)
 
-**34 of the 101 headless families interpolate another family's tag**, across 22 distinct children.
+**37 of the 105 headless families interpolate another family's tag**, across 22 distinct children.
 
 | Family | Renders |
 |---|---|
-| `area-chart`, `bar-chart`, `copy-button`, `donut-chart`, `heatmap`, `line-chart`, `scatter-chart`, `spatial-heatmap`, `spatial-scatter-chart`, `spatial-surface-chart` | `tooltip` |
+| `area-chart`, `bar-chart`, `copy-button`, `donut-chart`, `heatmap`, `line-chart`, `scatter-chart`, `spatial-bar-chart`, `spatial-heatmap`, `spatial-ribbon-chart`, `spatial-scatter-chart`, `spatial-surface-chart`, `spatial-treemap` | `tooltip` |
 | `breadcrumbs` | `breadcrumb` |
 | `chat` | `chat-message` |
 | `checkbox-group`, `table` | `checkbox` |

package/content/charting.mdx

@@ -9,12 +9,15 @@ title: Charting
 Helix has these chart families, and each one has its own API page:
 
 - `Bar Chart`
+- `Spatial Bar Chart`, drawn in three dimensions
 - `Line Chart`
+- `Spatial Ribbon Chart`, drawn in three dimensions
 - `Area Chart`
 - `Scatter Chart`
 - `Spatial Scatter Chart`, drawn in three dimensions
 - `Spatial Surface Chart`, drawn in three dimensions
 - `Donut Chart`
+- `Spatial Treemap`, drawn in three dimensions
 - `Heatmap`
 - `Spatial Heatmap`, drawn in three dimensions
 - `Sparkline`
@@ -30,15 +33,29 @@ Choose a chart by the question it answers.
 
 - **How much, compared.** `Bar Chart`. A bar's length is its value, so it always
   starts at zero.
+- **How much, across two sets of names.** `Spatial Bar Chart`, with a bar for
+  each category and series, standing in a box you can turn. Use it where the
+  shape across both matters more than any one value. `Bar Chart` is read more
+  exactly.
 - **How something moved over time.** `Line Chart`. It measures from the data's
   own range, so a small change still shows. Its `area` puts a light wash under
   each line. Each wash is drawn from the floor on its own and overlaps the
   others.
+- **How several series moved over the same places, each apart.** `Spatial
+  Ribbon Chart`, with a ribbon for each series, one behind another, in a box
+  you can turn. Use it where series cross and a line chart tangles them. `Line
+  Chart` is read more exactly.
 - **How a total is made up over time.** `Area Chart`. Each column is stacked on
   the one below, so the top edge is the total and a band's thickness is its
   share. Use it when the parts add up to a total. `Line Chart` with `area`
   overlaps the series, and `Area Chart` adds them.
 - **Parts of one whole, at one moment.** `Donut Chart`.
+- **How large each item is within its group, and how it stands on a second
+  measure.** `Spatial Treemap`, with a block for each row, its area its size
+  and its height the second measure, gathered by group on a floor you can
+  turn. Use it where many items share a whole, such as each service's
+  requests and its response time. Its table and its tooltip carry the exact
+  values.
 - **Whether two measures relate.** `Scatter Chart`, with one point per row.
 - **Where rows fall on three measures, and which gather together.** `Spatial
   Scatter Chart`, with one point per row in a box you can turn. Use it for data
@@ -59,9 +76,9 @@ Choose a chart by the question it answers.
   Use `Trend` to show which way one measurement moved and whether that is good
   news.
 
-The three spatial charts draw themselves in 3D in SVG, which a
+The six spatial charts draw themselves in 3D in SVG, which a
 print and a page without WebGL show too, and a drag or Shift with an arrow
-turns. `@fusion.dev/helix-plot` can also draw all three with three.js, lit and
+turns. `@fusion.dev/helix-plot` can also draw all six with three.js, lit and
 in perspective, in a view you can drag round and zoom. The
 [spatial charts guide](./spatial-charts) covers both.
 
@@ -127,9 +144,15 @@ reading a chart is usually read for:
 - `Donut Chart`: each slice's share of the whole.
 - `Scatter Chart`: each series' number of points and how strongly the two
   measures relate.
+- `Spatial Bar Chart`: its number of bars, series, and categories, and the
+  range of its values.
+- `Spatial Ribbon Chart`: its number of readings, series, and places, and the
+  range of its values.
 - `Spatial Scatter Chart`: its three measures and its number of points.
 - `Spatial Surface Chart`: its measures, its number of readings, and the range
   of its heights.
+- `Spatial Treemap`: its number of items and groups, and the range of their
+  sizes.
 
 `Heatmap` and `Spatial Heatmap` are each an image with that name. `Sparkline` takes a `label` of its own.
 
@@ -205,6 +228,9 @@ These parts keep their direction:
 - `Spatial Scatter Chart` and `Spatial Surface Chart` are laid out as on a
   left-to-right page, because all three of their axes are measures. Their
   summaries and tooltips follow the page's direction.
+- `Spatial Bar Chart`, `Spatial Ribbon Chart`, and `Spatial Treemap` are laid
+  out as on a left-to-right page too, since each drawing is a box you turn. Its summary and tooltip follow the page's
+  direction.
 
 To keep a chart left to right on a right-to-left page, such as a number line in
 a mathematics text, set `dir="ltr"` on the chart element. You need nothing else.