Component library

Charts & data viz

Plots, maps, and the frame they all mount inside.

Chart Frame

The shell every chart mounts inside: scales, ticks, tooltips, and legends.

Pro

Revenue by channel

2026, thousands of dollars

1,013k

target0100200300400500600JanFebMarAprMayJunJulAugSepOctNovDec

Direct revenue roughly triples over the year while partner and affiliate revenue grow more slowly. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Revenue by channel through 2026, in thousands of dollars
MonthDirectPartnerAffiliate
Jan180k96k42k
Feb205k121k51k
Mar262k118k60k
Apr244k152kno data
May310k149kno data
Jun356k188k74k
Jul331k214k88k
Aug402k203k96k
Sep448k246k91k
Oct425k288k118k
Nov512k271k132k
Dec548k324k141k

Line Chart

Multi-series lines with monotone spline and step curves.

Pro

Request latency

8 Sep 2026, UTC

664ms

SLO020040060080000:0006:0012:0018:00

The 95th percentile spikes to 664 milliseconds during the afternoon deploy window while the median stays under 150. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Request latency at the 50th and 95th percentile over 24 hours
Hourp50p95
00:0082ms210ms
01:0079ms198ms
02:0076ms186ms
03:0074ms179ms
04:0073ms174ms
05:0075ms182ms
06:0081ms214ms
07:0096ms268ms
08:00118ms372ms
09:00131ms511ms
10:00127ms468ms
11:00122ms402ms
12:00119ms366ms
13:00124ms391ms
14:00133ms447ms
15:00141ms664ms
16:00136ms588ms
17:00128ms452ms
18:00117ms361ms
19:00106ms312ms
20:0098ms281ms
21:0092ms258ms
22:0088ms236ms
23:0084ms221ms

Interpolated: this line claims seat counts nobody was ever licensed for.

050100150200250300JanFebMarAprMayJunJulAug

Seats go from 25 to 250 over eight months in four discrete plan changes. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Licensed seats by month, a value that changes in steps
PointLicensed seats
Jan25 seats
Feb25 seats
Mar50 seats
Apr50 seats
May50 seats
Jun100 seats
Jul100 seats
Aug250 seats

Area Chart

Area, stacked area, and stream graph off one offset prop.

Pro
Stack order

Sessions by source

Stacked to a zero baseline

2240k

050100150200250JanFebMarAprMayJunJulAugSepOctNovDec

Referral traffic peaks in May and social in August, while organic grows steadily all year. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Website sessions by traffic source across 2026, in thousands
PointOrganicReferralSocialEmail
Jan42k30k12k22k
Feb48k36k14k24k
Mar51k48k18k23k
Apr58k62k22kno data
May64k74k30kno data
Jun61k68k44k28k
Jul72k52k62k31k
Aug80k40k78k34k
Sep86k34k70k40k
Oct92k30k54k46k
Nov104k28k40k52k
Dec118k26k34k58k

Bar Chart

Grouped, stacked, and diverging bars in both orientations.

Pro

Accounts by plan

One bar per plan, per quarter

050100150200Q1 2025Q2 2025Q3 2025Q4 2025Q1 2026Q2 2026

Team and Business tiers grow faster than Starter across the period. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Active accounts by plan tier across six quarters
PointStarterTeamBusiness
Q1 2025128 accounts64 accounts18 accounts
Q2 2025142 accounts86 accounts24 accounts
Q3 2025151 accounts104 accounts31 accounts
Q4 2025160 accounts128 accounts44 accounts
Q1 2026172 accounts149 accounts58 accounts
Q2 2026181 accounts178 accounts76 accounts

Scatter Plot

Scatter, bubble, connected, categorical, and quadrant in one.

Pro

Cost per acquisition

By campaign spend, two channels

$30$40$50$60$70$80$0k$20k$40k$60k

Search campaigns bring their cost per acquisition down as spend rises; display campaigns do the opposite. Interactive chart. Use the left and right arrow keys to move between data points, up and down to change series, Escape to dismiss the reading. The full data follows as a table.

Cost per acquisition against campaign spend, for search and display campaigns
SpendSearchDisplay
Search campaign 1$63.7no data
Search campaign 2$66.2no data
Search campaign 3$63.9no data
Search campaign 4$59.2no data
Search campaign 5$62.7no data
Search campaign 6$55.8no data
Search campaign 7$52.6no data
Search campaign 8$56.5no data
Search campaign 9$49.4no data
Search campaign 10$54no data
Search campaign 11$45.2no data
Search campaign 12$48.8no data
Search campaign 13$48.2no data
Search campaign 14$44.3no data
Search campaign 15$40.3no data
Search campaign 16$46.9no data
Search campaign 17$37.3no data
Search campaign 18$42.7no data
Display campaign 19no data$49.2
Display campaign 20no data$55.2
Display campaign 21no data$53.2
Display campaign 22no data$54.1
Display campaign 23no data$55.4
Display campaign 24no data$50.3
Display campaign 25no data$60.4
Display campaign 26no data$60.4
Display campaign 27no data$59.8
Display campaign 28no data$54.8
Display campaign 29no data$59.6
Display campaign 30no data$67.4
Display campaign 31no data$66.1
Display campaign 32no data$60.4
Display campaign 33no data$61
Display campaign 34no data$62.8

Pie Chart

Pie, donut, semi-circle, and nightingale off one polar engine.

Pro

Spend by department

Quarterly, thousands of dollars

Engineering takes the largest share at roughly two fifths of the total. Use the arrow keys to move between slices and Escape to dismiss the reading. The full data follows as a table.

Quarterly spend by department, in thousands of dollars
CategoryValueShare
Engineering$412k38%
Infrastructure$268k24.7%
Sales$194k17.9%
Support$121k11.2%
Operations$88k8.1%

Waffle Chart

A grid of countable units, with the fractional cell carried honestly.

Pro

Sessions by device

One cell is one percent; fractions carry across cells so the grid stays exact

Mobile takes roughly three fifths of all sessions. Use the arrow keys to move between categories and Escape to dismiss the reading. The full data follows as a table.

Share of sessions by device type
CategoryValueShare
Mobile58.4%58.4%
Desktop31.2%31.2%
Tablet7.9%7.9%
Other2.5%2.5%

Funnel Chart

Stage drop-off as pills or a taper, with width carrying the value.

Pro

Payroll by role

$9,124.00

75 staff, monthly
Doctors100%$4,107.00Nurses49%$2,008.00Helpers29%$1,185.00Admin22%$912.00Reception22%$912.00

Doctors take forty five percent of a nine thousand dollar monthly payroll, and admin and reception are level at nine hundred and twelve dollars each. Bar width is proportional to the value, not bar area, and colour repeats the same reading. Use the arrow keys to move between stages and Escape to dismiss the reading. The full data follows as a table.

Monthly payroll by role
StageValueFrom previousOf first
Doctors$4,107.00100%
Nurses$2,008.0049%49%
Helpers$1,185.0059%29%
Admin$912.0077%22%
Reception$912.00100%22%
Of first is printed beside each bar.

Distribution Plot

Box, violin, beeswarm, strip, and jitter over one summary engine.

Pro

Response time by route

90 requests per route, milliseconds

0200400600SearchCheckoutProfileFeed

Box plot of milliseconds across 4 groups. Quartiles use linear interpolation between order statistics, and the whiskers stop at the most extreme observation within one and a half times the interquartile range. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Response time in milliseconds by route
PointMedianQ1Q3MinMaxObservations
Search103671704048790
Checkout1701302129031390
Profile81521163018090
Feed94681455563090

Histogram

Bars, density, or radial, with the bin-width rule printed under it.

Pro

Basket value

480 orders, pounds

0204060801000255075100125

480 observations. 14 bins, Freedman-Diaconis, each bin 10 wide. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Basket value across 480 orders
PoundsOrdersShare
0 to 1071.5%
10 to 20398.1%
20 to 308317.3%
30 to 4010020.8%
40 to 506914.4%
50 to 60173.5%
60 to 70122.5%
70 to 80183.8%
80 to 90387.9%
90 to 100275.6%
100 to 110275.6%
110 to 120306.3%
120 to 130102.1%
130 to 14030.6%

14 bins, Freedman-Diaconis, each bin 10 wide, curve smoothed at 10

Ridgeline Plot

Overlapping density curves sharing one value axis.

Pro

