Gallery

Every chart and component, drawn live

The 60 charts of silverpoint 0.8.0, in 9 families, the 17 UI components of 0.3, and the composed components, overlays and timeline new in 0.7 (drawn here by reflex-silverpoint-react 0.8.0), each from the same props as its example code. Change the ground, the substrate, the mode, the hatch fill or the palette: the geometry of the data never moves, only the drawing does. The controls themselves are silverpoint's SpSegmented.

Lines · 4

Series over an ordered axis: splines, steps, sparklines and KPI cards.

LineChart code →

Hits per hour
hour	hits	baseline
00	18	22
02	14	18
04	11	15
06	16	17
08	34	30
10	58	48
12	71	60
14	66	62
16	74	64
18	88	70
20	62	55
22	41	40

Spline with an optional dotted baseline series.

StepChart code →

Active plans
x	value
Jan	12
Feb	12
Mar	18
Apr	18
May	15
Jun	24
Jul	24
Aug	30

A series drawn as steps.

SparklineRows code →

Service health
name	readout
API	99.9%
Queue	17
Cache	84%
Search	170

One row per series — name, sparkline, readout.

KpiCard code →

Orders
point	value
1	118
2	124
3	121
4	132
5	140
6	136
7	129
8	142
9	151
10	147
11	155
12	162
13	158
14	171

A metric, its delta, and an area sparkline of the series.

Bars · 8

Pill bars and their relatives: stacked, composed, waterfall, funnel, bullet, pyramid, candlestick.

BarChart code →

Revenue by quarter
x	value	previous
Q1	42	35
Q2	58	44
Q3	51	49
Q4	73	60

Pill bars, as columns or rows, with an optional second series.

StackedBarChart code →

Sign-ups by plan
x	Free	Pro	Team
Jan	40	18	6
Feb	46	21	9
Mar	38	26	11
Apr	52	24	14
May	49	31	15

One stacked segment per key.

ComposedChart code →

Revenue and margin
x	revenue	margin
Jan	42	18
Feb	48	21
Mar	39	17
Apr	55	26
May	61	30
Jun	58	27

Columns and a spline on one value scale.

WaterfallChart code →

Cash flow
step	base	delta
Opening	120	—
Sales	—	64
Services	—	22
Payroll	—	-58
Rent	—	-24
Closing	124	—

Totals from zero and floating deltas from the running total.

FunnelChart code →

Checkout funnel
stage	value	share
Visits	12,400	100%
Product	6,800	55%
Cart	2,900	23%
Checkout	1,500	12%
Paid	980	8%

Horizontal, centred stages.

BulletChart code →

Quarter targets
title	actual	target
Revenue	72	80
Profit	58	65
New users	86	75
Retention	41	60

One bar per target, with a marker at the target. Values in 0-100.

PyramidChart code →

Headcount
label	width
Leads	18
Managers	42
Specialists	70
Staff	100

Stacked tiers whose width encodes the value (0-100).

CandlestickChart code →

Share price
time	open	high	low	close
Mon	102	108	99	106
Tue	106	109	101	103
Wed	103	105	97	99
Thu	99	104	96	103
Fri	103	111	102	110
Mon	110	114	107	108
Tue	108	110	104	109
Wed	109	116	108	115

OHLC bodies and wicks.

Areas · 3

Toned areas under a line, bands between two series, and stacked streams.

AreaChart code →

Sessions this week
x	value
Mon	32
Tue	45
Wed	41
Thu	58
Fri	66
Sat	38
Sun	29

A curved, toned area under its line.

RangeBandChart code →

Daily temperature
x	low	high
Mon	11	19
Tue	12	22
Wed	14	24
Thu	13	21
Fri	10	18
Sat	9	20
Sun	12	23

The band between a low and a high series.

StreamChart code →

Traffic sources
x	organic	paid
Mon	22	14
Tue	28	18
Wed	35	16
Thu	31	24
Fri	38	29
Sat	26	21
Sun	19	12

Two waves, overlaid or stacked.

Points & grids · 5

Points on two scales, bubbles, heatmaps, treemaps and a calendar grid.

ScatterChart code →

Height and weight
x	y	size
152	51	2
158	56	4
161	54	3
165	62	6
168	60	5
171	68	8
175	71	7
178	69	9
182	77	10

Points on two linear scales, optionally sized.

BubbleChart code →

Markets
x	y	size
2	18	40
5	24	120
8	12	65
11	30	210
14	21	90

Circles whose area encodes `sizeKey`.

HeatmapChart code →

Load by day and hour
label	00	04	08	12	16	20
Mon	12	34	58	71	66	40
Tue	18	42	77	88	70	35
Wed	9	38	64	93	81	47
Thu	15	29	55	68	59	31
Fri	6	21	43	49	37	14

Labelled rows of values, normalised against `scaleMax`.

TreemapChart code →

Traffic share
label	share
Search	48%
Direct	26%
Social	17%
Email	9%

Tiles of `cols × rows` cells placed in a `columns × rows` grid.

ActivityGrid code →

