Data visualization

Tattva charts are drawn in SVG with no chart library. You can read them without color and without a mouse. Every chart comes with a written summary and a table view. This page covers how to pick a chart, the colors, the sizes, the accessibility rules and ready-made dashboards for tracking an AI assistant.

Choosing a chart+

Start with the question the reader has. Polaris advises that each chart should answer one specific question. The list below is our own proposal built on that idea.

Mailchimp and GitLab Pajamas discourage pie charts. Mailchimp recommends a percent bar. Tattva follows that and has no pie or donut. The UK Analysis Function says to use many lines on one chart only when you must, and to prefer a row of small charts instead. So a line chart stops at five lines.

The colors+

Each swatch is a live token. Switch the theme from the sidebar and every swatch changes. Dark mode has its own steps, chosen and checked against the dark background. It is not just the light colors flipped.

For categories, in fixed order

For low to high

In the light theme, darker means more. In the dark theme, lighter means more.

For above and below a middle

Test results

We ran the dataviz skill's check script on the category colors against the white, paper and dark backgrounds. These are measurements of our own tokens.

• The neutral gray is 2.7:1 on white in the light theme. Anything drawn in it needs a visible value or label. The bar chart adds one.
• The low-to-high ramp passes the order checks in both themes. It uses one hue. Lightness changes in the same direction at every step. Steps are at least 0.06 apart in lightness. The lightest step clears 2:1 against the background (2.10:1 in light, 2.61:1 in dark). In the dark theme, lighter means more.
• The middle color is a neutral and is meant to read as nothing. It is 1.3:1 on white, so cells that use it need a label or an outline.
• Status colors stay separate from chart colors. Amber is never a series color.

Color rules+

• Series colors go in a fixed order and never repeat. The first series is always chart-1.
• Four series is the norm and five is the most. Past that, group the rest into one Other series in the neutral, or use a row of small charts. The UK Analysis Function allows at most 4 category colors, or 6 if essential. Atlassian allows 5 to 6. Datawrapper says to avoid more than 7.
• A color belongs to its series, not to its rank. Hiding a series does not recolor the others.
• Low-to-high ramps use 3 to 5 steps plus neutral gray for missing data, as the UK Analysis Function advises.
• Datawrapper's brand tips apply. Use the brand color for a single series. Or use it for the one highlighted category and neutrals for the rest. Stay in one color family. Soften or darken a logo color for large areas.
• Lime is a highlight in the interface and is never a chart color.
• Amber means a person must act. It appears only on a test result or number that needs review, and always with text.
• Do not rely on red versus green alone. Blue with orange or red is safe. Vary lightness too. Use gray for missing or background data.
• Text is never in the series color. Labels, values and legends use text tokens. A colored mark beside them shows which series it is.

Sizes and parts+

These numbers are our own proposals, not checked against a published standard. The UK Analysis Function checklist backs the parts that name it.

Carbon's chart parts are title, axes, tick marks, axis title, legend, toolbar, zoom bar, graph frame and popup. It says the legend should explain each visual property. It has nothing on empty, loading or error states, minimum sizes or small screens, so those rules are ours.

Accessibility rules+

Every chart here meets all of these.

• Text version. A visible summary in body text states the message, and a View as table button shows a real table. The UK Analysis Function checklist requires a data table, a description or both, in body text and not only in alt text. It also recommends a data file people can download. ChartFrame supports this through onDownload.
• Keyboard. The chart can take focus, and arrow keys step through the points. A screen reader reads each point as series, x value, value and unit. The Highcharts accessibility module offers similar features: keyboard use, screen reader roles, a chart description and a table view.
• Nothing only on hover. Popups open on focus, pointer and tap. Everything a popup shows is also in the table. Labels on the chart and text columns carry the key values.
• Reduced motion. When motion is reduced, charts do not animate in and updates happen at once. This is general practice. Highcharts is the only source in our research that covers it.
• Contrast. WCAG 1.4.11 asks for 3:1 for chart parts people need to understand the content. Parts whose information is also in visible text labels or values are exempt. Category marks pass 3:1. Neutral background marks do not on white, so their values are labeled. The UK guidance asks for 3:1 between neighboring colors and 4.5:1 for chart text, or 3:1 if large.
• Color is never the only clue. Series 3 and up add dash patterns and marker shapes (circle, square, triangle, diamond). Dashes can look like forecasts, so forecasts are dotted and the dash patterns are kept different. Neighboring fills get a 2px gap, and a white border between sections is a recommended help.