Daily high by month

60 readings a month, degrees Celsius

JanFebMarAprMayJunJulAugSepOctNovDec051015202530

Density of degrees across 12 rows, ordered by the order supplied, each ridge climbing 1.8 rows and scaled against the tallest density in the chart. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Distribution of daily high temperature by month
DegreesMedianMost commonMinMaxObservations
Jan9951560
Feb131591960
Mar1617122060
Apr1919142460
May2120152560
Jun2121182660
Jul2223172760
Aug2122172760
Sep2019162760
Oct1919142460
Nov1616112160
Dec131381760

Horizon Chart

A series folded into bands so twenty rows fit on one screen.

Pro

Error rate against baseline

Five regions, 120 days, percent

eu-west-1us-east-1ap-south-1sa-east-1af-south-1MayJunJulAug

5 rows folded into 3 bands of 6.7% each, with values below zero mirrored back up the lane and hatched. Each lane is reused 3 times, so a deeper band is a bigger number in the same space. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Error rate against baseline by region over 120 days
Pointeu-west-1us-east-1ap-south-1sa-east-1af-south-1
1 May0.8%-2.3%-3.3%1.5%-2.3%
2 May0.8%-5.3%-3.4%4.8%-3.6%
3 May-2.2%-4.7%-2.3%1.9%-3.8%
4 May-1.9%-3.7%-3.5%1.2%-4.2%
5 May0.6%-2.4%-6.1%0.1%-4.1%
6 May2.6%-4.7%-2.7%2.6%-2.3%
7 May5.7%-4.7%-1.3%3.1%-4.7%
8 May7%-2.9%-3.4%4.9%-7.8%
9 May9.7%-2.8%-2.9%1.6%-5.2%
10 May9.5%-5.7%-0.3%1%-5.1%
11 May11.8%-4.5%-3.4%-2.1%-4.9%
12 May9%-7.3%-2.5%-0.5%-6%
13 May6.1%-9.6%-4.2%-0.8%-3.2%
14 May5.3%-9.9%-3.5%-1.4%-1.8%
15 May6.5%-12.5%-1%-4.2%-3.4%
16 May4.6%-8.9%-2.2%-0.8%-3.9%
17 May4.9%-8.7%-5%0%-7%
18 May6.5%-8.5%-3.8%-0.3%-8.6%
19 May5.9%-10.3%-3.7%-0.2%-9.2%
20 May5%-11.8%-3.7%0.8%-6.6%
21 May2.7%-12%-6.8%-0.1%-7.8%
22 May0.2%-9.4%-10%1%-11%
23 May2.9%-5.7%-9.6%-0.5%-11.3%
24 May2.7%-3.2%-5.8%-1.6%-13.5%
25 May5.6%-5.7%-6.9%0.4%-10.6%
26 May7.5%-2.3%-10%1.6%-8.8%
27 May8.3%-0.2%-6.4%3.4%-8.2%
28 May7.8%-0.4%-5.3%1.3%-11.3%
29 May4.6%-1.9%-7%4.6%-8.4%
30 May7.8%1.1%-5.6%6.6%-8.1%
31 May9.7%0.3%-6%4.5%-8.6%
1 Jun12.4%1.6%-3%4.2%-8.3%
2 Jun9.7%0.4%-0.3%6%-9.6%
3 Jun8.7%-0.9%2.1%3.4%-6.1%
4 Jun8.1%1.3%1.6%1.6%-2.9%
5 Jun6.4%4.7%-0.9%2.1%-1.2%
6 Jun4.3%3.2%1.4%2.6%0.9%
7 Jun0.7%5.4%0%-0.2%0.5%
8 Jun0.5%4.8%3.2%-1.5%1%
9 Jun-1%1.6%5.5%-4.9%4%
10 Jun-3.7%-1.9%4.3%-5%4.6%
11 Jun-0.8%1.1%6.8%-7.5%1%
12 Jun-3.8%-1.6%4.3%-10%3%
13 Jun-4.8%-1.9%6.8%-10.4%4.4%
14 Jun-6.9%-1%4.5%-12.4%1.9%
15 Jun-7.2%0.9%2.8%-9.9%3.9%
16 Jun-10.4%1.9%3%-6.9%6.4%
17 Jun-13%4.7%-0.2%-7.4%9%
18 Jun-15%5.7%-2.3%-6.7%8%
19 Jun-14.8%3.2%-1.4%-9.5%6.2%
20 Jun-16.5%-0.2%-0.5%-10.8%4.1%
21 Jun-15.7%-0.1%-0.6%-10.9%1.1%
22 Jun-13.1%-3.4%-3.7%-8.6%3.8%
23 Jun-14.3%-5.2%-5.9%-10.2%5.7%
24 Jun-15.2%-4.1%-3.3%-12.2%7.9%
25 Jun-15.4%-6.1%-2.4%-15%6%
26 Jun-12.1%-2.7%-2.8%-17.3%2.6%
27 Jun-10.8%-3.7%-3%-18.3%4%
28 Jun-7.7%-7%-6.2%-20.1%1.7%
29 Jun-4.3%-9.9%-3.4%-18.3%-1.5%
30 Jun-3.2%-9.7%-6.5%-19.8%1.3%
1 Jul-3.1%-12.5%-5.2%-16%1.2%
2 Jul-1%-15.3%-7.9%-15.1%-2%
3 Jul-1.7%-11.7%-5.5%-13.4%-3.5%
4 Jul-0.7%-14.2%-6.4%-15.4%-6.4%
5 Jul1%-11.6%-9.4%-12.8%-6.7%
6 Jul0.7%-11.6%-7.3%-9.7%-3.8%
7 Jul3.7%-9.6%-8.6%-9%-4.7%
8 Jul4%-8.1%-9.6%-5.8%-3.6%
9 Jul6.5%-5.2%-7.5%-6.8%-3.2%
10 Jul4.7%-5.9%-4.6%-4.8%-0.9%
11 Jul5.6%-5.6%-3%-1.8%1.6%
12 Jul5.5%-3.9%-2.7%-0.3%1.4%
13 Jul5.5%-6.1%-0.1%-2.9%-2%
14 Jul2%-7.2%2.2%-4.1%-3.2%
15 Jul-0.3%-4.3%-0.9%-6%-0.5%
16 Jul-1.2%-2.5%1.6%-7.5%2.6%
17 Jul-0.8%-4.6%4.8%-5.2%-0.5%
18 Jul-3.3%-5.6%7.2%-2.3%-3.3%
19 Jul-3.1%-2.7%6.3%-2.8%-3.7%
20 Jul-2.6%-0.7%8%-6.1%-1%
21 Jul0%-4.1%10.6%-8.3%-0.7%
22 Jul2.6%-7.2%9.1%-9.1%-2.3%
23 Jul3.7%-8.8%7.5%-10.9%-1.5%
24 Jul5.4%-6.2%9.5%-11.1%-3.1%
25 Jul8.4%-3.1%10.8%-8.9%-0.4%
26 Jul6%-6.1%12.5%-8.9%1.8%
27 Jul9.3%-7.6%10.2%-10.6%3.1%
28 Jul8.7%-6.2%7.3%-10%2.2%
29 Jul9.1%-4.9%4.1%-13%5.5%
30 Jul10.9%-3.9%5.5%-13.8%7.3%
31 Jul12.8%-4.5%6.6%-16%6.1%
1 Aug8.8%-5%3.8%-12.6%4.7%
2 Aug5.2%-4.2%3.9%-11.7%2.9%
3 Aug3.2%-5.7%5.3%-14.7%1%
4 Aug0.9%-4.6%1.6%-13.2%0.3%
5 Aug3.2%-1.8%0.1%-12.5%-2%
6 Aug3.7%-1.4%0.8%-14.8%0.8%
7 Aug1.7%1.4%1.7%-14%2.9%
8 Aug-0.1%1%1.5%-16.3%3.6%
9 Aug-1.1%2.7%-1.7%-17.5%6.9%
10 Aug-1.7%4.7%-0.8%-14.9%8.2%
11 Aug-1.5%5.2%-2.3%-12.1%7.1%
12 Aug-1.7%6.4%-3.3%-8.5%4.9%
13 Aug1.2%3.6%-2.1%-6.3%3.2%
14 Aug-0.7%4.9%-3.7%-5.6%3.5%
15 Aug-0.1%5.8%-1.1%-2.5%0.2%
16 Aug-0.3%6.6%2%-5.6%-0.3%
17 Aug1.7%3.4%0.7%-7.4%3.1%
18 Aug-0.9%5.6%3.8%-8.9%4.8%
19 Aug-3.7%7.5%2.8%-5.5%1.7%
20 Aug-4.4%7.7%1.7%-4.5%3.6%
21 Aug-5.2%8.4%0.3%-1.1%0.9%
22 Aug-5.6%6.2%-2.4%-3.4%-0.7%
23 Aug-2.5%4.5%-1.1%-6.3%1.5%
24 Aug-5.5%6.8%1.4%-4.2%-0.1%
25 Aug-5.4%5.9%4.8%-0.8%1.4%
26 Aug-7.6%6.2%5.9%1%4.6%
27 Aug-10.2%2.9%4.3%1.5%3.2%
28 Aug-11.8%6%6.3%4.2%6.6%
up to 20.1%down to -20.1%3 bands of 6.7%