Contributions
date	count	level
2026-03-30	0	0
2026-03-31	7	0
2026-04-01	3	0
2026-04-02	10	0
2026-04-03	6	0
2026-04-04	0	0
2026-04-05	3	0
2026-04-06	8	0
2026-04-07	4	0
2026-04-08	0	0
2026-04-09	7	0
2026-04-10	3	0
2026-04-11	3	0
2026-04-12	2	0
2026-04-13	5	0
2026-04-14	1	0
2026-04-15	8	0
2026-04-16	4	0
2026-04-17	0	0
2026-04-18	2	0
2026-04-19	1	0
2026-04-20	2	0
2026-04-21	9	0
2026-04-22	5	0
2026-04-23	1	0
2026-04-24	8	0
2026-04-25	1	0
2026-04-26	0	0
2026-04-27	10	0
2026-04-28	6	0
2026-04-29	2	0
2026-04-30	9	0
2026-05-01	5	0
2026-05-02	0	0
2026-05-03	2	0
2026-05-04	7	0
2026-05-05	3	0
2026-05-06	10	0
2026-05-07	6	0
2026-05-08	2	0
2026-05-09	3	0
2026-05-10	1	0
2026-05-11	4	0
2026-05-12	0	0
2026-05-13	7	0
2026-05-14	3	0
2026-05-15	10	0
2026-05-16	2	0
2026-05-17	0	0
2026-05-18	1	0
2026-05-19	8	0
2026-05-20	4	0
2026-05-21	0	0
2026-05-22	7	0
2026-05-23	1	0
2026-05-24	3	0
2026-05-25	9	0
2026-05-26	5	0
2026-05-27	1	0
2026-05-28	8	0
2026-05-29	4	0
2026-05-30	0	0
2026-05-31	2	0
2026-06-01	6	0
2026-06-02	2	0
2026-06-03	9	0
2026-06-04	5	0
2026-06-05	1	0
2026-06-06	2	0
2026-06-07	1	0
2026-06-08	3	0
2026-06-09	10	0
2026-06-10	6	0
2026-06-11	2	0
2026-06-12	9	0
2026-06-13	1	0
2026-06-14	0	0
2026-06-15	0	0
2026-06-16	7	0
2026-06-17	3	0
2026-06-18	10	0
2026-06-19	6	0
2026-06-20	0	0
2026-06-21	3	0
2026-06-22	8	0
2026-06-23	4	0
2026-06-24	0	0
2026-06-25	7	0
2026-06-26	3	0
2026-06-27	3	0
2026-06-28	2	0
2026-06-29	5	0
2026-06-30	1	0
2026-07-01	8	0
2026-07-02	4	0
2026-07-03	0	0
2026-07-04	2	0
2026-07-05	1	0
2026-07-06	2	0
2026-07-07	9	0
2026-07-08	5	0
2026-07-09	1	0
2026-07-10	8	0
2026-07-11	1	0
2026-07-12	0	0
2026-07-13	10	0
2026-07-14	6	0
2026-07-15	2	0
2026-07-16	9	0
2026-07-17	5	0
2026-07-18	0	0
2026-07-19	2	0
2026-07-20	7	0
2026-07-21	3	0
2026-07-22	10	0
2026-07-23	6	0
2026-07-24	2	0
2026-07-25	3	0
2026-07-26	1	0
2026-07-27	4	0
2026-07-28	0	0
2026-07-29	7	0
2026-07-30	3	0
2026-07-31	10	0
2026-08-01	2	0
2026-08-02	0	0
2026-08-03	1	0
2026-08-04	8	0
2026-08-05	4	0
2026-08-06	0	0
2026-08-07	7	0
2026-08-08	1	0
2026-08-09	3	0
2026-08-10	9	0
2026-08-11	5	0
2026-08-12	1	0
2026-08-13	8	0
2026-08-14	4	0
2026-08-15	0	0
2026-08-16	2	0
2026-08-17	6	0
2026-08-18	2	0
2026-08-19	9	0
2026-08-20	5	0
2026-08-21	1	0
2026-08-22	2	0
2026-08-23	1	0
2026-08-24	3	0
2026-08-25	10	0
2026-08-26	6	0
2026-08-27	2	0
2026-08-28	9	0
2026-08-29	1	0
2026-08-30	0	0
2026-08-31	0	0
2026-09-01	7	0
2026-09-02	3	0
2026-09-03	10	0
2026-09-04	6	0
2026-09-05	0	0
2026-09-06	3	0
2026-09-07	8	0
2026-09-08	4	0
2026-09-09	0	0
2026-09-10	7	0
2026-09-11	3	0
2026-09-12	3	0
2026-09-13	2	0
2026-09-14	5	0
2026-09-15	1	0
2026-09-16	8	0
2026-09-17	4	0
2026-09-18	0	0
2026-09-19	2	0
2026-09-20	1	0
2026-09-21	2	0
2026-09-22	9	0
2026-09-23	5	0
2026-09-24	1	0
2026-09-25	8	0
2026-09-26	1	0
2026-09-27	0	0

One cell per day, a column per week.

Flows · 2

Quantities moving between categories: Sankey bands and a chord ring.

SankeyChart code →

Visitor flow
flow	value
Search → Visit	48
Social → Visit	27
Email → Visit	15
Visit → Signup	42
Visit → Bounce	48
Signup → Paid	18

Flow bands between layered nodes.

ChordRing code →

Navigation between sections
flow	value
Home → Shop	42
Home → Blog	28
Blog → Shop	16
Shop → Cart	35
Cart → Shop	12
Blog → Home	9
Help → Cart	7
Shop → Help	11

Directed flows between categories around a circle.

Radial · 11

Everything drawn around a centre, from donuts and gauges to wind roses, volvelles and orbits.

DonutChart code →

Monthly budget
name	value	share
Rent	38	38%
Food	22	22%
Savings	15	15%
Transport	14	14%
Leisure	11	11%

Sectors ∝ value around a central readout.

RadarChart code →

Car profile
subject	value
Speed	8
Range	6
Comfort	7
Safety	9
Cost	4
Style	6

One spoke per subject, a closed polygon of values.

PolarBarChart code →

Rainfall by month
name	value
Jan	32
Feb	28
Mar	41
Apr	47
May	55
Jun	61
Jul	66
Aug	63
Sep	52
Oct	44
Nov	37
Dec	49

360° bars out from a hole, length ∝ value.

RadialArcGroup code →

Sales by channel
name	value
Direct	84
Partners	62
Online	47
Events	23

Concentric 180° tracks, sweep ∝ value / the largest.

RadialRings code →

Daily activity
name	value
Move	82
Exercise	64
Stand	100

Concentric progress rings, sweep ∝ value in 0-100.

GaugeArc code →

Capacity
measure	value
Capacity used	72%

A 240° arc swept to a percent.

MeterChart code →

Server load
measure	value
Load	64%

A semicircular meter with a needle at a percent.

CoxcombChart code →

Visits by weekday
name	value
Mon	42
Tue	35
Wed	31
Thu	38
Fri	27
Sat	12
Sun	9

Equal angles, sector **area** ∝ value.

WindRose code →

Wind, Des Moines, March 2024
direction	share	< 5	5–10	10–15	15–20	≥ 20
N	11%	1%	5%	4%	0%	0%
NNE	7%	1%	3%	2%	0%	0%
NE	4%	0%	2%	1%	0%	0%
ENE	4%	1%	3%	1%	0%	0%
E	13%	0%	7%	5%	0%	0%
ESE	5%	0%	2%	3%	0%	0%
SE	4%	0%	1%	2%	1%	0%
SSE	6%	0%	3%	1%	1%	0%
S	7%	0%	2%	2%	1%	1%
SSW	5%	0%	1%	3%	0%	1%
SW	3%	0%	1%	1%	1%	0%
WSW	2%	0%	1%	1%	0%	0%
W	3%	1%	1%	1%	0%	0%
WNW	6%	0%	1%	2%	1%	1%
NW	11%	0%	3%	4%	3%	1%
NNW	6%	0%	3%	3%	1%	0%

Observations of (bearing, speed) binned by compass sector and speed.

VolvelleChart code →

Duty rota
ring	segment	under the index
Day	Mon	no
Day	Tue	no
Day	Wed	no
Day	Thu	no
Day	Fri	no
Day	Sat	yes
Day	Sun	no
Shift	Early	no
Shift	Late	no
Shift	Night	yes
Team	Atlas	no
Team	Borealis	no
Team	Cygnus	no
Team	Draco	no
Team	Eridanus	yes

Concentric categorical rings read against one index.

OrbitChart code →

Seasonal peaks
orbit	period	value
2023	0.08	12
2023	0.33	30
2023	0.61	18
2023	0.9	24
2024	0.12	20
2024	0.4	42
2024	0.66	15
2024	0.87	33
2025	0.05	26
2025	0.29	38
2025	0.55	50
2025	0.81	21

Nested elliptical orbits with markers along them.

Distributions & comparisons · 14

New in 0.6. Statistics derived in the core (bins, quartiles, densities, ranks) and the charts that compare two values, two years or a whole field of them.

HistogramChart code →

Reading time
minutes	count
0–2	14
2–4	52
4–6	57
6–8	33
8–10	29
10–12	22
12–14	11
14–16	9
16–18	4
18–20	3
20–22	3
22–24	1
24–26	0
26–28	2

Raw observations binned in the core.

EcdfChart code →