Honest charts and uncertainty+

• Bars start at zero. Charts that show position, such as dot plots, may start elsewhere. The scale shows where.
• One scale per chart. Two scales invent relationships, so two measures become two charts.
• Say what a range means by naming the quantity and the level, for example 95% confidence intervals. A confidence interval is the range the true value probably falls in.
• Ranges that overlap do not reliably mean there is no difference. Range displays can also mislead about how big an effect is (Hofman, Goldstein and Hullman). Captions describe what is drawn. They do not tell readers how to judge significance.
• In a study with clinicians, a quantile dot plot led to fewer misreadings. Showing the full spread of results shows how much they vary (Wilke). DotPlot draws an estimate and a range. We have not built a full spread view yet.
• For test scores based on few cases, show a range or the number of cases. This is our own inference. No source covered how to show uncertainty in an AI product.
• Mark values that may still change. A latest point still arriving is hollow. Forecasts are dotted.

Dashboards and key numbers+

Vendor blogs on watching how an AI assistant performs describe four dashboard panels: the slowest response times, how many words are produced, spend per model and error rate. They name time to the first word as a key speed measure. They also list typical and slowest response times by model with call count (p50, p90, p95 and p99 are the percentile names). They add quality measures such as test pass rate, whether answers stick to sources, and user feedback. These are secondary sources. Carbon's dashboard guidance puts the most important data first, so the row of tiles leads and the charts follow.

• Lower is better for response time, time to the first word, cost and error rate. Set goodDirection to down on those tiles.
• Words produced is neutral. More is neither good nor bad, so the tile does not say better or worse.
• Test pass rate shows its range and number of cases in the detail line.
• One row of filters sits above the tiles and charts. Every number below it covers the same slice of data.

The stat tile with its change, sparkline and threshold rules has no main source. It is our design proposal. See StatTile.

Live examples+

Tab to a chart and use the arrow keys, or press View as table.

<ChartFrame
  title="How long replies took"
  subtitle="Milliseconds per request, last 7 days"
  summary="The slowest 5% of replies peaked at 2,450 ms on Friday."
  table={lineChartTable(days, series, { xHeader: "Day", caption: "How long replies took", unit: "ms" })}
>
  <LineChart series={series} x={days} unit="milliseconds" ariaLabel="How long replies took" />
</ChartFrame>

What we could not verify+

• We could not reach the FT Visual Vocabulary, Tufte, Polaris Viz or Material charts pages, so nothing here rests on them.
• Carbon's chart types page lists 20 or more chart types and gives no rules for choosing.
• We read the Atlassian color page only as a search snippet, so it is partly unchecked.
• Our own numbers are unchecked design proposals. They are 4 to 6 scale labels, 0.5px gridlines, 1.5 to 2px lines, markers of at least 8px, and a smallest chart of about 280 by 160 that becomes a sparkline or table.
• Reduced motion is general practice. Only Highcharts documented it in our research.
• We found no uncertainty display made for AI products. Showing a range or number of cases for test scores based on few cases is our own inference.
• The stat tile, change, sparkline and threshold rules have no main source. The lists of AI performance measures come from vendor blogs.
• We have not tested the charts with screen reader users. The keyboard and screen reader design follows the research but has not been tested with people.

Sources+

• Carbon chart types
• Carbon color palettes
• Carbon chart anatomy
• Supernova, 11 design systems
• Atlassian color
• UK Analysis Function, colours
• UK Analysis Function, checklist
• Datawrapper color guide
• Datawrapper style guides
• WCAG 1.4.11
• Highcharts accessibility
• Hofman, Goldstein, Hullman
• Quantile dot plots study
• Wilke, uncertainty
• OneUptime, LLM dashboard
• Requesty, LLM metrics
• SigNoz, AI observability