Lollipop Chart

Lollipop, dot, dumbbell, and range off one categorical axis.

Pro

Checkout completion by device

Percent of starts, 2026

81.2%74.6%68.3%63.9%52.1%47.8%DesktopiOSAndroidTabletKioskSmart TV0%20%40%60%80%100%

6 rows, sorted by descending. Stem length is the value, measured from zero. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Checkout completion rate by device
Point2026
Desktop81.2%
iOS74.6%
Android68.3%
Tablet63.9%
Kiosk52.1%
Smart TV47.8%

Bullet Chart

Few's bullet graph: bands behind, measure over, target in front.

Pro

Revenue against plan

Q3, thousands, one shared scale

Target
EMEAN AmericaAPACLATAM0k100k200k300k400k

4 measures, each drawn against its qualitative ranges with a target marker. All rows share one axis. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Revenue against plan by region, thousands
PointActualTargetScale tops out at
EMEA284k300k340k
N America331k290k340k
APAC198k240k340k
LATAM122k150k340k

Waterfall Chart

A running total from typed steps, with the arithmetic done for you.

Pro

Gross to operating

Q3, thousands

+1840k-128k1712k-604k-333k+96k871k0k500k1000k1500k2000kGrossRefundsNetCOGSSupportResaleOperating

7 steps from 0k to 871k. Each step's bar spans the running total before it and after it; subtotal and total steps stand on zero and report the running total instead of changing it. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Bridge from gross revenue to operating profit
PointRunning totalChangeStep type
Gross1840k1840kStep
Refunds1712k-128kStep
Net1712k1712kSubtotal
COGS1108k-604kStep
Support775k-333kStep
Resale871k96kStep
Operating871k871kTotal

Slope Chart

Slopegraph, bump chart, or ranked ribbons, with labels that never collide.

Pro

Weekly active users by office

2024 against 2026, thousands

30k40k50k60k70k80k20242026

5 series across 2 periods, read as slopes. Steeper is a bigger change. Interactive chart. Use the left and right arrow keys to move between data points, up and down to change series, Escape to dismiss the reading. The full data follows as a table.

Weekly active users by office
PointBristolLeedsCardiffDundeeBelfast
202462k58k55k41k39k
202671k49k57k63k37k

Radar Chart

A spoke-by-spoke profile that stays honest about axis order.

Pro

Cupping scores

SCA form, six attributes. Scale truncated to 6 to 10, the specialty band.

AromaFlavourAftertasteAcidityBodyBalance

The Yirgacheffe scores higher on aroma and acidity, the Huila on body and balance, and they are within a quarter point on flavour. Read this axis by axis rather than as a shape: the enclosed area depends on the order the axes are listed in, so it is not a quantity. Use the arrow keys to move between axes and Escape to dismiss the reading. The full data follows as a table.

Coffee cupping scores across six sensory attributes for two lots
AxisYirgacheffe, naturalHuila, washed
Aroma8.757.75
Flavour8.508.25
Aftertaste8.008.25
Acidity9.007.75
Body7.258.50
Balance8.258.50
Axis order

Same six scores every time. The enclosed area is 31.9% of the grid in this order, and it moves when you reorder the spokes. Area is a property of the axis order, not of the coffee.

Parallel Coordinates

One axis per variable, with brushing and reordering by keyboard too.

Pro

Deploys, last quarter

96 deploys across two services, five variables each

96

Deploys touching more files take longer to review, spend longer in CI, and are the ones that move the 95th percentile latency the wrong way. Each axis is scaled to its own range, so the height of a line means something only against the axis it is crossing. Every axis has a column button that reorders it with the left and right arrow keys, and a pair of filter handles that narrow it with the up and down arrow keys. Escape clears an axis filter. The full data follows as a table.

96 of 96 records shown. Column order: Files, Review, CI, Failed checks, p95 delta.
Five variables recorded for each of 96 deploys, with per-axis filtering
RecordFilesReviewCIFailed checksp95 deltaIn filter
Deploy 12008 changed0.2 h6.1 min2-28 msyes
Deploy 12012 changed1.5 h3.8 min1-14 msyes
Deploy 1202119 changed3.2 h12.8 min4+22 msyes
Deploy 1203130 changed4.9 h12.7 min4+27 msyes
Deploy 1204108 changed2.7 h14.5 min3+3 msyes
Deploy 120595 changed2.9 h12.7 min0+7 msyes
Deploy 120690 changed3 h9.3 min0+9 msyes
Deploy 120718 changed1.2 h3.9 min2-4 msyes
Deploy 1208106 changed2.6 h11.2 min2+13 msyes
Deploy 12093 changed1.6 h4.9 min0+1 msyes
Deploy 12103 changed0.2 h3.3 min1-29 msyes
Deploy 1211135 changed3.4 h14.1 min5+18 msyes
Deploy 121210 changed1.7 h3.1 min0-17 msyes
Deploy 121335 changed2 h3.5 min2-10 msyes
Deploy 121434 changed2.5 h5.9 min1+3 msyes
Deploy 121528 changed1.7 h4.1 min1+15 msyes
Deploy 121647 changed2.2 h7.7 min1+18 msyes
Deploy 12178 changed0.8 h5.4 min1-23 msyes
Deploy 121874 changed3 h7.9 min5+11 msyes
Deploy 121976 changed3.8 h7.2 min4+21 msyes
Deploy 1220147 changed4.8 h16.1 min5+34 msyes
Deploy 122126 changed0.8 h4 min0-18 msyes
Deploy 122259 changed3.3 h6.4 min0+5 msyes
Deploy 12234 changed1.6 h2.8 min1-12 msyes
Deploy 122412 changed0.2 h6.3 min1-4 msyes
Deploy 122557 changed2.1 h6.8 min1-6 msyes
Deploy 12265 changed1.5 h4.6 min0-26 msyes
Deploy 122715 changed0.2 h5.4 min0-23 msyes
Deploy 122826 changed2.4 h5 min0-18 msyes
Deploy 1229107 changed4 h14.4 min2+25 msyes
Deploy 1230150 changed4.2 h16.3 min2+57 msyes
Deploy 123186 changed3.7 h10.4 min1+11 msyes
Deploy 123272 changed3 h11.6 min3+12 msyes
Deploy 123327 changed1 h2.9 min1-16 msyes
Deploy 1234137 changed3.9 h15.3 min1+24 msyes
Deploy 123537 changed0.7 h6.8 min1+14 msyes
Deploy 123695 changed2.9 h9.9 min1+28 msyes
Deploy 12373 changed0.4 h5.5 min0-7 msyes
Deploy 123844 changed0.9 h8 min1+11 msyes
Deploy 12398 changed0.5 h5.7 min1-29 msyes
Deploy 124017 changed1.8 h2.6 min1+7 msyes
Deploy 124110 changed0.4 h2.6 min0-1 msyes
Deploy 124251 changed3.1 h5.3 min1+19 msyes
Deploy 12435 changed0.3 h5.6 min1+3 msyes
Deploy 12444 changed0.2 h4.1 min1-31 msyes
Deploy 12453 changed1.4 h1.5 min0-11 msyes
Deploy 1246149 changed3.9 h17.7 min1+48 msyes
Deploy 12476 changed1.1 h1.9 min1-20 msyes
Deploy 124875 changed1.6 h11.4 min1+2 msyes
Deploy 12493 changed0.4 h3.9 min0-25 msyes
Deploy 125012 changed0.2 h5.1 min0+4 msyes
Deploy 1251142 changed4.1 h12.9 min4+37 msyes
Deploy 12526 changed0.2 h3 min0-8 msyes
Deploy 125321 changed0.2 h4.3 min1+3 msyes
Deploy 1254109 changed2.7 h12.5 min2+24 msyes
Deploy 125575 changed2.4 h8.7 min2+7 msyes
Deploy 12567 changed0.5 h1.9 min1-21 msyes
Deploy 125749 changed1.1 h8.1 min1+22 msyes
Deploy 1258155 changed4.7 h13.7 min1+44 msyes
Deploy 125944 changed2 h7.6 min1-13 msyes
Deploy 126022 changed0.8 h5.1 min0-27 msyes
Deploy 126114 changed1.3 h2.9 min0-24 msyes
Deploy 126260 changed1.1 h9 min2+3 msyes
Deploy 126357 changed1.8 h8.8 min1-10 msyes
Deploy 126413 changed1.4 h1.7 min1-6 msyes
Deploy 126586 changed2.2 h9.2 min1+17 msyes
Deploy 126622 changed0.5 h4.5 min0-6 msyes
Deploy 126726 changed0.4 h5.3 min1+4 msyes
Deploy 12683 changed0.5 h3.4 min1-24 msyes
Deploy 1269108 changed3.6 h10.7 min5+3 msyes
Deploy 127047 changed0.9 h5.6 min0-10 msyes
Deploy 127110 changed0.7 h1.8 min0-2 msyes
Deploy 12723 changed1 h5.7 min2-29 msyes
Deploy 1273128 changed3.9 h14.8 min5+39 msyes
Deploy 127437 changed1.4 h6.8 min1-16 msyes
Deploy 127541 changed1.2 h8.4 min0-9 msyes
Deploy 127692 changed3.9 h10.7 min5+8 msyes
Deploy 12779 changed1.6 h4.7 min2+5 msyes
Deploy 127822 changed0.3 h6.8 min0-3 msyes
Deploy 12792 changed0.7 h4.7 min1-24 msyes
Deploy 128098 changed2.5 h10.8 min2+37 msyes
Deploy 128182 changed4 h11 min0+3 msyes
Deploy 12829 changed1.3 h3.2 min1-16 msyes
Deploy 128318 changed1.7 h2.7 min2+11 msyes
Deploy 128419 changed1.3 h2.7 min1-11 msyes
Deploy 1285130 changed4.3 h16.1 min3+23 msyes
Deploy 1286107 changed2.8 h10.4 min4+20 msyes
Deploy 12877 changed1.2 h3.8 min1-1 msyes
Deploy 1288139 changed3.5 h14 min5+44 msyes
Deploy 1289132 changed5.3 h16.3 min2+31 msyes
Deploy 1290136 changed5.6 h15.2 min3+44 msyes
Deploy 129144 changed2.3 h8.3 min1-14 msyes
Deploy 1292113 changed3 h14 min2+27 msyes
Deploy 12939 changed1.9 h1.5 min1-25 msyes
Deploy 129413 changed1.2 h3 min1-15 msyes
Deploy 12958 changed1.1 h5.8 min1-3 msyes

