OCTO brand standards / Data viz
Data viz
A chart earns its place when it answers one question at a glance. Use the viz ramp in order, keep everything else quiet, and let the number lead.
The rule
Assign series colours in this order, and stop at six. Past six, group the rest as Other.
- 1 Plasma
--viz-1 - 2 Cyan
--viz-2 - 3 Azure
--viz-3 - 4 Lime
--viz-4 - 5 Amber
--viz-5 - 6 Coral
--viz-6
- Gridlines1px at 8%
--viz-grid - Axis labels10px mono, 42%
--viz-axis - Line weight2px, 1.5 in sparks
- ValuesTabular figures
--viz-1 and set the comparison in a neutral at 20%.Headline numbers
Put the number first and the trend under it. A spark has no axes; its last point carries the marker.
Rings and gauges
For share of a whole or progress to a target. Keep a ring to four segments or fewer; for more, use bars.
Composition ringDonut
Use for share of one total, up to four parts.
Mini ringsDonut set
Use for the same split across peers, on one scale.
Orbit gaugesRadial
Use for stages of one pipeline, outer ring first.
Health dialGauge
Use for one score against a fixed target.
Target ringsProgress
Use for up to four goals, one hue each.
Bars and columns
For comparing amounts. Start every bar at zero, sort by value unless the order means something, and label the end of the bar.
Comparison barsHorizontal
Use for this period against prior, by region.
Category barsSingle series
Use for one measure across named categories.
LeaderboardRanked list
Use for top five when the names matter more than the shape.
Grouped columnsCompare
Use for two series over time. Never more than three per group.
CapacitySegmented fill
Use for load against limits. Amber above 70, coral above 85.
Trends and density
For change over time and patterns across a grid. Keep time on the x axis, left to right, and use the sequential ramp for intensity.
Trend with rangeCombo
Use for a value with its expected band.
Dual signalArea
Use for two flows on one scale. Scrub or use arrow keys.
Activity matrixHeatmap
Use for intensity by day and hour, on --viz-seq.
Build with it
One API
OctoCharts.area(el, data) and its siblings. Plain SVG, no runtime library, under 20 KB.
Token driven
Series read --viz-1 to --viz-6, grids read --viz-grid. Retheme the tokens and every chart follows.
Accessible by default
Each mark is focusable, tooltips announce values, and motion stops under reduced motion settings.