Spatial charts Helix has six charts drawn in three dimensions. Each reads its numbers from a table in the document, as every Helix chart does: Spatial Bar Chart stands a bar for each category and series, each as tall as its value, such as signups by region and by quarter. Spatial Heatmap draws a strip of days as a relief, each day a prism as tall as its reading. Spatial Ribbon Chart draws a ribbon for each series, one behind another, its top following the values across, such as latency by region over two weeks. Spatial Scatter Chart places each row as a point in a box, by three measures at once. Spatial Surface Chart draws one measure as a surface over two others, such as load by hour and by day. Spatial Treemap shares a floor out among blocks, each as large as one measure and as tall as another, gathered by group, such as each service's requests and its response time. Each chart draws itself in SVG. @fusion.dev/helix-plot can also draw it with three.js, in a view you can drag round and zoom. Every spatial chart is experimental, so its API can change. Versioning lists each status. Draw a spatial chart Put the table in the document, and point the chart at it with for: <table data-hidden-visually id="load" > <caption>Load over a week</caption> <thead> <tr> <th scope="col">Slot</th> <th scope="col">Hour</th> <th scope="col">Day</th> <th scope="col">Requests a minute</th> </tr> </thead> <tbody> <tr><th scope="row">Mon 08:00</th><td>8</td><td>1</td><td>994</td></tr> … </tbody> </table> <helix-spatial-surface-chart for="load"></helix-spatial-surface-chart> Each chart reads its columns in its own way: Spatial Bar Chart reads its table as Bar Chart does: each row is a category, and each numeric column a series. Categories run across and series back in depth, the first series in front, so one series is a single row of bars. Spatial Ribbon Chart reads its table as Line Chart does: each row is a place along the ribbons, and each numeric column a series. Places run across and series back in depth, the first series in front. A place with no reading ends a ribbon short. Spatial Scatter Chart takes the first three numeric columns as across, up, and in depth. group-by names a column of text that colors each point by its group. Spatial Surface Chart takes the first numeric column as across, the second as depth, and the third as the height. A place on the grid with no reading leaves a hole. Spatial Treemap takes the first numeric column as each block's size, its share of the floor, and the second as its height. group-by names a column of text that gathers its rows into one part of the floor, in one color. With no second numeric column, the blocks stand as one slab. A row with no size is left out. Spatial Heatmap reads its table as Heatmap does, down each column of rows and then across. Its table goes inside it. The drawing is SVG. A server writes the chart's frame, and the drawing arrives when the chart reads its table in the browser. Draw it with three.js Install the package and three.js: bun add @fusion.dev/helix-plot three Put an element inside the chart for three.js to draw in, and connect the two: <helix-spatial-scatter-chart for="customers" group-by="Segment" > <div></div> </helix-spatial-scatter-chart> import { connectSpatialScatterChart } from '@fusion.dev/helix-plot' import { threeScatterDriver } from '@fusion.dev/helix-plot/three' const chart = document.querySelector('helix-spatial-scatter-chart') const connection = connectSpatialScatterChart(chart, threeScatterDriver(chart.querySelector('div'))) Each chart has its own connector and driver: ChartConnectorDriverSpatial Bar ChartconnectSpatialBarChartthreeBarDriverSpatial HeatmapconnectSpatialHeatmapthreeHeatmapDriverSpatial Ribbon ChartconnectSpatialRibbonChartthreeRibbonDriverSpatial Scatter ChartconnectSpatialScatterChartthreeScatterDriverSpatial Surface ChartconnectSpatialSurfaceChartthreeSurfaceDriverSpatial TreemapconnectSpatialTreemapthreeTreemapDriver Spatial Heatmap takes the element in its renderer slot, because its table is inside it: <helix-spatial-heatmap for="commits" rows="7" > <table id="commits">…</table> <div slot="renderer"></div> </helix-spatial-heatmap> Once three.js has drawn, the chart hides its SVG drawing. connection.disconnect() frees the renderer and shows the SVG drawing again. Choose SVG or three.js SVGthree.jsWhat it needsNothing more than the chart@fusion.dev/helix-plot, three.js, and WebGLHow the view movesDrag to turn and tilt, and Shift with an arrow to turn a stepDrag to turn, the wheel or a pinch to zoom, and Shift with an arrow to turn a stepLightShaded by which way each face turns, with no perspectiveLit from above, in perspectiveWithout WebGLDrawnNot drawn, and the SVG drawing stays Start with SVG. Connect three.js where a reader gains from zooming and from perspective, or where the data is larger than SVG draws smoothly. The SVG drawing turns within a frame or two up to these sizes, measured in Chromium on an Apple silicon Mac: ChartTurns within a frame or twoMeasured above thatSpatial Scatter Chart2,000 points5,000 points: 67 ms a turn stepSpatial Surface Chart900 readings, a grid of 30 by 301,600 readings: 50 ms, and 3,600: 113 msSpatial Heatmap365 days730 days: 50 ms, and 1,825: 132 msSpatial Bar Chart400 bars800 bars: 66 ms, and 1,600: 124 msSpatial Ribbon Chart800 readings1,600 readings: 50 ms, and 3,200: 83 msSpatial Treemap400 blocks800 blocks: 68 ms, and 1,600: 151 ms A slower machine reaches these sizes sooner. three.js draws each chart on the graphics card. Read a place more closely Two options help you read where a reading stands: drop-lines on Spatial Scatter Chart draws a line from each point straight down to the floor, in its group's color, so where a point stands across and in depth reads off the floor's grid. contours on Spatial Surface Chart draws the surface's contour lines on it, at each tick of its height, so its shape reads as on a map, and two places at the same height read as such. three.js draws both as well. Draw a chart for a landing page no-box draws Spatial Bar Chart, Spatial Ribbon Chart, Spatial Scatter Chart, Spatial Surface Chart, or Spatial Treemap with no box, grid, numbers, or names, and nothing behind it, so the readings stand on the page as a picture does: <helix-spatial-surface-chart emphasis="outlined" for="load" label="Load over a week" no-box ></helix-spatial-surface-chart> The table, the summary, the tooltip, and the keys still carry every value, and three.js draws no box either. Spatial Heatmap has no box, and its start and end slots are the only names it draws, so leave them empty for the same picture. When a 3D bar or ribbon chart fits A flat Bar Chart is read more exactly. Studies of 3D bars measure readers judging a value less closely than on flat ones, and a bar can stand behind another. Use Spatial Bar Chart where the shape across two sets of names matters more than any one value, such as which regions grew in which quarters. A drag turns the view to show a bar another hides, and the tooltip and the table carry every exact value. The same holds for Spatial Ribbon Chart beside Line Chart. Use it where series cross often enough that their lines tangle, and each in its own depth reads apart. Read a chart with the pointer and the keys A pointer resting on a reading shows its row in the chart's tooltip, the same tooltip every Helix chart shows. A tap shows it until a tap lands elsewhere. A drag turns and tilts the view, and a press that hardly moves is still a press. On a touch screen, a drag across turns the view, and a drag up or down scrolls the page. The plot takes focus, and the keys move the reading: KeySpatial Scatter ChartSpatial Surface ChartRight, LeftThe next or the previous point, in the table's orderAcross, to the next or the previous placeUp, DownAmong the point's measures, which the readout says firstIn depth, back and forwardHome, EndThe first or the last pointThe first or the last placeShift with an arrowTurns the view a stepTurns the view a stepEnter, SpacePresses the pointPresses the placeEscapeLets the reading goLets the reading go Spatial Bar Chart reads as Spatial Surface Chart does: the left and right arrows move from category to category, and the down and up arrows from series to series. Spatial Ribbon Chart reads the same way, from place to place along a ribbon and from ribbon to ribbon. Spatial Treemap reads as Spatial Scatter Chart does: the left and right arrows move from item to item in the table's order, and the down and up arrows among the item's measures. Spatial Heatmap takes Heatmap's keys, and Shift with an arrow turns its view, except under selection-mode="multiple", where it selects a range. In three.js, a step of Shift with an arrow moves over a quarter of a second, and with reduced motion set it happens at once. In the SVG drawing, a step happens at once, and a drag turns the view as the pointer moves. Both drawings turn round the middle of the data and keep their size through a drag, so nothing else on the page moves. Once a drag or a step ends, each settles into the space that fits it, at once with reduced motion set. three.js keeps the zoom you chose. No spatial chart turns by itself. The numbers and names stand outside the box, along the edges that face the reader, and move to other edges as the view turns. A number that would cover another is left out. Spatial Heatmap stands its first and last labels under the two ends of its front edge, clear of the relief. Color a spatial chart Each chart takes its colors from your theme, and these hooks change them: Spatial Bar Chart: each series takes a series color, --chart-series-1 and on, and each face of a bar is that color darkened by how far it turns from the light. Spatial Ribbon Chart: each series takes a series color, --chart-series-1 and on, and each face of a ribbon is that color darkened by how far it turns from the light. Spatial Scatter Chart: each group takes a series color, --chart-series-1 and on. Spatial Surface Chart: the surface is shaded from --spatial-surface-chart-low to --spatial-surface-chart-high. Spatial Treemap: each group takes a series color, --chart-series-1 and on, and each face of a block is that color darkened by how far it turns from the light. Spatial Heatmap: each day takes its tone's color, as on Heatmap: --heatmap-tone-1 to --heatmap-tone-5 along the ramp, or a named tone such as --heatmap-tone-success. --spatial-heatmap-left-shade and --spatial-heatmap-right-shade set how much less light each side of a prism is than its top. emphasis and material change how the marks are drawn, as on every chart: emphasis="outlined" draws each mark as its edge over a fill faded toward the page. On Spatial Surface Chart it is a wireframe. emphasis="subtle" draws a faint wash under the same edge, which shows what stands behind a prism, a point, or a fold of the surface. material="glass" lets the most of what is behind each mark through, and material="frosted" less. three.js reads the same colors, emphasis, and material, so the two drawings agree. It lights the prisms and the surface itself, so the two shade hooks apply to the SVG drawing alone. Many drawings on one page Every three.js drawing Helix makes on a page shares six WebGL contexts, the spatial charts' and the graphs' alike. Past six, a drawing far off screen gives its context back and takes it again as it comes near. A three.js drawing draws only while something moves. It asks the browser for no frames at rest, or while it is out of view.