Drag down an axis to filter on it, drag a column name to move it, or use the arrow keys on either. Filtering the bottom of the p95 axis leaves the deploys that made latency worse, and they bunch towards the top of the files axis. p95 is inverted so that better is up on all five.

Radial Bar Chart

Bars wrapped around a hub, with the distortion exposed as a dial.

Pro
HubSweep

Sessions by browser

Docs site, last 30 days, share of sessions

58.4%

Chrome58.4%Safari19.2%Edge9.6%Firefox7.1%Arc3.4%Other2.3%

Chrome takes 58.4 percent of sessions, Safari 19.2, and no other browser reaches 10. Each row sits on its own ring, so the outermost row is drawn about 2.67 times longer than the innermost for the same value. Use the arrow keys to move between rows and Escape to dismiss the reading. The full data follows as a table.

Share of documentation site sessions by browser
RowValueRank
Chrome58.4%1
Safari19.2%2
Edge9.6%3
Firefox7.1%4
Arc3.4%5
Other2.3%6

At this hub size the outer ring draws the same value 2.67x longer than the inner one. Widening the hub shrinks that; taking the sweep to a full turn removes the gap that the scale is read against. If the rows need to be compared precisely, use a bar chart.

Matrix Chart

Category by category with a sized mark, where an empty cell reads as one.

Pro

How the field metrics move together

Pearson r across 41,200 real user sessions

FCP and TTFB move together most closely at 0.81, INP tracks JavaScript bytes at 0.68, and layout shift is close to independent of everything except JavaScript bytes. Marks are scaled by area, and a crossing with no mark means: Mirror of the cell across the diagonal. Use the arrow keys to move around the grid and Escape to dismiss the reading. The full data follows as a table.

Correlation between six field performance metrics
RowLCPFCPTTFBCLSINPJS bytes
LCP1.00Mirror of the cell across the diagonalMirror of the cell across the diagonalMirror of the cell across the diagonalMirror of the cell across the diagonalMirror of the cell across the diagonal
FCP0.781.00Mirror of the cell across the diagonalMirror of the cell across the diagonalMirror of the cell across the diagonalMirror of the cell across the diagonal
TTFB0.620.811.00Mirror of the cell across the diagonalMirror of the cell across the diagonalMirror of the cell across the diagonal
CLS0.11-0.13-0.221.00Mirror of the cell across the diagonalMirror of the cell across the diagonal
INP0.340.220.170.291.00Mirror of the cell across the diagonal
JS bytes0.550.370.090.410.681.00

Size is the strength, colour is the direction, so nothing rests on hue alone. The names sit on the diagonal because that is the one run of cells with nothing to say: every metric correlates perfectly with itself, and a name there is in its own row and its own column, so any mark can be traced to both. The lower half is the whole matrix: a correlation matrix is symmetric, so this is everything the data has to say.

CI matrix, with the gaps

Mark size is the median job time in minutes

Ubuntu runs all four Node versions, macOS drops 18, Windows runs only 22 and 24, and Alpine runs 22 alone. Windows jobs take roughly three times as long as Ubuntu. Marks are scaled by area, and a crossing with no mark means: Not in the build matrix. Use the arrow keys to move around the grid and Escape to dismiss the reading. The full data follows as a table.

Continuous integration job coverage and duration by runner and Node version
RowUbuntumacOSWindowsAlpine
Node 184.2 minNot in the build matrixNot in the build matrixNot in the build matrix
Node 204.1 min6.9 minNot in the build matrixNot in the build matrix
Node 223.8 min6.4 min11.4 min5.2 min
Node 243.6 min6.1 min10.8 minNot in the build matrix

Six of the sixteen combinations are missing, and that is the interesting part. A heat map has to paint every cell, so it would show those six as the palest colour on the ramp, which reads as a fast job rather than as no job at all.

Small Multiples

A panel grid on one shared scale, computed before anything draws.

Pro
Order

Signups by acquisition channel

26 weeks, one panel per channel, weekly totals