Reading time by device
minutes	desktop	phone
1	1.1%	2.6%
1.5	4.5%	6.6%
2	11.4%	11.8%
2.5	13.6%	15.8%
3	17%	25%
3.5	22.7%	30.3%
4	30.7%	38.2%
4.5	35.2%	45.4%
5	40.9%	52%
5.5	43.2%	55.9%
6	48.9%	61.2%
6.5	54.5%	65.1%
7	54.5%	67.1%
7.5	58%	69.1%
8	62.5%	71.7%
8.5	64.8%	75%
9	67%	78.3%
9.5	70.5%	80.9%
10	70.5%	84.2%
10.5	72.7%	86.8%
11	73.9%	89.5%
11.5	73.9%	93.4%
12	78.4%	94.1%
12.5	79.5%	94.7%
13	80.7%	95.4%
13.5	83%	95.4%
14	85.2%	96.1%
14.5	86.4%	96.7%
15	87.5%	97.4%
15.5	88.6%	98%
16.5	90.9%	98%
17	90.9%	99.3%
18	92%	99.3%
18.5	93.2%	99.3%
19.5	94.3%	99.3%
20	95.5%	99.3%
21.5	96.6%	100%
23.5	97.7%	100%
27	98.9%	100%
27.5	100%	100%

The empirical cumulative distribution as a step function.

BoxPlotChart code →

Response time by service
service	n	min	q1	median	q3	max	outliers
Search	60	134	161.75	178.5	189.5	229	—
Checkout	60	116	141	200.5	258.5	311	—
Profile	48	100	113.75	120	128.5	148	246, 250, 287, 290
Reports	36	303	316.25	344.5	367	443	464, 464, 518
Login	24	76	83.75	88	95.75	109	—

Quartiles, median, Tukey whiskers and outliers per group.

ViolinChart code →

Response time by service
service	n	min	q1	median	q3	max
Search	60	134	161.75	178.5	189.5	229
Checkout	60	116	141	200.5	258.5	311
Profile	48	100	113.75	120	128.5	290
Reports	36	303	316.25	344.5	367	518
Login	24	76	83.75	88	95.75	109

A mirrored kernel density per group.

RidgelineChart code →

Response time by service
service	n	median	peak
Search	60	178.5	182.41
Checkout	60	200.5	138.06
Profile	48	120	115.88
Reports	36	344.5	308.09
Login	24	88	86.31

A kernel density per group on overlapping baselines.

BeeswarmChart code →

Reading time per reader
reader	minutes
R001	4
R002	17
R003	3
R004	6.5
R005	3.5
R006	3
R007	4.5
R008	23.5
R009	1
R010	1
R011	6.5
R012	4.5
R013	1.5
R014	7
R015	8.5
R016	3
R017	3
R018	8
R019	3
R020	4
R021	8
R022	6.5
R023	10.5
R024	16.5
R025	3.5
R026	5
R027	8
R028	5
R029	2
R030	1.5
R031	10
R032	4.5
R033	18.5
R034	3.5
R035	3
R036	9.5
R037	11.5
R038	11
R039	4.5
R040	3
R041	4.5
R042	11
R043	4
R044	5
R045	5.5
R046	6
R047	2.5
R048	4
R049	1
R050	1.5
R051	2.5
R052	4
R053	21.5
R054	5
R055	16.5
R056	6
R057	27.5
R058	3.5
R059	1.5
R060	20
R061	6.5
R062	11.5
R063	11
R064	4
R065	2
R066	1.5
R067	6
R068	14
R069	2
R070	4.5
R071	10.5
R072	3.5
R073	7.5
R074	4
R075	3.5
R076	7.5
R077	3
R078	2
R079	6
R080	4
R081	4
R082	4
R083	9.5
R084	13.5
R085	2
R086	2.5
R087	6
R088	12
R089	5
R090	5.5
R091	5
R092	14
R093	5
R094	3
R095	12.5
R096	6.5
R097	14
R098	8.5
R099	3.5
R100	9
R101	10
R102	8.5
R103	8.5
R104	6.5
R105	12
R106	4.5
R107	10.5
R108	8.5
R109	6
R110	9
R111	4
R112	7
R113	4
R114	2.5
R115	11.5
R116	2
R117	21.5
R118	14.5
R119	4.5
R120	8
R121	6.5
R122	5.5
R123	4
R124	9.5
R125	15.5
R126	11
R127	27
R128	1
R129	12
R130	8.5
R131	4
R132	3.5
R133	3
R134	15.5
R135	9
R136	17
R137	5.5
R138	6
R139	2
R140	10.5
R141	2
R142	12.5
R143	4
R144	1.5
R145	9.5
R146	5.5
R147	3.5
R148	11.5
R149	6
R150	4
R151	8
R152	9
R153	13
R154	2
R155	12
R156	1
R157	4.5
R158	2
R159	2
R160	5
R161	4.5
R162	1.5
R163	9.5
R164	6
R165	10
R166	7.5
R167	14.5
R168	5
R169	9.5
R170	3
R171	10.5
R172	8
R173	7.5
R174	4.5
R175	6
R176	1.5
R177	5
R178	2
R179	19.5
R180	3
R181	2.5
R182	5.5
R183	4.5
R184	3.5
R185	2
R186	5.5
R187	5.5
R188	3
R189	2.5
R190	10
R191	9.5
R192	3
R193	3
R194	2.5
R195	3
R196	11
R197	13
R198	10.5
R199	5
R200	6
R201	13.5
R202	6
R203	8.5
R204	7.5
R205	5
R206	3.5
R207	9
R208	5
R209	4.5
R210	7.5
R211	11.5
R212	18
R213	12
R214	2.5
R215	15
R216	9
R217	10
R218	3.5
R219	5
R220	8
R221	6.5
R222	15
R223	6.5
R224	3
R225	4
R226	2
R227	4
R228	8
R229	7
R230	6.5
R231	1.5
R232	9
R233	6
R234	6.5
R235	11.5
R236	5
R237	3.5
R238	4
R239	4.5
R240	4.5

One point per observation, packed without overlap.

LollipopChart code →

Loans by branch
branch	loans
Northgate	2,969
Riverside Commons	2,695
Old Mill	6,096
Harbour View Annex	7,785
Elm Street	3,499
Quarry Hill	7,698
Saint Brigid Reading Rooms	7,279
Westfield	3,294
Lantern Square	7,695
Copper Beech	5,301
Marsh Lane	3,486
Upper Fenwick Community Library	3,917

A stem from the baseline and a head at the value.

DumbbellChart code →

Patients seen, 2024 and 2025
clinic	2024	2025	change
Ashford	59	66	+7
Brook Lane	24	30	+6
Castlegate	33	47	+14
Dunmore	23	16	−7
Eastwick	52	60	+8
Fairholm	28	43	+15
Glenbrook	32	40	+8
Hollins	33	25	−8
Ivybridge	25	31	+6
Juniper Row	25	32	+7

Two values per category joined by a segment.

SlopeChart code →

Patients seen, 2024 to 2025
clinic	2024	2025	change
Ashford	59	66	+7
Brook Lane	24	30	+6
Castlegate	33	47	+14
Dunmore	23	16	−7
Eastwick	52	60	+8
Fairholm	28	43	+15
Glenbrook	32	40	+8
Hollins	33	25	−8
Ivybridge	25	31	+6
Juniper Row	25	32	+7

