Data Visualization Map · WCN Brand Portal

WCNDATA-VIZ MAP

Data visualisation · E

How WCN shows data.

Six topics — charts as evidence, not decoration. Hairline grids, monospaced figures, exactly one vermilion highlight per chart. Every value derives from the colour and type systems already built.

BAR · ONE HIGHLIGHT

LINE · AREA

PROGRESS · COVERAGE

PROOF · RATIO

94.2%

+12.4

KPI · DASHBOARD

5/6

SYSTEM-DERIVED

5 topics derive from colour + type

Proof viz proven in use

States — direction set

03E01 Chart family DONE

WCN ships a small family of chart types, each with one job. Pick by the question being asked — comparison, trend, part-to-whole — not by what looks impressive.

BARComparison LINETrend over time DONUTPart-to-whole AREACumulative

E01.1 · BAR

For comparison.

Bars compare discrete categories. Always start the axis at zero; sort by value unless a natural order exists. The workhorse of the set — reach for it first.

USECompare categories

ZEROAxis starts at 0

SORTBy value

BARS≤ 12 readable

E01.2 · LINE

For trend.

Lines show change over time. One to three series; beyond that the chart becomes spaghetti. The vermilion line is the one that matters; others recede to neutral.

USETrend over time

SERIES1–3

FOCUSVermilion = key

SMOOTHNo, plot truth

E01.3 · PART-TO-WHOLE

For shares.

Donut and stacked bar show composition. Limit to a handful of slices; label directly. If you need many parts or precision, a sorted bar beats a pie every time.

USEComposition

SLICES≤ 5

LABELDirect

ELSEUse a bar

E01.4 · CHOOSING

Question first.

Start from the sentence the chart should let a reader say. "X is bigger than Y" → bar. "X is rising" → line. The chart type is the answer to the question, never the decoration.

STARTThe sentence

BIGGERBar

RISINGLine

AVOIDChartjunk

DON'T

Don't truncate bar axes — Bars start at zero, always.

Don't plot 6 lines — Three series is the ceiling.

Don't pie many slices — Use a sorted bar.

Don't 3D anything — Depth distorts values.

“Pick the chart that lets the reader say the true sentence fastest.”

03E02 Colour mapping DONE

In a chart, colour is information — not styling. WCN maps the palette to data roles so the same hue always means the same thing across every dashboard.

CATEGORICALDistinct hues SEQUENTIALVermilion ramp SEMANTICSuccess / warn / error ACCESSColour-blind safe

E02.1 · CATEGORICAL

Distinct, limited.

For unordered categories, use a small set of distinct hues drawn from the brand — ink, stone, vermilion, then functional colours. Cap at six; beyond that, group the tail.

SETInk · stone · vermilion

MAX6 categories

TAILGroup as "other"

ORDERStable across charts

E02.2 · SEQUENTIAL

One hue, light to dark.

For ordered magnitude, use a single-hue ramp — pale vermilion to deep. Lightness encodes value; never a rainbow, which invents categories that aren't there.

RAMPVermilion 100→700

ENCODELightness = value

STEPS5–7

AVOIDRainbow scales

E02.3 · SEMANTIC

Green up, red down.

Performance data uses the functional set — success green, error red, warning amber. These are reserved meanings; never use semantic colours for ordinary categories.

UPSuccess green

DOWNError red

WARNAmber

RESERVEDMeaning only

E02.4 · ACCESSIBILITY

Never colour alone.

Around 8% of men can't separate red and green, so colour is always paired with a label, shape or direct value. Palettes are checked against colour-blind simulation.

PAIRColour + label

CHECKCVD simulation

DELTAArrow + colour

CONTRASTOn both grounds

DON'T

Don't restyle hues per chart — Same hue, same meaning, everywhere.

Don't rainbow magnitude — Single-hue ramps for order.

Don't spend semantic colours — Green/red are reserved.

Don't rely on colour alone — Pair with label or shape.

“In a chart, colour is data — spend it as carefully as the numbers.”

03E03 Axes & grid DONE

Axes and gridlines should be felt, not seen. WCN keeps them light and consistent so the data sits forward and the structure stays in the background where it belongs.

AXIS1 px ink GRIDFaint stone LABELSMono · small ZEROEmphasised

E03.1 · AXIS LINES

Present, not heavy.

The baseline and value axis are a single ink hairline. Often only the baseline is needed; drop the value axis when gridlines already carry the scale.

WEIGHT1 px ink

BASELINEAlways

VALUE AXISOften dropped

TICKSMinimal

E03.2 · GRIDLINES

Faint, horizontal.

Gridlines are faint stone, horizontal only in most charts — they help read values without boxing the data in. Vertical gridlines appear only for time on dense series.

COLOURFaint stone

DIRHorizontal

DENSITY3–5 lines

VERTICALTime only

E03.3 · LABELS

Mono, readable.

Tick labels are JetBrains Mono at a small size so numbers align in a column. Rotate never; if labels collide, thin them or abbreviate rather than turning them diagonal.

FONTJetBrains Mono

SIZE11 px

ALIGNRight · numeric

ROTATENever

E03.4 · ZERO & RANGE

Honest scale.

The zero line is slightly stronger than other gridlines. Bar charts include zero; line charts may crop to the data range, but the crop is always made obvious.

ZEROStronger line

BARSInclude zero

LINESMay crop

CROPMade explicit

DON'T

Don't bold the gridlines — They sit behind the data.

Don't box the plot — Baseline + faint grid is enough.

Don't rotate labels — Thin or abbreviate instead.

Don't hide a cropped axis — Make the range explicit.

“You should feel the grid, never notice it.”