Organic search
1,601
05001,0001,5002,000

Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Weekly signups from Organic search
PointSignups
Mar1,120 signups
Mar1,232 signups
Mar1,261 signups
Mar1,166 signups
Mar1,130 signups
Apr1,160 signups
Apr1,339 signups
Apr1,295 signups
Apr1,283 signups
May1,235 signups
May1,336 signups
May1,392 signups
May1,393 signups
Jun1,476 signups
Jun1,500 signups
Jun1,453 signups
Jun1,292 signups
Jun1,466 signups
Jul1,386 signups
Jul1,330 signups
Jul1,528 signups
Jul1,573 signups
Aug1,501 signups
Aug1,418 signups
Aug1,436 signups
Aug1,601 signups
Direct
865

Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Weekly signups from Direct
PointSignups
Mar668 signups
Mar754 signups
Mar621 signups
Mar724 signups
Mar786 signups
Apr757 signups
Apr703 signups
Apr632 signups
Apr680 signups
May677 signups
May645 signups
May788 signups
May760 signups
Jun797 signups
Jun756 signups
Jun803 signups
Jun800 signups
Jun729 signups
Jul777 signups
Jul759 signups
Jul756 signups
Jul778 signups
Aug840 signups
Aug765 signups
Aug865 signups
Aug860 signups
Newsletter
397

Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Weekly signups from Newsletter
PointSignups
Mar257 signups
Mar257 signups
Mar202 signups
Mar264 signups
Mar273 signups
Apr260 signups
Apr269 signups
Apr255 signups
Apr305 signups
May259 signups
May255 signups
May243 signups
May326 signups
Jun329 signups
Jun273 signups
Jun265 signups
Jun341 signups
Jun326 signups
Jul337 signups
Jul334 signups
Jul344 signups
Jul311 signups
Aug336 signups
Aug340 signups
Aug397 signups
Aug326 signups
Referral
348
05001,0001,5002,000Jul

Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Weekly signups from Referral
PointSignups
Mar348 signups
Mar301 signups
Mar253 signups
Mar265 signups
Mar323 signups
Apr261 signups
Apr332 signups
Apr288 signups
Apr305 signups
May335 signups
May215 signups
May326 signups
May320 signups
Jun258 signups
Jun219 signups
Jun206 signups
Jun207 signups
Jun215 signups
Jul278 signups
Jul239 signups
Jul259 signups
Jul271 signups
Aug202 signups
Aug252 signups
Aug276 signups
Aug204 signups
Community
200
Jul

Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Weekly signups from Community
PointSignups
Mar88 signups
Mar81 signups
Mar81 signups
Mar86 signups
Mar71 signups
Apr88 signups
Apr113 signups
Apr93 signups
Apr98 signups
May122 signups
May133 signups
May147 signups
May125 signups
Jun131 signups
Jun146 signups
Jun146 signups
Jun151 signups
Jun168 signups
Jul179 signups
Jul173 signups
Jul162 signups
Jul163 signups
Aug200 signups
Aug188 signups
Aug182 signups
Aug200 signups
Paid social
123
Jul

Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Weekly signups from Paid social
PointSignups
Mar118 signups
Mar123 signups
Mar99 signups
Mar119 signups
Mar69 signups
Apr68 signups
Apr79 signups
Apr88 signups
Apr92 signups
May76 signups
May57 signups
May78 signups
May89 signups
Jun79 signups
Jun58 signups
Jun107 signups
Jun93 signups
Jun83 signups
Jul23 signups
Jul45 signups
Jul18 signups
Jul56 signups
Aug36 signups
Aug53 signups
Aug55 signups
Aug0 signups

On the shared scale, community and paid social are almost flat lines near the floor, which is the truth about their volume. Switch to free scales and all six panels fill their boxes and look like the same business.

Treemap

Squarified tiles, circle packing, or marimekko off one layout prop.

Pro

Cloud spend

August 2026, five groups, sixteen line items

$86,400

Instances$18,420Containers$6,740Functions$4,180BatchPostgres$11,750Warehouse$7,300Cache$2,640Object$9,260Block$3,410Egress$8,120CDN$3,050NAT$1,470Logs$4,930Traces$1,140

Compute is 35 percent of the bill and instances alone are 21 percent of it. Observability is the smallest group at 9 percent, and its logs line is bigger than every other observability item put together. Area is the value, and a group is drawn as an outline around its own parts rather than filled, so no quantity is painted twice. Use the arrow keys to move between tiles and Escape to dismiss the reading. The full breakdown follows as a table.

Monthly cloud bill broken down by service group and line item
ItemGroupValueShare
Instancescompute$18,42021.3%
Containerscompute$6,7407.8%
Functionscompute$4,1804.8%
Batchcompute$1,2901.5%
Postgresdata$11,75013.6%
Warehousedata$7,3008.4%
Cachedata$2,6403.1%
Objectstorage$9,26010.7%
Blockstorage$3,4103.9%
Archivestorage$8801%
Egressnetwork$8,1209.4%
CDNnetwork$3,0503.5%
NATnetwork$1,4701.7%
Logsobs$4,9305.7%
Metricsobs$1,8202.1%
Tracesobs$1,1401.3%

Tiles kept near square, which is the only way their areas can be compared by eye. Groups are outlines, never fills, so nothing is painted twice.

Sunburst Chart

A zoomable radial partition, one ring per level down the tree.

Pro
Rings

Source by directory

Thousands of lines, excluding lockfiles and generated code

appswebcomponentsroutestestslibadmintestsdocspackagesuiprimitiveschartscoreiconsservicesapihandlerstestsdbinframonorepo2,405k

Apps and packages are about a third of the source each, and the largest single directory is the web app's components at 296 thousand lines. Currently showing monorepo, 3 levels deep. Left and right arrows move between items at the same level, down opens an item, up goes back to its parent, Enter zooms into the selected item and Backspace zooms out. The full breakdown follows as a table.

Monorepo source size by directory, four levels deep
ItemPathValueShare of root
appstop level1,087k45.2%
webapps714k29.7%
componentsapps / web296k12.3%
routesapps / web184k7.7%
testsapps / web143k5.9%
libapps / web91k3.8%
adminapps236k9.8%
componentsapps / admin112k4.7%
routesapps / admin78k3.2%
testsapps / admin46k1.9%
docsapps137k5.7%
packagestop level653k27.2%
uipackages416k17.3%
primitivespackages / ui208k8.6%
chartspackages / ui174k7.2%
tokenspackages / ui34k1.4%
corepackages156k6.5%
iconspackages62k2.6%
configpackages19k0.8%
servicestop level541k22.5%
apiservices376k15.6%
handlersservices / api167k6.9%
testsservices / api121k5%
dbservices / api88k3.7%
workerservices94k3.9%
ingestservices71k3%
infratop level124k5.2%
terraforminfra83k3.5%
ciinfra27k1.1%
dockerinfra14k0.6%

Take it to four rings and the outer one is a band of slivers nothing can be read off, which is what happens to every deep sunburst. Click a wedge instead: it becomes the whole turn, and the level you wanted is the level with the most room.

Dendrogram

Clustering joins or a plain tree diagram, with a cut line for groups.

Pro

Cities by temperature profile

Average linkage on twelve monthly means. Distance in degrees.

SingaporeBangkokLagosAthensMadridCairoLondonParisBerlinMoscowReykjavik

London and Paris are the closest pair at 1.4 degrees, Reykjavik is the last city to join anything, and cutting at 12 degrees leaves four groups. The position of each join along the axis is the distance at which those two branches merged, so branches that join further from the leaves are less alike. Left and right arrows move between siblings, down goes into a branch and up comes back out. The full tree follows as a table.

Eleven cities clustered by their monthly mean temperature profile
LeafPathJoins its sibling at
Singaporewarm / tropical / equator3.1
Bangkokwarm / tropical / equator3.1
Lagoswarm / tropical5.4
Athenswarm / mediterranean / northmed2.6
Madridwarm / mediterranean / northmed2.6
Cairowarm / mediterranean6.2
Londoncool / continental / maritime / channel1.4
Pariscool / continental / maritime / channel1.4
Berlincool / continental / maritime3.8
Moscowcool / continental11.7
Reykjavikcool15.9
Cut at

Cutting the tree is how it turns into an answer: at 12 degrees it falls into 4 groups. How many clusters there are is a line across the chart, not a number you pick first.

Population Pyramid

Two bar charts back to back on one shared scale, the shape as the reading.

Pro

Population by age and sex

Thousands, five-year bands. Outline is the same region in 1996.

10.15m

0-45-910-1415-1920-2425-2930-3435-3940-4445-4950-5455-5960-6465-6970-7475-7980-8485+MaleFemale

The 1996 profile is a triangle with its widest band at 5 to 9. By 2026 the widest band is 50 to 54 and the base has narrowed by a third, so the shape has gone from a pyramid to a barrel. Both sides share one scale, so a bar twice as long is twice the number wherever it is. Youngest bands are at the bottom. Use the up and down arrow keys to move between age bands and Escape to dismiss the reading. The full table follows.

Population by five-year age band and sex, 2026, with 1996 as an outline
Age bandMaleFemaleMale, 1996Female, 1996
85+74k128k21k44k
80-84112k152k44k71k
75-79178k216k78k108k
70-74241k271k112k140k
65-69292k312k145k168k
60-64330k344k172k186k
55-59358k366k198k206k
50-54371k373k231k234k
45-49366k364k268k266k
40-44352k348k296k291k
35-39344k337k322k313k
30-34331k322k349k337k
25-29318k306k358k344k
20-24302k289k345k330k
15-19285k271k330k314k
10-14271k258k338k322k
5-9258k245k351k334k
0-4240k228k342k326k