Two period axes, one segment per category.

BumpChart code →

League rank by season
season	Kestrel	Otter	Lynx	Heron	Badger	Marten
2018	3	5	6	4	1	2
2019	3	5	6	4	1	2
2020	2	5	6	4	1	3
2021	1=	1=	6	5	4	3
2022	2	5	6	4	1	3
2023	1	4	5	6	2	3
2024	2	4	5	6	1	3
2025	2	4	5	6	1	3

The rank of each series at each x.

ErrorBarChart code →

Effect by trial arm
arm	effect	low	high
Arm A	1.61	1.01	2.07
Arm B	0.2	-0.16	1.04
Arm C	1.25	0.35	2.79
Arm D	1.64	0.74	2.26
Arm E	0.45	-0.52	2.54
Arm F	0.34	-0.57	2.41
Arm G	1.03	0.14	1.85
Arm H	1.04	-0.44	2.67

A point estimate with its interval per category.

IntervalChart code →

Crew schedule
task	crew	from	to	length
Signage	North crew	2026-03-15	2026-03-21	6
Grading	North crew	2026-02-17	2026-03-07	18
Signage	North crew	2026-03-09	2026-03-31	22
Drainage	North crew	2026-02-19	2026-02-24	5
Grading	North crew	2026-02-21	2026-03-16	23
Fencing	South crew	2026-02-20	2026-03-05	13
Paving	South crew	2026-01-02	2026-01-16	14
Paving	South crew	2026-03-03	2026-03-09	6
Formwork	South crew	2026-03-06	2026-03-10	4
Lighting	Bridge team	2026-01-26	2026-02-08	13
Drainage	Bridge team	2026-02-26	2026-03-16	18
Fencing	Bridge team	2026-02-04	2026-02-19	15
Grading	Bridge team	2026-03-14	2026-03-31	17
Formwork	Survey	2026-03-22	2026-03-31	9
Signage	Survey	2026-02-21	2026-03-08	15
Grading	Survey	2026-03-17	2026-03-26	9

Floating bars from start to end on lanes.

DivergingBarChart code →

Customer survey
question	Strongly disagree	Disagree	Neutral	Agree	Strongly agree
The site is easy to use	21.6%	26.6%	25.1%	12.1%	14.6%
Prices are fair	19.1%	18.1%	31.2%	21.1%	10.6%
Delivery was on time	20.1%	21.1%	22.6%	15.6%	20.6%
Support solved my issue	18.6%	19.6%	21.6%	20.6%	19.6%
I would recommend it	27.6%	18.1%	25.1%	10.1%	19.1%
The app is reliable	24.6%	16.6%	23.1%	20.1%	15.6%

Ordered levels stacked on both sides of a neutral centre.

ConnectedScatterChart code →

Fare and ridership
year	fare	riders
2012	1.5	39.8
2013	1.62	41.8
2014	1.72	42.7
2015	1.85	44.7
2016	1.97	45.9
2017	2.09	47.6
2018	2.73	53.1
2019	2.42	58.2
2020	1.87	55.9
2021	2.26	48.6
2022	2.7	55.2
2023	2.83	56.3
2024	2.93	58.1
2025	3.05	59.6

An ordered path through x-y points.

Hierarchies & dimensions · 8

New in 0.6. Trees as rectangles, rings and tidy branches, drilled down under your control; parts of a whole, many dimensions at once, and lines and points around a circle.

WaffleChart code →

Household energy
use	kwh	cells	share
Heating	412	41	41%
Water heating	263	26	26%
Appliances	158	16	16%
Lighting	97	10	10%
Cooking	70	7	7%

A unit grid filled in reading order by category.

MarimekkoChart code →

Sales by region
region	Retail	Online	Wholesale	Direct	total
North	115	80	37	67	299, 12%
South	178	133	168	108	587, 24%
East	90	72	21	213	396, 17%
West	257	301	387	171	1,116, 47%

Column width by total, segment height by share.

SquarifiedTreemap code →

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › IT services	8,252, 44.3% of Administration
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals

Nested rectangles, area by value, drillable through `rootId` and `onRootChange`.

SunburstChart code →

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › IT services	8,252, 44.3% of Administration
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals

A hierarchy as rings of arcs, drillable through `rootId` and `onRootChange`.

TreeChart code →

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Administration › IT services	8,252, 44.3% of Administration

A tidy node-link tree.

ParallelCoordinatesChart code →

Bicycles
model	mass	gears	price	range	rating
Model 01	13.9	15	3,434	125	1.5
Model 02	8.6	22	3,897	29	3.8
Model 03	19.5	13	3,202	62	2.9
Model 04	12.7	15	2,760	28	2.2
Model 05	22.8	21	485	39	2.9
Model 06	20.1	22	1,178	60	3.1
Model 07	22.5	8	3,952	40	4.8
Model 08	22.6	16	1,407	133	1.7
Model 09	18.3	18	2,982	126	3.4
Model 10	19.1	11	2,060	24	2.1
Model 11	13.9	9	2,430	78	2.5
Model 12	18.4	11	1,046	42	1.3
Model 13	9	5	343	55	4
Model 14	16.7	13	3,837	36	4
Model 15	20.8	18	3,644	107	4.8
Model 16	16.2	14	4,053	28	1.5
Model 17	15.9	13	1,664	114	1.3
Model 18	10.4	4	3,600	75	1.9
Model 19	20.6	14	1,052	124	3.5
Model 20	17	4	2,367	50	3.5
Model 21	21	6	2,545	96	3.1
Model 22	20.1	22	3,674	115	3.2
Model 23	18.7	13	2,686	108	1.8
Model 24	21.4	7	863	60	2.6
Model 25	12.8	12	4,163	95	2.4
Model 26	22.9	3	3,148	135	3.5
Model 27	12.6	12	3,104	124	4.2
Model 28	18.2	10	2,765	131	2.3
Model 29	18.3	8	922	106	3.9
Model 30	9	9	886	32	2

One polyline per row across parallel axes.

PolarLineChart code →

Rain by month
month	rain
0	82
1	62
2	54
3	45
4	57
5	38
6	27
7	30
8	48
9	71
10	91
11	86

A line over angle and radius.

PolarScatterChart code →

