Skip to content

Gallery

Charts, drawn before the page was served.

A declarative chart in Vega-Lite's grammar — a list of dicts, a mark, and channels — rendered to SVG by plain Python. Every figure below was drawn when this page was built, so the page carries the picture and no runtime at all. Hover the last one — the tooltips are markup too.

A bar chart, and the whole API

chart(rows, "bar", x=X("month_name", sort=MONTHS), y="average(precipitation)")

Average daily rain (mm)012345JanFebMarAprMayJunJulAugSepOctNovDecmonth_nameaverage(precipitation)

The mark changes, the encoding does not

the same channels as above, with mark="line"

Average daily maximum (°C)0510152025JanFebMarAprMayJunJulAugSepOctNovDecmonth_nameaverage(temp_max)

A colour channel, and the stacking Vega-Lite implies

nothing says `stack`; a bar with a colour channel stacks anyway

020406080100120JanFebMarAprMayJunJulAugSepOctNovDecmonth(date)daysdrizzlerainsunsnowfog

xOffset groups instead of stacking

the same spec with an xOffset channel — and it stops the stacking

050100150200250Q1Q2Q3Q4quarter(date)daysdrizzlerainsunsnowfog

timeUnit carries its own order

the two charts above needed sort=MONTHS; a timeUnit knows a weekday runs Sun–Sat

00.511.522.533.5SunMonTueWedThuFriSatday(date)avg mm

bin: a histogram

the bars fill their bucket rather than being hairlines at its start

0501001500102030daily max °Cdays

transform: filter and calculate

filter "datum.weather === 'rain'", then calculate the daily range

02468JanFebMarAprMayJunJulAugSepOctNovDecmonth(date)avg range °C, rainy days

layer: two marks, one pair of scales

a line and its points, in one hue, because that is one series

01234JanFebMarAprMayJunJulAugSepOctNovDecmonth(date)avg wind m/s

boxplot: five statistics per group

whiskers reach 1.5×IQR; what lies outside is drawn, not hidden

010203040Q1Q2Q3Q4quarter(date)daily max °C

errorbar: how well the mean is known

extent=stderr — narrow. Compare the next one, which is the same data

010203040Q1Q2Q3Q4quarter(date)daily max °C

errorbar: how spread the data is

extent=stdev — the same rows, an order of magnitude wider. They are not the same question

010203040Q1Q2Q3Q4quarter(date)daily max °C

errorband with borders, extent=ci

a bootstrapped 95% interval, seeded so the server and the browser agree

010203040JanFebMarAprMayJunJulAugSepOctNovDecmonth(date)daily max °C

facet: small multiples, on one pair of scales

panels scaled apart look like a comparison and are not one

201202468Q1Q2Q3Q4quarter(date)avg mm2013Q1Q2Q3Q4quarter(date)2014Q1Q2Q3Q4quarter(date)2015Q1Q2Q3Q4quarter(date)

hconcat: different charts, independent scales

so each panel keeps its own axes — without them it cannot be read

0100200300400500600drizzlefograinsnowsunweatherdays0102030400246810windtemp_max

one axis only

a spec may encode just x: the other axis is one slot, with no furniture

010203040every day's maximum, °C

tooltip: hover a point

a <title> inside each mark — the browser's own, and free on a static page