The region grew from 8.63 million to 10.15 million over the thirty years, so on counts the outline sits inside the bars almost everywhere and the change in shape is hard to separate from the change in size.

Sankey Diagram

Flows at a width worth their value, with the crossings sorted out.

Pro
Column order

Where 3,200 support tickets went

September, by arrival channel and first handler

Email1240Live chat860Phone410In-app690Bot reply970Tier 11710Tier 2520Resolved2650Escalated270Abandoned280

Tier 1 handled 1,710 of the 3,200 tickets and resolved 1,440 of them. 280 were abandoned before anyone answered. Up and down move between stages in the same column, right follows the largest flow onward, left follows it back, and Enter pins the highlighted path. Every flow follows as a table.

Support tickets by channel, handler and outcome
FlowFromToValueShare
Email to Bot replyEmailBot reply3009.4%
Email to Tier 1EmailTier 170021.9%
Email to Tier 2EmailTier 22407.5%
Live chat to Bot replyLive chatBot reply42013.1%
Live chat to Tier 1Live chatTier 138011.9%
Live chat to Tier 2Live chatTier 2601.9%
Phone to Tier 1PhoneTier 13009.4%
Phone to Tier 2PhoneTier 21103.4%
In-app to Bot replyIn-appBot reply2507.8%
In-app to Tier 1In-appTier 133010.3%
In-app to Tier 2In-appTier 21103.4%
Bot reply to ResolvedBot replyResolved78024.4%
Bot reply to AbandonedBot replyAbandoned1905.9%
Tier 1 to ResolvedTier 1Resolved144045%
Tier 1 to EscalatedTier 1Escalated1805.6%
Tier 1 to AbandonedTier 1Abandoned902.8%
Tier 2 to ResolvedTier 2Resolved43013.4%
Tier 2 to EscalatedTier 2Escalated902.8%

Ordering the columns is the whole job. In the order the data was written the ribbons cross each other 21 times; seven barycentre sweeps get that to 14, and the sweeps are a fixed count on a discrete ordering, so the diagram lands identically on the server and in the browser.

Chord Diagram

One matrix as a circle of ribbons or a line of arcs, same geometry.

Pro
Layout

Who reviews whose code

Pull requests reviewed across six teams, one quarter

WebMobilePlatformDataDesign sysQA

Platform reviewed 282 pull requests for other teams and had 153 reviewed for them. Web is the mirror of that, 156 reviewed against 203 received. Arrow keys move between groups, Enter pins the highlighted group and its bands, Escape clears it. Every pair follows as a table.

Pull request reviews between six teams
PairOne wayThe other wayTotalShare
Web and Mobile1814323.7%
Web and Platform468813415.6%
Web and Data911202.3%
Web and Design sys625711913.8%
Web and QA2133546.3%
Mobile and Platform397111012.8%
Mobile and Data65111.3%
Mobile and Design sys4438829.5%
Mobile and QA1726435%
Platform and Data52348610%
Platform and Design sys3112435%
Platform and QA4022627.2%
Data and Design sys74111.3%
Data and QA1915343.9%
Design sys and QA911202.3%

Both layouts are one set of numbers. Every group gets a run of space worth its total, that run is split one segment per partner, and a band joins the two segments of a pair. The circle wraps the run around; the arc lays it flat. The circle fits more groups in, the line keeps them in an order you chose.

Network Diagram

Clusters solved from the graph Laplacian, not settled by a simulation.

Pro
Layout

Service traffic at peak

Requests per second between eighteen services

storefrontcatalogauthsearchmetricscheckoutcartsessionslogsmediainventorypricingtracingprofilespaymentsalertsfraud
18 nodes, 32 links1 name has nowhere to sit and is in the tooltip only

The gateway carries the most traffic at 2,140 requests per second. The observability services form a cluster of their own, joined to the rest by four thin links. Arrow keys walk the nodes from the most connected to the least, Enter pins one and its links, Escape clears it. Nodes can be dragged. On a keyboard, Shift with an arrow key moves the selected node eight pixels, and Backspace returns it to where the layout put it. Every link follows as a table.

Service call graph, eighteen services and thirty-two links
LinkFromToreq/s
gateway to storefrontgatewaystorefront900
gateway to searchgatewaysearch640
gateway to authgatewayauth520
gateway to metricsgatewaymetrics80
storefront to catalogstorefrontcatalog480
storefront to cartstorefrontcart310
storefront to mediastorefrontmedia260
storefront to authstorefrontauth200
cart to checkoutcartcheckout190
cart to inventorycartinventory120
checkout to paymentscheckoutpayments170
checkout to fraudcheckoutfraud150
checkout to inventorycheckoutinventory110
checkout to authcheckoutauth130
payments to fraudpaymentsfraud90
payments to logspaymentslogs60
catalog to pricingcatalogpricing300
catalog to mediacatalogmedia240
catalog to inventorycataloginventory210
catalog to logscataloglogs40
search to catalogsearchcatalog420
search to pricingsearchpricing160
search to metricssearchmetrics50
auth to sessionsauthsessions480
auth to profilesauthprofiles260
sessions to profilessessionsprofiles140
inventory to metricsinventorymetrics35
metrics to logsmetricslogs300
metrics to alertsmetricsalerts220
metrics to tracingmetricstracing140
logs to tracinglogstracing180
alerts to tracingalertstracing90

Neither layout is a simulation. Clusters are the two eigenvectors of the normalised graph Laplacian just above the trivial one, which is the exact answer to the problem a spring layout approaches by shaking. Nobody told it about the four groups in the legend of your head; it separated them from the traffic numbers alone. Hops is a breadth-first tree with each subtree given a wedge worth its leaf count. Both land on the same pixels every run. Drag any node to pull it clear, or hold Shift and use the arrow keys: two services sitting on top of each other means the layout found their neighbourhoods near identical, and it is still you who has to read it. A moved node keeps a dashed outline and the link underneath puts everything back, so what the layout said is never lost. On hops, a node slides around its own ring and no further, because there the radius is the number of hops and dragging across rings would be editing the data rather than the view.

Flowchart

Shapes carry the meaning and no arrow can cross a box, by construction.

Pro
On hover

What happens to a push

Fourteen steps, three decisions, one way back

Push to mainInstall and buildBuild green?Run the suiteSuite passes?Deploy to stagingSmoke testHealthy?Promote to productionLivePost the logFirst failure?Retry onceStoppedyesnoyesnoyesnoyesno
  • start or end
  • step
  • decision
  • defined elsewhere
  • input or output
  • 3 arrows routed outside the columns, which is what a jump or a retry looks like

A push builds, runs the suite, goes to staging and gets promoted. All three failure branches meet at the same place, and a first failure gets one retry. Down follows the flow, up goes back one step, left and right move between boxes at the same level, and Enter pins a box to highlight every route that reaches it. The steps and the arrows follow as a table.

Deployment pipeline from a push to production
StepKindLeads to
Push to mainstart or endInstall and build
Install and buildstepBuild green?
Build green?decisionRun the suite (yes), Post the log (no)
Run the suitestepSuite passes?
Suite passes?decisionDeploy to staging (yes), Post the log (no)
Deploy to stagingstepSmoke test
Smoke testdefined elsewhereHealthy?
Healthy?decisionPromote to production (yes), Post the log (no)
Promote to productionstepLive
Livestart or endnothing
Post the loginput or outputFirst failure?
First failure?decisionRetry once (yes), Stopped (no)
Retry oncestepInstall and build
Stoppedstart or endnothing

Shape is the encoding: a stadium starts and ends, a diamond asks, a parallelogram moves something in or out, a barred box is defined somewhere else. Nothing here is carried by fill colour, so it survives a greyscale print. Arrows that need to travel further than the gap below them take a lane outside the columns, which is why none of them crosses a box.

Venn Diagram

A fixed Venn, or an Euler solved from set sizes with its error stated.

Pro
Layout

410 bugs, and what they touched

One quarter of front end issues, by area

967421112583415
Accessibility190Performance144Layout219

Circle areas are the set sizes and every pair sits at the distance that makes their overlap the right size. Three circles cannot satisfy all seven regions at once, so what is left over lands on the middle: the worst region is off by 1.8% of the total.