Sightings
bearing	distance
28	2.5
149.6	1.4
229.3	19.6
15.5	1.6
130.5	16.6
250.7	7
348.7	2.6
115.9	16.3
242.6	3.8
39.1	2.3
136.4	1.6
243.8	1.7
26.8	2.2
132.6	4.6
260.3	6.5
0.3	13.4
130	2
241.4	13.4
10.2	3
121.9	1.4
279.5	8.1
28.3	4.4
116.7	3.5
201.4	2.9
7.7	1.7
106.7	1
279.8	5.8
348.5	4.8
136.8	8
259.4	12.2
344.1	3.5
139.9	3.9
241.5	11.7
359.7	5.3
117.4	5.3
272	1.9
355.2	5.2
103.6	2
271.4	3.5
25	6.3
120.3	1.9
277.2	8
13.8	11.4
138.6	2.5
255.4	4.1
14.4	3.4
135.8	4.2
242.7	11.6
20.5	2.4
113.3	1.2
248.6	12.8
3.8	8
129.6	1.3
214.4	3.8
20.8	3.4
135.3	3.3
244.8	1.4
2.8	3.1
128.1	0.9
219.5	4.2
3.5	5.4
138.4	17.1
246.4	3.2
345.8	6.3
141.1	3.4
262.5	6.6
356.7	4.8
154.3	3.5
237.3	2.6
23.5	6.1
136.7	3.4
242.9	2.3
0.8	4.1
94.1	6.5
253.1	1.1
346.2	6.7
137.3	2.6
258	7.2
1.5	3.4
140.7	4.5
226.8	4
4.2	1.2
114.4	5
247.3	3.9
34.7	14.8
125.9	6
231.7	12
31.6	3
131.9	3.1
242	3.9
5.2	1.5
130.1	13.1
260.9	2.5
334.1	7.7
159.8	13.9
252.2	12.1
18.4	5.3
115	6.6
259.5	0.7
357.6	4.6
157.5	3.7
224.4	2.9
23.9	1.9
127.8	10.5
221.4	1.8
345.5	2.5
110.7	0.9
253.7	2.6
9.8	14.9
125.6	3.4
264.6	3.1
333	1.4
132.9	9
230.3	1.9
4.4	8.2
122.8	3.2
277.7	1.2
3.6	1.4
133.9	3.1
231.6	1.1
8.6	3.4
112.6	9.2
250.7	2.4
4.5	8.1
125.2	1
246.6	3.5
338.9	5.4
121.7	6.3
273.2	3
1.9	10.2
122.1	5.7
258.2	3.9
10.1	5.7
163.7	10.7
222.6	3.5
329.1	3.5
160.5	5.1
228.5	3.9
356	1.9
94.4	1.5
255.2	7.6
347.7	2.5
144.5	1.7
258.2	4.4
19.8	12
151.7	4.4
266	2.8
0.9	5.1
145.4	3.5
250.4	2.5

Points over angle and radius.

Fields & networks · 5

New in 0.6. Point clouds counted in bins or drawn as contours, triangulations, vector fields and a seeded force-laid network.

DensityBinChart code →

Point density
x, y	count

X-y points counted in two-dimensional bins.

ContourChart code →

Point density
density	band

Iso-lines and filled bands of a density or a grid.

DelaunayChart code →

Stations
label	x	y	degree

The triangulation of x-y points, or its Voronoi cells.

VectorFieldChart code →

