Altris Design Language / Data visualization

Data visualization

Make the evidence clear.

Show the comparison. Label it directly. Give the data room to speak.

principles

Less decoration. More information.

Use Axia throughout. Keep labels sentence case and close to the data. Graphite leads; Baltic supports; orange highlights one meaningful point.

01 / Start with the questionChoose bars for comparison, lines for change, and a stacked bar for composition.

02 / Keep the frame quietLight gridlines, generous space and no heavy chart boxes.

03 / Make meaning explicitState units, period and source. Do not rely on color alone.

comparison

Compare without distraction

Start bars at zero. Use a common scale and put each value beside its bar.

Illustrative data · not product specificationsDownload SVG ↓
ComparisonIllustrative index values: Option A 88, Option B 72, Option C 56. All bars start at zero.Index (illustrative units)0255075100Option A88Option B72Option C56
View example data
OptionIndex
A88
B72
C56
Download example data · CSV ↓
retention

Let the line tell the story

Label the series at their endpoints. Keep annotations outside the plot.

Illustrative data · not product specificationsDownload SVG ↓
RetentionIllustrative capacity retention: Series A declines from 100 to 82 percent and Series B from 100 to 76 percent over 4000 cycles.60708090100Capacity retained (%)01,0002,0003,0004,000CyclesSeries A · 82%Series B · 76%
View example data
CyclesSeries A (%)Series B (%)
0100100
10009390
20008883
30008478
40008276
Download example data · CSV ↓
composition

Show the whole, then the parts

A single stacked bar keeps the proportions clear. Align labels and values below it.

Illustrative data · not product specificationsDownload SVG ↓
CompositionIllustrative composition: Group A 64 percent, Group B 24 percent, Group C 12 percent. Total 100 percent.Share of total (%)Group A64%Group B24%Group C12%
View example data
GroupShare (%)
A64
B24
C12
Download example data · CSV ↓
Interactive explorer

Explore the evidence

Compare series, narrow the cycle range and inspect individual readings. Keep the scale stable as the view changes.

Illustrative data · not product specifications

Capacity retention

Visible series
Interactive capacity retentionIllustrative data. Series A: 100, 93, 88, 84, 82 percent. Series B: 100, 90, 83, 78, 76 percent at 0, 1000, 2000, 3000 and 4000 cycles. Use the controls below to inspect readings.

Move across the chart or use the slider and arrow keys to inspect each reading.

Interaction should answer a question. Keep units and scales visible, provide a reset, and offer the same information without hover. See the full example data table.

Heat-map matrix

Property–market fit matrix

Use a tinted matrix to compare multiple options and criteria. Group related columns and use three clearly defined levels. Hover or use the keyboard to focus a row or column.

Matrix design example · Na-ion and Li-ion

Engineered for the properties your application demands

A multi-variable comparison with grouped criteria and three levels of fit. Hover or focus a segment or chemistry to explore the row or column. Ratings demonstrate the presentation; they are not a verified product specification.

Product–market fit Lower Medium Higher
Illustrative comparison · validate ratings and claims before external use
View matrix example data
Illustrative fit ratings · not verified product specifications
ChemistryLow voltageESS · Long durationESS · Frequency regulationDefenceCommercial vehiclesPassenger cars
AltrisHigherHigherHigherHigherMediumMedium
Polyanionic compoundsMediumHigherMediumLowerLowerLower
Layered oxideHigherHigherMediumMediumMediumMedium
LFPMediumMediumLowerLowerHigherHigher
NMCMediumMediumLowerLowerLowerHigher
check

Before you publish

Keep charts consistent with the evidence, not just the brand.

  • Replace illustrative data with verified figures and name the source.
  • Show units and explain the test conditions when they affect interpretation.
  • Use the same scale for comparable charts. Mark any non-zero or broken axis explicitly.
  • Use target bands only when needed; place their label outside the plot and cite the target.
  • Check the smallest intended size. Keep a readable data table available for digital charts.