219 bugs touched layout, 190 touched accessibility and 144 touched performance. 15 touched all three. Arrow keys move between combinations, largest first, and Escape clears the selection. Every combination follows as a table.

Bugs by the areas they touch, accessibility, performance and layout
CombinationCountShare
Accessibility only9623.4%
Performance only7418%
Accessibility and Performance, in all of them215.1%
Layout only11227.3%
Accessibility and Layout, in all of them5814.1%
Performance and Layout, in all of them348.3%
Accessibility and Performance and Layout, in all of them153.7%

Switch between the two and watch the accessibility and performance circles pull apart: only 36 of the 334 bugs in them are shared, and the Euler solve puts that on the page. The Venn shows the same seven numbers at seven fixed sizes, which is the right chart when the question is which combinations exist rather than how big they are.

Choropleth Map

A dotted map painted by value: equal, quantile, or natural break classes.

Pro
MapMeasure
Classes

Support tickets by state

One quarter, raw count

5 classes by natural breaks, tickets. Fit 96.1%.

California raised 4,820 tickets and Wyoming raised 70, so the map is mostly a map of where the seats are. Arrow keys walk the areas from the largest value to the smallest and then through the ones with no data. Escape clears the selection. The class buttons below the map isolate one class at a time. Every area follows as a table.

Support tickets by state, total, in 5 classes by natural breaks
AreaticketsRankClass
California482014820
Texas361022510 to 4820
Florida274032510 to 4820
New York251042510 to 4820
Pennsylvania164051120 to 2510
Illinois158061120 to 2510
Ohio152071120 to 2510
Georgia131081120 to 2510
North Carolina129091120 to 2510
Michigan1240101120 to 2510
New Jersey1120111120 to 2510
Virginia104012520 to 1120
Washington94013520 to 1120
Arizona92014520 to 1120
Massachusetts88015520 to 1120
Tennessee86016520 to 1120
Indiana84017520 to 1120
Maryland72018520 to 1120
Missouri71519520 to 1120
Wisconsin70020520 to 1120
Colorado69021520 to 1120
Minnesota68022520 to 1120
South Carolina64023520 to 1120
Alabama61024520 to 1120
Louisiana55025520 to 1120
Kentucky54026520 to 1120
Oregon52027520 to 1120
Oklahoma4702870 to 520
Connecticut4302970 to 520
Utah4003070 to 520
Iowa3803170 to 520
Nevada3703270 to 520
Arkansas3603370 to 520
Kansas3503470 to 520
Mississippi3403570 to 520
New Mexico2553670 to 520
Nebraska2503770 to 520
West Virginia2203870 to 520
Idaho2153970 to 520
New Hampshire1754070 to 520
Maine1704170 to 520
Rhode Island1304270 to 520
Montana1284370 to 520
Delaware1204470 to 520
South Dakota1104570 to 520
North Dakota904670 to 520
Vermont804770 to 520
Wyoming704870 to 520

The three methods fit this column equal interval 92.7%, quantile 67.4% and natural breaks 96.1%, a spread of 28.6 points, and the worst of them puts 36 of the 48 states in one class. That is what a skewed column does to a classification: equal intervals put most of the map in the palest shade, and quantiles score worst of all because ranking throws away the distance between the middle and the top. The measure is the larger decision either way. Texas is 1,187 dots and Rhode Island is 3, so a count drawn by area gives the first 396 times the ink whatever the number says, and no palette fixes that.

Hex Bin Plot

Bins raw x and y pairs into hexagons itself, where heat-map takes a matrix.

Pro
Bin sizeCount is

Response time against payload

2,400 API requests over one hour

2550751001251501020304050607080payload KBms
2,400 points in 67 cellsdensest 5161 to 22 to 5.45.4 to 16.616.6 to 35.635.6 to 516

Two populations: cache hits sit flat along the bottom whatever the payload, and misses climb with it. Arrow keys walk the cells from the densest to the emptiest, Escape clears the selection. Every cell follows as a table.

Response time against payload size for 2,400 requests, hex binned
Cellpayload KBmsPoints
16.615516
29.716385
34.615230
41316215
51617118
6259371
7289464
8238548
93210347
103510343
11218541
12181841
13229238
142910136
154011234
163711132
17309431
183810527
194211326
205.11224
214412123
224712123
23268622
243411121
258.11221
26339518
272710017
284511316
295413013
304111913
315012213
325213110
33571328
34481158
35491297
36381197
37241007
38411057
3922187
40311106
41561385
42601415
43621435
44521235
4528875
46641473
47541393
48461273
4936963
5022773
51691562
52661532
53691502
54601332
55351212
56591262
57451062
5820912
5912122
60811731
61741641
62721511
63551261
6439971
6520771
6624791
6717121

Around a dozen pixels the two populations separate: a flat cache-hit cloud along the bottom, and a miss population climbing with the payload. This is not the hex shape in the heat map: that one is handed a matrix someone else has already bucketed, and this one is handed 2,400 raw pairs and works out the cells itself. Bin size is the only parameter and it is the whole argument.

Contour Plot

Marching squares over a kernel estimate: rings labelled by share enclosed.

Pro
Rings areSmoothing

How far people got

3,000 visits to one article, scroll depth against time

204060805010015020090%75%25%seconds on pagescroll depth %
3,000 pointsrings hold a share of the observations90%75%50%25%

Two populations: a bounce cluster in the first seconds at almost no depth, and a read-through cluster near the end of the article after three minutes. Arrow keys move between contour levels from the outside in, Escape clears the selection. Every level follows as a table.

Scroll depth against time on page for 3,000 visits, as density contours
ContourRingsDensity
90%3360
75%21,333
50%22,345
25%15,859

Each ring is labelled with the share of visits inside it, solved from the observations rather than from the estimate's own mass. A ring holding half the smoothed density holds about two thirds of the points, so labelling that one 50% would be a false statement about the data. Smoothing is the other decision: tighten it and the sparse middle breaks into islands, loosen it and the two populations merge into one.

OHLC Chart

Candlestick, OHLC bar and barcode off one series, where hollow means up.

Pro
Mark

Spot price per GPU hour

Sixty sessions, open, high, low and close (synthetic)

$1.50$1.80$2.00$2.30$2.501 Jun9 Jun17 Jun25 Jun3 Jul13 Jul21 Jul29 Jul6 Aug14 Aug

A run up through the first month, a break of about a third in the second, and a recovery on much wider daily ranges. Interactive chart. Use the left and right arrow keys to move between data points, Escape to dismiss the reading. The full data follows as a table.