Wind field
x, y	u	v	magnitude
0, 13	-0.85	-1.25	1.51
1, 13	-0.97	-1.26	1.59
2, 13	-1.1	-1.27	1.68
3, 13	-1.24	-1.24	1.76
4, 13	-1.41	-1.19	1.84
5, 13	-1.58	-1.09	1.92
6, 13	-1.75	-0.94	1.98
7, 13	-1.9	-0.73	2.03
8, 13	-2.02	-0.47	2.07
9, 13	-2.08	-0.16	2.09
10, 13	-2.08	0.16	2.09
11, 13	-2.02	0.47	2.07
12, 13	-1.9	0.73	2.03
13, 13	-1.75	0.94	1.98
14, 13	-1.58	1.09	1.92
15, 13	-1.41	1.19	1.84
16, 13	-1.24	1.24	1.76
17, 13	-1.1	1.27	1.68
18, 13	-0.97	1.26	1.59
19, 13	-0.85	1.25	1.51
0, 12	-0.78	-1.35	1.56
1, 12	-0.9	-1.39	1.65
2, 12	-1.03	-1.41	1.75
3, 12	-1.19	-1.41	1.84
4, 12	-1.37	-1.37	1.93
5, 12	-1.56	-1.28	2.02
6, 12	-1.76	-1.12	2.09
7, 12	-1.95	-0.89	2.14
8, 12	-2.1	-0.57	2.17
9, 12	-2.18	-0.2	2.19
10, 12	-2.18	0.2	2.19
11, 12	-2.1	0.57	2.17
12, 12	-1.95	0.89	2.14
13, 12	-1.76	1.12	2.09
14, 12	-1.56	1.28	2.02
15, 12	-1.37	1.37	1.93
16, 12	-1.19	1.41	1.84
17, 12	-1.03	1.41	1.75
18, 12	-0.9	1.39	1.65
19, 12	-0.78	1.35	1.56
0, 11	-0.69	-1.46	1.61
1, 11	-0.8	-1.51	1.71
2, 11	-0.93	-1.55	1.81
3, 11	-1.09	-1.58	1.92
4, 11	-1.28	-1.56	2.02
5, 11	-1.49	-1.49	2.1
6, 11	-1.71	-1.33	2.17
7, 11	-1.94	-1.08	2.21
8, 11	-2.12	-0.71	2.23
9, 11	-2.22	-0.25	2.24
10, 11	-2.22	0.25	2.24
11, 11	-2.12	0.71	2.23
12, 11	-1.94	1.08	2.21
13, 11	-1.71	1.33	2.17
14, 11	-1.49	1.49	2.1
15, 11	-1.28	1.56	2.02
16, 11	-1.09	1.58	1.92
17, 11	-0.93	1.55	1.81
18, 11	-0.8	1.51	1.71
19, 11	-0.69	1.46	1.61
0, 10	-0.57	-1.55	1.65
1, 10	-0.67	-1.63	1.76
2, 10	-0.79	-1.7	1.87
3, 10	-0.94	-1.75	1.98
4, 10	-1.12	-1.76	2.09
5, 10	-1.33	-1.71	2.17
6, 10	-1.57	-1.57	2.22
7, 10	-1.82	-1.3	2.23
8, 10	-2.03	-0.87	2.21
9, 10	-2.15	-0.31	2.18
10, 10	-2.15	0.31	2.18
11, 10	-2.03	0.87	2.21
12, 10	-1.82	1.3	2.23
13, 10	-1.57	1.57	2.22
14, 10	-1.33	1.71	2.17
15, 10	-1.12	1.76	2.09
16, 10	-0.94	1.75	1.98
17, 10	-0.79	1.7	1.87
18, 10	-0.67	1.63	1.76
19, 10	-0.57	1.55	1.65
0, 9	-0.43	-1.63	1.69
1, 9	-0.51	-1.73	1.8
2, 9	-0.61	-1.82	1.92
3, 9	-0.73	-1.9	2.03
4, 9	-0.89	-1.95	2.14
5, 9	-1.08	-1.94	2.21
6, 9	-1.3	-1.82	2.23
7, 9	-1.54	-1.54	2.18
8, 9	-1.75	-1.05	2.05
9, 9	-1.89	-0.38	1.92
10, 9	-1.89	0.38	1.92
11, 9	-1.75	1.05	2.05
12, 9	-1.54	1.54	2.18
13, 9	-1.3	1.82	2.23
14, 9	-1.08	1.94	2.21
15, 9	-0.89	1.95	2.14
16, 9	-0.73	1.9	2.03
17, 9	-0.61	1.82	1.92
18, 9	-0.51	1.73	1.8
19, 9	-0.43	1.63	1.69
0, 8	-0.27	-1.69	1.71
1, 8	-0.32	-1.8	1.83
2, 8	-0.38	-1.91	1.95
3, 8	-0.47	-2.02	2.07
4, 8	-0.57	-2.1	2.17
5, 8	-0.71	-2.12	2.23
6, 8	-0.87	-2.03	2.21
7, 8	-1.05	-1.75	2.05
8, 8	-1.22	-1.22	1.73
9, 8	-1.33	-0.44	1.41
10, 8	-1.33	0.44	1.41
11, 8	-1.22	1.22	1.73
12, 8	-1.05	1.75	2.05
13, 8	-0.87	2.03	2.21
14, 8	-0.71	2.12	2.23
15, 8	-0.57	2.1	2.17
16, 8	-0.47	2.02	2.07
17, 8	-0.38	1.91	1.95
18, 8	-0.32	1.8	1.83
19, 8	-0.27	1.69	1.71
0, 7	-0.09	-1.72	1.72
1, 7	-0.11	-1.84	1.84
2, 7	-0.13	-1.96	1.97
3, 7	-0.16	-2.08	2.09
4, 7	-0.2	-2.18	2.19
5, 7	-0.25	-2.22	2.24
6, 7	-0.31	-2.15	2.18
7, 7	-0.38	-1.89	1.92
8, 7	-0.44	-1.33	1.41
9, 7	-0.49	-0.49	0.69
10, 7	-0.49	0.49	0.69
11, 7	-0.44	1.33	1.41
12, 7	-0.38	1.89	1.92
13, 7	-0.31	2.15	2.18
14, 7	-0.25	2.22	2.24
15, 7	-0.2	2.18	2.19
16, 7	-0.16	2.08	2.09
17, 7	-0.13	1.96	1.97
18, 7	-0.11	1.84	1.84
19, 7	-0.09	1.72	1.72
0, 6	0.09	-1.72	1.72
1, 6	0.11	-1.84	1.84
2, 6	0.13	-1.96	1.97
3, 6	0.16	-2.08	2.09
4, 6	0.2	-2.18	2.19
5, 6	0.25	-2.22	2.24
6, 6	0.31	-2.15	2.18
7, 6	0.38	-1.89	1.92
8, 6	0.44	-1.33	1.41
9, 6	0.49	-0.49	0.69
10, 6	0.49	0.49	0.69
11, 6	0.44	1.33	1.41
12, 6	0.38	1.89	1.92
13, 6	0.31	2.15	2.18
14, 6	0.25	2.22	2.24
15, 6	0.2	2.18	2.19
16, 6	0.16	2.08	2.09
17, 6	0.13	1.96	1.97
18, 6	0.11	1.84	1.84
19, 6	0.09	1.72	1.72
0, 5	0.27	-1.69	1.71
1, 5	0.32	-1.8	1.83
2, 5	0.38	-1.91	1.95
3, 5	0.47	-2.02	2.07
4, 5	0.57	-2.1	2.17
5, 5	0.71	-2.12	2.23
6, 5	0.87	-2.03	2.21
7, 5	1.05	-1.75	2.05
8, 5	1.22	-1.22	1.73
9, 5	1.33	-0.44	1.41
10, 5	1.33	0.44	1.41
11, 5	1.22	1.22	1.73
12, 5	1.05	1.75	2.05
13, 5	0.87	2.03	2.21
14, 5	0.71	2.12	2.23
15, 5	0.57	2.1	2.17
16, 5	0.47	2.02	2.07
17, 5	0.38	1.91	1.95
18, 5	0.32	1.8	1.83
19, 5	0.27	1.69	1.71
0, 4	0.43	-1.63	1.69
1, 4	0.51	-1.73	1.8
2, 4	0.61	-1.82	1.92
3, 4	0.73	-1.9	2.03
4, 4	0.89	-1.95	2.14
5, 4	1.08	-1.94	2.21
6, 4	1.3	-1.82	2.23
7, 4	1.54	-1.54	2.18
8, 4	1.75	-1.05	2.05
9, 4	1.89	-0.38	1.92
10, 4	1.89	0.38	1.92
11, 4	1.75	1.05	2.05
12, 4	1.54	1.54	2.18
13, 4	1.3	1.82	2.23
14, 4	1.08	1.94	2.21
15, 4	0.89	1.95	2.14
16, 4	0.73	1.9	2.03
17, 4	0.61	1.82	1.92
18, 4	0.51	1.73	1.8
19, 4	0.43	1.63	1.69
0, 3	0.57	-1.55	1.65
1, 3	0.67	-1.63	1.76
2, 3	0.79	-1.7	1.87
3, 3	0.94	-1.75	1.98
4, 3	1.12	-1.76	2.09
5, 3	1.33	-1.71	2.17
6, 3	1.57	-1.57	2.22
7, 3	1.82	-1.3	2.23
8, 3	2.03	-0.87	2.21
9, 3	2.15	-0.31	2.18
10, 3	2.15	0.31	2.18
11, 3	2.03	0.87	2.21
12, 3	1.82	1.3	2.23
13, 3	1.57	1.57	2.22
14, 3	1.33	1.71	2.17
15, 3	1.12	1.76	2.09
16, 3	0.94	1.75	1.98
17, 3	0.79	1.7	1.87
18, 3	0.67	1.63	1.76
19, 3	0.57	1.55	1.65
0, 2	0.69	-1.46	1.61
1, 2	0.8	-1.51	1.71
2, 2	0.93	-1.55	1.81
3, 2	1.09	-1.58	1.92
4, 2	1.28	-1.56	2.02
5, 2	1.49	-1.49	2.1
6, 2	1.71	-1.33	2.17
7, 2	1.94	-1.08	2.21
8, 2	2.12	-0.71	2.23
9, 2	2.22	-0.25	2.24
10, 2	2.22	0.25	2.24
11, 2	2.12	0.71	2.23
12, 2	1.94	1.08	2.21
13, 2	1.71	1.33	2.17
14, 2	1.49	1.49	2.1
15, 2	1.28	1.56	2.02
16, 2	1.09	1.58	1.92
17, 2	0.93	1.55	1.81
18, 2	0.8	1.51	1.71
19, 2	0.69	1.46	1.61
0, 1	0.78	-1.35	1.56
1, 1	0.9	-1.39	1.65
2, 1	1.03	-1.41	1.75
3, 1	1.19	-1.41	1.84
4, 1	1.37	-1.37	1.93
5, 1	1.56	-1.28	2.02
6, 1	1.76	-1.12	2.09
7, 1	1.95	-0.89	2.14
8, 1	2.1	-0.57	2.17
9, 1	2.18	-0.2	2.19
10, 1	2.18	0.2	2.19
11, 1	2.1	0.57	2.17
12, 1	1.95	0.89	2.14
13, 1	1.76	1.12	2.09
14, 1	1.56	1.28	2.02
15, 1	1.37	1.37	1.93
16, 1	1.19	1.41	1.84
17, 1	1.03	1.41	1.75
18, 1	0.9	1.39	1.65
19, 1	0.78	1.35	1.56
0, 0	0.85	-1.25	1.51
1, 0	0.97	-1.26	1.59
2, 0	1.1	-1.27	1.68
3, 0	1.24	-1.24	1.76
4, 0	1.41	-1.19	1.84
5, 0	1.58	-1.09	1.92
6, 0	1.75	-0.94	1.98
7, 0	1.9	-0.73	2.03
8, 0	2.02	-0.47	2.07
9, 0	2.08	-0.16	2.09
10, 0	2.08	0.16	2.09
11, 0	2.02	0.47	2.07
12, 0	1.9	0.73	2.03
13, 0	1.75	0.94	1.98
14, 0	1.58	1.09	1.92
15, 0	1.41	1.19	1.84
16, 0	1.24	1.24	1.76
17, 0	1.1	1.27	1.68
18, 0	0.97	1.26	1.59
19, 0	0.85	1.25	1.51

