Pancake Responsive charts. JavaScript optional.

Pancake is a charting library for Svelte applications that allows you to visualize data with a combination of HTML, SVG and (soon) canvas/WebGL.

Unlike most charting libraries, Pancake is designed with server-side rendering in mind, meaning you can create beautiful responsive charts that may not even need JavaScript to render. Here's how.

320
340
360
380
400 ppm
1960
1970
1980
1990
2000
2010
2020

Atmospheric CO₂

monthly average    trend

This chart will render correctly even if JavaScript is disabled.

418.92 parts per million (ppm) →

Source: Scripps Institution of Oceanography. Based on Carbon Clock by Bloomberg.

Usage

Documentation is TODO. In the meantime, here are some examples:

Examples

Population pyramid

Edit

'60
'65
'70
'75
'80
'85
'90
'95
'00
'05
'10
'15
'20
'25
'30
'35
'40
'45
'50
'55
'60
'65
'70
'75
'80
'85
'90
'95
'00
'05
'10
'15
'20
'25
'30
'35
'40
'45
'50
'55
'60
'65
'70
'75
'80
'85
'90
'95
'00
2M
4M
6M
8M
10M
90
80
70
60
50
40
30
20
10
0 yrs old
2000

Source: IPUMS. Based on Population Pyramid by Mike Bostock

Life expectancy

Edit

20
30
40
50
60
70
80
1960
1970
1980
1990
2000
2010

Source: The World Bank. Based on Life Expectancy by Nathan Yau.

Treemap

Edit

vis 432,629
util 165,157
animate 100,024
query 89,721
analytics 48,716
scale 31,294
data 30,284
physics 29,934
display 24,254
flex 4,116

Based on Zoomable Treemap by Mike Bostock.