Spot price per GPU hour over sixty sessions, open high low and close
PointOpenHighLowCloseVolumeMove
1 Jun$2.42$2.43$2.37$2.40$4006.00-0.02
2 Jun$2.40$2.42$2.35$2.37$4670.00-0.03
3 Jun$2.37$2.39$2.27$2.30$6885.00-0.07
4 Jun$2.30$2.36$2.27$2.36$5733.00+0.06
5 Jun$2.36$2.38$2.34$2.35$4446.00-0.01
8 Jun$2.35$2.37$2.31$2.32$4817.00-0.03
9 Jun$2.32$2.35$2.27$2.28$2612.00-0.04
10 Jun$2.28$2.30$2.18$2.22$6108.00-0.06
11 Jun$2.22$2.26$2.22$2.23$4408.00+0.01
12 Jun$2.23$2.34$2.23$2.34$6845.00+0.11
15 Jun$2.34$2.39$2.29$2.30$4229.00-0.04
16 Jun$2.30$2.36$2.26$2.26$1890.00-0.04
17 Jun$2.26$2.33$2.21$2.30$2391.00+0.04
18 Jun$2.30$2.42$2.26$2.37$2472.00+0.07
19 Jun$2.37$2.38$2.29$2.34$2121.00-0.03
22 Jun$2.34$2.35$2.26$2.27$5282.00-0.07
23 Jun$2.27$2.29$2.23$2.24$3861.00-0.03
24 Jun$2.24$2.25$2.14$2.18$6654.00-0.06
25 Jun$2.18$2.30$2.14$2.26$4874.00+0.08
26 Jun$2.26$2.30$2.13$2.19$5284.00-0.07
29 Jun$2.19$2.33$2.17$2.30$4447.00+0.11
30 Jun$2.30$2.39$2.28$2.38$3691.00+0.08
1 Jul$2.38$2.40$2.36$2.37$1833.00-0.01
2 Jul$2.37$2.40$2.31$2.35$6485.00-0.02
3 Jul$2.35$2.38$2.17$2.17$6459.00-0.18
6 Jul$2.17$2.18$2.00$2.00$5534.00-0.17
7 Jul$2.00$2.02$1.89$1.92$3558.00-0.08
8 Jul$1.92$1.95$1.88$1.88$3856.00-0.04
9 Jul$1.88$1.91$1.80$1.84$3246.00-0.04
10 Jul$1.84$1.92$1.64$1.67$2473.00-0.17
13 Jul$1.67$1.70$1.52$1.55$2051.00-0.12
14 Jul$1.55$1.57$1.37$1.44$2184.00-0.11
15 Jul$1.44$1.47$1.36$1.41$3758.00-0.03
16 Jul$1.41$1.44$1.39$1.40$2851.00-0.01
17 Jul$1.40$1.40$1.36$1.38$4644.00-0.02
20 Jul$1.38$1.42$1.33$1.34$2705.00-0.04
21 Jul$1.34$1.41$1.26$1.33$4385.00-0.01
22 Jul$1.33$1.37$1.33$1.36$1871.00+0.03
23 Jul$1.36$1.39$1.35$1.37$4757.00+0.01
24 Jul$1.37$1.38$1.30$1.34$6754.00-0.03
27 Jul$1.34$1.42$1.33$1.40$5684.00+0.06
28 Jul$1.40$1.45$1.39$1.45$2120.00+0.05
29 Jul$1.45$1.51$1.42$1.50$4037.00+0.05
30 Jul$1.50$1.50$1.44$1.46$4232.00-0.04
31 Jul$1.46$1.49$1.44$1.47$5519.00+0.01
3 Aug$1.47$1.53$1.45$1.52$3429.00+0.05
4 Aug$1.52$1.60$1.50$1.59$6120.00+0.07
5 Aug$1.59$1.62$1.53$1.54$6303.00-0.05
6 Aug$1.54$1.58$1.53$1.58$5518.00+0.04
7 Aug$1.58$1.60$1.56$1.58$3138.00+0
10 Aug$1.58$1.65$1.56$1.65$3831.00+0.07
11 Aug$1.65$1.66$1.61$1.63$2214.00-0.02
12 Aug$1.63$1.76$1.61$1.73$5261.00+0.1
13 Aug$1.73$1.75$1.69$1.72$5269.00-0.01
14 Aug$1.72$1.79$1.71$1.79$2383.00+0.07
17 Aug$1.79$1.86$1.77$1.85$4383.00+0.06
18 Aug$1.85$1.94$1.83$1.90$3411.00+0.05
19 Aug$1.90$1.96$1.89$1.95$6196.00+0.05
20 Aug$1.95$1.98$1.87$1.93$6601.00-0.02
21 Aug$1.93$2.01$1.90$2.01$3589.00+0.08

25 of 60 sessions closed up. A hollow body is a rise and a filled one is a fall, so the direction survives without colour.

The same four numbers, three marks. The candle is the readable one and needs the most room; the OHLC bar keeps the open and survives being three pixels wide; the barcode drops the open and is what is left at hundreds of sessions. The first two keep the direction off colour entirely, hollow on a rise and filled on a fall. The barcode cannot, and says so.

Gantt Chart

Dates computed from dependencies, with the critical path and the float drawn.

Pro
Float

Shipping one release

Twelve tasks, dependencies, and the path that sets the date

day 0day 5day 10day 15day 20day 25todaySpec the APIDesign passServer routesBuild the UIWrite the docsTest suiteAccessibility auditPerformance passFix what they findRelease notesPackage and signShip it
28 days end to endcritical, 8 of 12 tasksfloat

Twenty eight days end to end. 8 of the twelve tasks are on the critical path; the docs have 13 days of float. The critical path is Spec the API, then Design pass, then Build the UI, then Test suite, then Fix what they find, then Release notes, then Package and sign, then Ship it. Arrow keys move between tasks and Escape clears the selection. Every task follows as a table.

Release plan of twelve tasks with dependencies and the critical path
TaskStartsEndsDaysFloatWaits for
Spec the APIday 0day 33none, criticalnothing
Design passday 3day 85none, criticalSpec the API
Server routesday 3day 741Spec the API
Build the UIday 8day 168none, criticalDesign pass, Server routes
Write the docsday 8day 12413Design pass
Test suiteday 16day 215none, criticalBuild the UI
Accessibility auditday 16day 1932Build the UI
Performance passday 16day 1932Build the UI
Fix what they findday 21day 254none, criticalTest suite, Accessibility audit, Performance pass
Release notesday 25day 272none, criticalWrite the docs, Fix what they find
Package and signday 25day 272none, criticalFix what they find
Ship itday 27day 281none, criticalRelease notes, Package and sign

Nothing here was placed by hand: every date comes from a duration and a list of what a task waits for. 28 days end to end, and 4 of the twelve tasks could slip without moving that, one of them by 13 days. Turn the float off and the plan looks like twelve equally urgent bars, which is how most Gantt charts are drawn and the reason they are not much use. This is also the difference from the resource scheduler, where blocks are dragged to where a person decides they go.

Word Cloud

Spiral packing with the ink proportional to the count, not the type size.

Pro
Count setsRotate

What this library talks about

Every word in its own 185 component descriptions

realcardlivepanelbuttoniconbarsbardotdragfocusfullgradienthoverpreviewslidingtablevalueaxisbehindcursorfieldglowgridhighlightinputpagepickerradialrowsscrollspring-instatustooltipactionsarcsavatarbuiltcards
39 of 40 words placedink tracks the countno room for cell

Real is the most common word at 18 uses, then card at 16 and live at 12. A cloud cannot be read off, so the ranked list is the chart. Arrow keys walk the words from the most common to the least and Escape clears the selection. Every word follows as a table.

The forty most common content words across the library's component descriptions
WordusesRankShare
real1818.2%
card1627.3%
live1235.5%
panel1044.5%
button954.1%
icon964.1%
bars773.2%
bar682.7%
dot692.7%
drag5102.3%
focus5112.3%
full5122.3%
gradient5132.3%
hover5142.3%
preview5152.3%
sliding5162.3%
table5172.3%
value5182.3%
axis4191.8%
behind4201.8%
cursor4211.8%
field4221.8%
glow4231.8%
grid4241.8%
highlight4251.8%
input4261.8%
page4271.8%
picker4281.8%
radial4291.8%
rows4301.8%
scroll4311.8%
spring-in4321.8%
status4331.8%
tooltip4341.8%
actions3351.4%
arcs3361.4%
avatar3371.4%
built3381.4%
cards3391.4%
cell3401.4%

Ink tracks the count here, which means a long word is set smaller than a short one of the same frequency. It looks wrong and it is the honest version: what the eye measures is the patch of dark, not the height of the letters. Even at its best this chart cannot be read off, which is why the ranked table is under it and why the tooltip gives the number. It is here because people ask for it.

Gauge Chart

A reading against a scale, as a filled arc or a settling needle.

Pro

Net promoter score

Against a scale with named bands, not a percentage complete

74NPS

The score sits in the ahead-of-target band. 74 on a scale from 0 to 100, in the Ahead of target band, against a target of 65.

Mini Chart

One series as bars, a line, or a radial ring, crossfading between.

Pro

Region Map

A dotted Equal Earth world map with markers, arcs, and live daylight.

Pro
Density

Global footprint

Click a region to drill in

All regions
HQ

01

Builders

124,890

02

Apps shipped

48,217

03

Tokens (7d)

2.18B

04

p50 latency

42ms

05

Uptime (90d)

99.99%

Globe Map

A draggable orthographic globe with great-circle arcs and inertia.

Pro

Edge network

Drag to spin, live daylight

30°, -80°
HQ

US State Map

A dotted Albers map of the lower 48, every dot tagged with its state.

Pro

Accounts by state

Click a state to drill in

Contiguous US
HQ

Heat Map

A density grid as hexes, squares, or dots across eight colour ramps.

Pro

Foot traffic

Market St grid, last 24h

32,134

all cells

min 19max 849

Commit Graph

A contribution heatmap paged by two-week sprints, drillable to the day.

Pro

Commit activity

9

165 commits in sprints 22 to 26

Open a sprint for its own heat map

LessMore