An arrow per grid point.

NetworkChart code →

Library network
node	group	degree	weight
Archive 1	Archive	3
Archive 2	Archive	9
Archive 3	Archive	5
Archive 4	Archive	8
Archive 5	Archive	5
Archive 6	Archive	6
Archive 7	Archive	6
Archive 8	Archive	3
Archive 9	Archive	5
Archive 10	Archive	6
Studio 1	Studio	3
Studio 2	Studio	4
Studio 3	Studio	3
Studio 4	Studio	3
Studio 5	Studio	7
Studio 6	Studio	4
Studio 7	Studio	4
Studio 8	Studio	4
Studio 9	Studio	6
Studio 10	Studio	3
Lab 1	Lab	5
Lab 2	Lab	5
Lab 3	Lab	1
Lab 4	Lab	2
Lab 5	Lab	2
Lab 6	Lab	4
Lab 7	Lab	2
Lab 8	Lab	4
Lab 9	Lab	4
Lab 10	Lab	2
Press 1	Press	6
Press 2	Press	4
Press 3	Press	10
Press 4	Press	6
Press 5	Press	1
Press 6	Press	5
Press 7	Press	6
Press 8	Press	7
Press 9	Press	3
Press 10	Press	4
Studio 5 – Studio 2			5
Press 10 – Archive 6			1
Press 1 – Press 7			5
Studio 6 – Studio 4			1
Press 3 – Lab 6			1
Studio 8 – Studio 5			5
Archive 5 – Archive 7			2
Press 2 – Press 1			3
Archive 4 – Archive 2			5
Lab 8 – Studio 8			2
Archive 4 – Archive 1			1
Press 3 – Studio 9			5
Lab 1 – Studio 5			5
Studio 7 – Studio 9			4
Press 1 – Press 4			5
Archive 2 – Archive 9			1
Archive 3 – Archive 5			2
Press 10 – Press 8			3
Press 4 – Archive 10			1
Press 4 – Press 10			2
Lab 10 – Studio 9			4
Lab 6 – Lab 2			4
Archive 1 – Studio 3			4
Lab 9 – Lab 2			2
Press 3 – Press 6			2
Press 6 – Press 1			4
Studio 8 – Studio 2			4
Archive 9 – Archive 8			3
Lab 2 – Lab 1			3
Archive 3 – Studio 10			3
Press 9 – Press 2			3
Press 4 – Press 7			1
Studio 6 – Studio 5			4
Studio 3 – Studio 5			5
Archive 10 – Archive 4			3
Studio 1 – Studio 9			1
Archive 2 – Archive 7			3
Studio 8 – Studio 9			4
Archive 6 – Archive 4			1
Press 3 – Press 1			2
Studio 7 – Studio 5			4
Archive 2 – Archive 5			1
Press 8 – Press 1			4
Archive 2 – Archive 1			2
Studio 6 – Studio 7			5
Archive 4 – Press 8			3
Studio 4 – Studio 1			1
Press 3 – Archive 10			2
Archive 3 – Archive 6			1
Studio 1 – Studio 2			4
Archive 5 – Archive 10			4
Lab 7 – Lab 4			1
Archive 4 – Archive 5			2
Archive 7 – Studio 4			3
Press 7 – Lab 8			3
Press 2 – Press 3			3
Lab 9 – Lab 4			5
Press 8 – Archive 6			1
Lab 6 – Lab 9			2
Press 9 – Press 8			3
Studio 10 – Lab 5			3
Press 8 – Press 3			3
Studio 9 – Studio 10			4
Lab 1 – Lab 3			5
Archive 3 – Archive 2			4
Lab 6 – Lab 5			3
Lab 2 – Studio 7			2
Archive 8 – Archive 4			1
Press 4 – Archive 3			2
Lab 8 – Archive 7			4
Press 5 – Press 3			5
Press 6 – Press 9			2
Press 7 – Press 10			3
Archive 6 – Archive 2			4
Archive 9 – Archive 4			1
Lab 1 – Archive 10			1
Press 8 – Press 6			4
Archive 2 – Archive 10			5
Lab 2 – Lab 10			5
Archive 8 – Archive 7			2
Press 3 – Studio 6			2
Press 4 – Press 6			3
Lab 8 – Studio 5			4
Studio 2 – Studio 3			3
Lab 9 – Lab 1			4
Archive 9 – Archive 6			5
Press 7 – Press 3			2
Press 7 – Press 2			1
Archive 7 – Archive 9			5
Lab 7 – Archive 2			4

A node-link graph.

Composed components · 21

New in 0.8.0: components built on silverpoint's own frames, tones and heightening, in React, Vue, Angular and Reflex. The composed ones are native markup; the overlays open from a trigger you write. Their code in four frameworks →

Composed components · native markup

Native HTML underneath (a <table>, <details>, <textarea>…) or a few lines of JS; drawn with the ground's own hand-inked frames, hatched tones and heightening.

SpSurface code →

The root contract on any element: the ground's class, a hand-drawn frame (control, pill, box, card or round) and a hatched tone (1–4, or a state such as selected or primary).

SpGlyph code →

One exact 16×16 mark of UI_GLYPHS — tick, cross, chevrons, arrows, sort marks… — stroked with the text colour, never inked.

SpTable code →

Card-framed table: small-caps header, tabular figures, hatched striping, sortable headers with aria-sort.

SpPagination code →

Previous and next, first and last, a window around the current page (heightened); on_change(page).

SpBreadcrumb code →

A <nav> of links separated by hairline slashes; the last item is the current page.

SpAvatar · SpAvatarGroup code →

A portrait or the person's initials in a drawn round (or square) frame; groups overlap.

SpStatistic code →

A small-caps title, a large tabular figure, prefix and suffix, and a trend arrow.

SpDescriptions code →

A label–value grid (a <dl>), optionally card-framed; one column on narrow containers.

SpTimelineList code →

A vertical list of events: done (hatched), current (heightened), pending and error.

SpCollapse · SpCollapseItem code →

Panels that open and close, on native <details>; accordion=True keeps one open.

SpEmpty code →

The empty state: a lightly hatched, drawn tray, a line of italic text and actions.

SpResult code →

The outcome of an operation: a drawn round mark (tick, info, warning, cross), title and subtitle.

SpTextarea code →

Multi-line text on the SpInput contract: drawn frame, italic placeholder, counter and message.

SpInputNumber code →

A number field with exact − and + steppers, clamped to min and max; on_change receives the number.

Overlays

Opened by a trigger you write, on the platform's <dialog> and Popover API, in React, Vue, Angular and Reflex alike. They render in place, in the top layer, so they read the provider's ground and palette; sp_trigger does not, so give it those directly.