03E04 Number format DONE

Data is mostly numbers, and numbers have their own typography. WCN sets them in tabular mono with consistent separators, currency and deltas so figures line up and compare at a glance.

FONTJetBrains Mono · tabular SEPThousands · locale DELTA▲ green / ▼ red ABBRK · M · B

$1,284.50

▲ 2.4%▼ 1.1%1.2M

E04.1 · TABULAR FIGURES

Digits that line up.

Numbers use JetBrains Mono's tabular figures so columns align on the decimal. Right-align numeric columns; a stack of figures should read like a ledger, not prose.

FIGURESTabular

ALIGNRight / decimal

FONTJetBrains Mono

COLUMNReads as ledger

E04.2 · SEPARATORS

Grouped, by locale.

Thousands separators are always shown; the separator follows the reader's locale. Decimals are capped to the precision that matters — usually two, often zero.

THOUSANDSAlways

LOCALEReader's

DECIMALS2 or 0

PADConsistent in column

E04.3 · DELTAS

Change, at a glance.

Increases are green with an up triangle, decreases red with a down triangle — colour and shape together. The sign is never left to colour alone.

UP▲ green

DOWN▼ red

SHAPETriangle + colour

ZERONeutral dash

E04.4 · ABBREVIATION

Big numbers, short.

In tight spaces, large values abbreviate — 1.2M, 3.4B — with full precision on hover or in detail views. Abbreviate consistently; never 1.2M next to 1,200,000.

SCALEK · M · B

PRECISION1 decimal

FULLOn hover

CONSISTENTOne style per view

DON'T

Don't use proportional figures — Tabular so columns align.

Don't drop separators — 1,284 not 1284.

Don't sign by colour alone — Add the triangle.

Don't mix abbreviation — 1.2M or 1,200,000 — not both.

“Numbers are typography too — set them so they line up and tell the truth.”

03E05 Proof & ledger DONE

WCN is a network, so much of its data is on-chain — proofs, distributions, validator sets. This is the house style for turning ledger truth into something a human can read.

DATAOn-chain BARSDistribution HASHMono · truncated VERIFYStatus mark

74%

52%

38%

E05.1 · DISTRIBUTION

Who holds what.

Token and stake distributions use horizontal bars sorted by size, with the long tail grouped. The point is concentration or spread — make that readable in one glance.

CHARTSorted bars

TAILGrouped

SHOWConcentration

TOPLabel directly

E05.2 · HASHES & IDS

Truncated, copyable.

Addresses and hashes show first and last characters in mono with an ellipsis — 0xA1b2…9F. The full value copies on click; never wrap a 66-character hash across lines.

STYLE0xA1b2…9F

FONTMono

COPYOn click

WRAPNever

E05.3 · PROOF STATUS

Verified, shown.

Verification state — verified, pending, failed — uses the semantic set with an icon and label. A green tick means the proof checked out; the colour is never the only signal.

VERIFIEDGreen · tick

PENDINGAmber · spinner

FAILEDRed · cross

LABELAlways paired

E05.4 · TIME & BLOCKS

Block height, human time.

On-chain events show both block height (mono, exact) and a human relative time ("2 min ago"). Precision for the record, readability for the person.

HEIGHTMono · exact

TIMERelative

BOTHShown together

HOVERFull timestamp

DON'T

Don't show full hashes inline — Truncate, copy on click.

Don't hide the long tail — Group it, don't drop it.

Don't signal proof by colour only — Add icon + label.

Don't show only block height — Pair with human time.

“On-chain data is only useful when a human can read the truth in it.”

03E06 States & annotation WIP

A chart is rarely just "full of data". It loads, it empties, it errors, and sometimes it needs a word of explanation. WCN defines those states so a dashboard never feels broken.

EMPTYGuidance, not blank LOADINGSkeleton ERRORCause + retry NOTESparing callouts

▲ peak

E06.1 · EMPTY STATE

Blank, with a reason.

An empty chart explains why — no data yet, filtered out, or coming soon — and offers the next step. A blank rectangle reads as a bug; an empty state reads as designed.

SHOWWhy it's empty

ACTIONNext step

ICONQuiet

NEVERBlank box

E06.2 · LOADING

Skeleton, not spinner.

While data loads, the chart shows a skeleton of its own shape so layout doesn't jump. Spinners are a last resort; the skeleton sets the expectation of what's coming.

STYLESkeleton

SHAPEChart's own

JUMPNone on load

SPINNERLast resort

E06.3 · ERROR

Honest failure.

When data fails, the chart says so plainly, names the likely cause, and offers retry. It never shows stale numbers as if current — a wrong chart is worse than no chart.

MESSAGEPlain

CAUSENamed

ACTIONRetry

STALENever as current

E06.4 · ANNOTATION

A word, where needed.

Annotations mark the moment that matters — a launch, a spike, a threshold — in mono with a thin leader. Used sparingly, they turn a chart into a story; overused, they bury it.

MARKEvent · threshold

STYLEMono · thin leader

USESparingly

GOALChart → story

DON'T

Don't show a blank box — Explain the empty state.

Don't jump on load — Reserve space with a skeleton.

Don't show stale data — Say it failed, offer retry.

Don't over-annotate — Mark only what matters.

“A chart’s empty and error states are where it earns trust.”

Charts are evidence

Show the proof. Hide the chart.

Data-viz inherits everything from systems already built: colour from B, figures from C, the coverage bars proven across every map page. The job is restraint — let one vermilion point carry the meaning. Next: states & annotation, then a chart-component page like B1–B6.

WCN Data-Viz Map · 6 topics · G1–G6

03 · VISUAL · E · v1.0