01020304002468date: 2012-01-01 weather: drizzle temp_max: 12.8date: 2012-01-13 weather: sun temp_max: 5date: 2012-01-25 weather: rain temp_max: 8.9date: 2012-02-06 weather: sun temp_max: 16.1date: 2012-02-18 weather: rain temp_max: 6.7date: 2012-03-01 weather: sun temp_max: 6.1date: 2012-03-13 weather: snow temp_max: 5.6date: 2012-03-25 weather: rain temp_max: 13.3date: 2012-04-06 weather: rain temp_max: 11.1date: 2012-04-18 weather: rain temp_max: 13.3date: 2012-04-30 weather: rain temp_max: 12.8date: 2012-05-12 weather: sun temp_max: 24.4date: 2012-05-24 weather: rain temp_max: 17.2date: 2012-06-05 weather: rain temp_max: 13.3date: 2012-06-17 weather: sun temp_max: 18.9date: 2012-06-29 weather: rain temp_max: 21.7date: 2012-07-11 weather: fog temp_max: 27.8date: 2012-07-23 weather: rain temp_max: 18.9date: 2012-08-04 weather: sun temp_max: 33.9date: 2012-08-16 weather: sun temp_max: 34.4date: 2012-08-28 weather: sun temp_max: 22.8date: 2012-09-09 weather: rain temp_max: 18.9date: 2012-09-21 weather: drizzle temp_max: 16.1date: 2012-10-03 weather: sun temp_max: 18.9date: 2012-10-15 weather: rain temp_max: 17.2date: 2012-10-27 weather: rain temp_max: 14.4date: 2012-11-08 weather: rain temp_max: 10date: 2012-11-20 weather: rain temp_max: 11.1date: 2012-12-02 weather: rain temp_max: 8.3date: 2012-12-14 weather: rain temp_max: 6.1date: 2012-12-26 weather: rain temp_max: 6.7date: 2013-01-07 weather: rain temp_max: 10date: 2013-01-19 weather: drizzle temp_max: 1.1date: 2013-01-31 weather: rain temp_max: 9.4date: 2013-02-12 weather: rain temp_max: 11.1date: 2013-02-24 weather: rain temp_max: 8.9date: 2013-03-08 weather: drizzle temp_max: 11.7date: 2013-03-20 weather: rain temp_max: 11.1date: 2013-04-01 weather: sun temp_max: 17.2date: 2013-04-13 weather: rain temp_max: 10.6date: 2013-04-25 weather: sun temp_max: 21.7date: 2013-05-07 weather: sun temp_max: 20.6date: 2013-05-19 weather: sun temp_max: 18.3date: 2013-05-31 weather: sun temp_max: 19.4date: 2013-06-12 weather: rain temp_max: 20.6date: 2013-06-24 weather: rain temp_max: 21.1date: 2013-07-06 weather: sun temp_max: 26.1date: 2013-07-18 weather: sun temp_max: 26.1date: 2013-07-30 weather: sun temp_max: 25date: 2013-08-11 weather: sun temp_max: 25date: 2013-08-23 weather: sun temp_max: 25date: 2013-09-04 weather: rain temp_max: 22.8date: 2013-09-16 weather: rain temp_max: 21.7date: 2013-09-28 weather: rain temp_max: 16.7date: 2013-10-10 weather: rain temp_max: 14.4date: 2013-10-22 weather: sun temp_max: 14.4date: 2013-11-03 weather: rain temp_max: 12.2date: 2013-11-15 weather: rain temp_max: 10.6date: 2013-11-27 weather: sun temp_max: 14.4date: 2013-12-09 weather: sun temp_max: 1.1date: 2013-12-21 weather: rain temp_max: 8.9date: 2014-01-02 weather: rain temp_max: 10.6date: 2014-01-14 weather: sun temp_max: 11.1date: 2014-01-26 weather: sun temp_max: 8.3date: 2014-02-07 weather: sun temp_max: 3.3date: 2014-02-19 weather: rain temp_max: 8.3date: 2014-03-03 weather: rain temp_max: 14.4date: 2014-03-15 weather: rain temp_max: 16.7date: 2014-03-27 weather: rain temp_max: 12.2date: 2014-04-08 weather: rain temp_max: 15.6date: 2014-04-20 weather: sun temp_max: 15.6date: 2014-05-02 weather: sun temp_max: 18.3date: 2014-05-14 weather: sun temp_max: 27.8date: 2014-05-26 weather: sun temp_max: 18.3date: 2014-06-07 weather: sun temp_max: 24.4date: 2014-06-19 weather: rain temp_max: 25.6date: 2014-07-01 weather: sun temp_max: 34.4date: 2014-07-13 weather: sun temp_max: 29.4date: 2014-07-25 weather: sun temp_max: 22.8date: 2014-08-06 weather: fog temp_max: 26.1date: 2014-08-18 weather: sun temp_max: 29.4date: 2014-08-30 weather: rain temp_max: 17.8date: 2014-09-11 weather: sun temp_max: 24.4date: 2014-09-23 weather: rain temp_max: 18.9date: 2014-10-05 weather: fog temp_max: 23.9date: 2014-10-17 weather: rain temp_max: 16.7date: 2014-10-29 weather: rain temp_max: 16.7date: 2014-11-10 weather: sun temp_max: 11.1date: 2014-11-22 weather: rain temp_max: 9.4date: 2014-12-04 weather: rain temp_max: 8.3date: 2014-12-16 weather: sun temp_max: 10date: 2014-12-28 weather: rain temp_max: 6.7date: 2015-01-09 weather: rain temp_max: 10date: 2015-01-21 weather: fog temp_max: 7.2date: 2015-02-02 weather: rain temp_max: 11.1date: 2015-02-14 weather: rain temp_max: 14.4date: 2015-02-26 weather: rain temp_max: 11.7date: 2015-03-10 weather: rain temp_max: 13.3date: 2015-03-22 weather: rain temp_max: 11.7date: 2015-04-03 weather: rain temp_max: 11.1date: 2015-04-15 weather: sun temp_max: 13.9date: 2015-04-27 weather: rain temp_max: 25date: 2015-05-09 weather: sun temp_max: 26.7date: 2015-05-21 weather: sun temp_max: 25.6date: 2015-06-02 weather: rain temp_max: 17.8date: 2015-06-14 weather: sun temp_max: 27.8date: 2015-06-26 weather: sun temp_max: 31.7date: 2015-07-08 weather: drizzle temp_max: 30date: 2015-07-20 weather: sun temp_max: 26.7date: 2015-08-01 weather: sun temp_max: 33.3date: 2015-08-13 weather: sun temp_max: 28.3date: 2015-08-25 weather: sun temp_max: 25.6date: 2015-09-06 weather: rain temp_max: 16.1date: 2015-09-18 weather: sun temp_max: 19.4date: 2015-09-30 weather: fog temp_max: 18.3date: 2015-10-12 weather: rain temp_max: 18.3date: 2015-10-24 weather: fog temp_max: 15date: 2015-11-05 weather: rain temp_max: 11.7date: 2015-11-17 weather: rain temp_max: 13.3date: 2015-11-29 weather: fog temp_max: 1.7date: 2015-12-11 weather: rain temp_max: 9.4date: 2015-12-23 weather: rain temp_max: 5windprecipitationdrizzlesunrainsnowfog

16 charts, every one of them markup. Nothing on this page fetches JavaScript — there is no <script src> anywhere in it, and the only script it carries at all is the chrome's inline theme toggle, which has to run before first paint. The data is the 1,461 daily observations of Seattle weather that ship in the repository, and the same figures build standalone with python tools/chart_gallery.py.