SpModal code →

A dialog on a card frame over a hatched backdrop: focus trapped, Escape closes it.

SpDrawer code →

The same dialog, sliding in from any edge (side='end', the default, 'start', 'top' or 'bottom').

SpPopover code →

Anchored content on a card frame, placed by the core on the Popover API; Escape or a click outside closes it.

SpTooltip code →

A short label shown on hover or keyboard focus, after a delay.

SpSelect code →

A single choice with typeahead: the chosen option ticked, the highlighted one heightened.

SpDropdownMenu code →

Commands with shortcuts, separators, labels and a danger item; on_select(key).

SpToast · SpToaster code →

Notices that stack in a corner and dismiss themselves; error and warning are announced assertively.

Timeline

New in 0.8.0: Knight Lab's TimelineJS drawn in silverpoint, on the gallery's ground, mode and palette. SpTimeline →

Every chart and component, drawn live

Lines · 4

Bars · 8

Areas · 3

Points & grids · 5

Flows · 2

Radial · 11

Distributions & comparisons · 14

Hierarchies & dimensions · 8

Fields & networks · 5

UI components · 17

Actions

Data entry

Navigation

Data display

Feedback

Composed components · 21

Composed components · native markup

The release

Published

Overlays

Settings

Timeline

hour	hits	baseline
00	18	22
02	14	18
04	11	15
06	16	17
08	34	30
10	58	48
12	71	60
14	66	62
16	74	64
18	88	70
20	62	55
22	41	40

point	value
1	118
2	124
3	121
4	132
5	140
6	136
7	129
8	142
9	151
10	147
11	155
12	162
13	158
14	171

time	open	high	low	close
Mon	102	108	99	106
Tue	106	109	101	103
Wed	103	105	97	99
Thu	99	104	96	103
Fri	103	111	102	110
Mon	110	114	107	108
Tue	108	110	104	109
Wed	109	116	108	115

label	00	04	08	12	16	20
Mon	12	34	58	71	66	40
Tue	18	42	77	88	70	35
Wed	9	38	64	93	81	47
Thu	15	29	55	68	59	31
Fri	6	21	43	49	37	14

name	value
Jan	32
Feb	28
Mar	41
Apr	47
May	55
Jun	61
Jul	66
Aug	63
Sep	52
Oct	44
Nov	37
Dec	49

direction	share	< 5	5–10	10–15	15–20	≥ 20
N	11%	1%	5%	4%	0%	0%
NNE	7%	1%	3%	2%	0%	0%
NE	4%	0%	2%	1%	0%	0%
ENE	4%	1%	3%	1%	0%	0%
E	13%	0%	7%	5%	0%	0%
ESE	5%	0%	2%	3%	0%	0%
SE	4%	0%	1%	2%	1%	0%
SSE	6%	0%	3%	1%	1%	0%
S	7%	0%	2%	2%	1%	1%
SSW	5%	0%	1%	3%	0%	1%
SW	3%	0%	1%	1%	1%	0%
WSW	2%	0%	1%	1%	0%	0%
W	3%	1%	1%	1%	0%	0%
WNW	6%	0%	1%	2%	1%	1%
NW	11%	0%	3%	4%	3%	1%
NNW	6%	0%	3%	3%	1%	0%

	Region
Catalog	South	91	6
Archive	North	72	3
Search	North	66	2
Billing	East	58	1
Delivery	West	44	0

hour	hits	baseline
00	18	22
02	14	18
04	11	15
06	16	17
08	34	30
10	58	48
12	71	60
14	66	62
16	74	64
18	88	70
20	62	55
22	41	40

point	value
1	118
2	124
3	121
4	132
5	140
6	136
7	129
8	142
9	151
10	147
11	155
12	162
13	158
14	171

time	open	high	low	close
Mon	102	108	99	106
Tue	106	109	101	103
Wed	103	105	97	99
Thu	99	104	96	103
Fri	103	111	102	110
Mon	110	114	107	108
Tue	108	110	104	109
Wed	109	116	108	115

label	00	04	08	12	16	20
Mon	12	34	58	71	66	40
Tue	18	42	77	88	70	35
Wed	9	38	64	93	81	47
Thu	15	29	55	68	59	31
Fri	6	21	43	49	37	14

name	value
Jan	32
Feb	28
Mar	41
Apr	47
May	55
Jun	61
Jul	66
Aug	63
Sep	52
Oct	44
Nov	37
Dec	49

direction	share	< 5	5–10	10–15	15–20	≥ 20
N	11%	1%	5%	4%	0%	0%
NNE	7%	1%	3%	2%	0%	0%
NE	4%	0%	2%	1%	0%	0%
ENE	4%	1%	3%	1%	0%	0%
E	13%	0%	7%	5%	0%	0%
ESE	5%	0%	2%	3%	0%	0%
SE	4%	0%	1%	2%	1%	0%
SSE	6%	0%	3%	1%	1%	0%
S	7%	0%	2%	2%	1%	1%
SSW	5%	0%	1%	3%	0%	1%
SW	3%	0%	1%	1%	1%	0%
WSW	2%	0%	1%	1%	0%	0%
W	3%	1%	1%	1%	0%	0%
WNW	6%	0%	1%	2%	1%	1%
NW	11%	0%	3%	4%	3%	1%
NNW	6%	0%	3%	3%	1%	0%

hour	hits	baseline
00	18	22
02	14	18
04	11	15
06	16	17
08	34	30
10	58	48
12	71	60
14	66	62
16	74	64
18	88	70
20	62	55
22	41	40

point	value
1	118
2	124
3	121
4	132
5	140
6	136
7	129
8	142
9	151
10	147
11	155
12	162
13	158
14	171

time	open	high	low	close
Mon	102	108	99	106
Tue	106	109	101	103
Wed	103	105	97	99
Thu	99	104	96	103
Fri	103	111	102	110
Mon	110	114	107	108
Tue	108	110	104	109
Wed	109	116	108	115

label	00	04	08	12	16	20
Mon	12	34	58	71	66	40
Tue	18	42	77	88	70	35
Wed	9	38	64	93	81	47
Thu	15	29	55	68	59	31
Fri	6	21	43	49	37	14

name	value
Jan	32
Feb	28
Mar	41
Apr	47
May	55
Jun	61
Jul	66
Aug	63
Sep	52
Oct	44
Nov	37
Dec	49

direction	share	< 5	5–10	10–15	15–20	≥ 20
N	11%	1%	5%	4%	0%	0%
NNE	7%	1%	3%	2%	0%	0%
NE	4%	0%	2%	1%	0%	0%
ENE	4%	1%	3%	1%	0%	0%
E	13%	0%	7%	5%	0%	0%
ESE	5%	0%	2%	3%	0%	0%
SE	4%	0%	1%	2%	1%	0%
SSE	6%	0%	3%	1%	1%	0%
S	7%	0%	2%	2%	1%	1%
SSW	5%	0%	1%	3%	0%	1%
SW	3%	0%	1%	1%	1%	0%
WSW	2%	0%	1%	1%	0%	0%
W	3%	1%	1%	1%	0%	0%
WNW	6%	0%	1%	2%	1%	1%
NW	11%	0%	3%	4%	3%	1%
NNW	6%	0%	3%	3%	1%	0%