chartlet 0.2.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Deep-sea oxygen isotopes since the end of the dinosaurs</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-5d0cfeba993d920b" role="img" aria-labelledby="chartlet-5d0cfeba993d920b-title chartlet-5d0cfeba993d920b-description" class="chartlet-root"><title id="chartlet-5d0cfeba993d920b-title">Deep-sea oxygen isotopes since the end of the dinosaurs</title><desc id="chartlet-5d0cfeba993d920b-description">Line chart with 9 points from 0.0 to 66.0. Highest: 3.5 (2.6). Lowest: −0.5 (56.0). Zones: Ice sheets on Antarctica, 0.0 to 34.0.</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-5d0cfeba993d920b .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-5d0cfeba993d920b .chartlet-label,#chartlet-5d0cfeba993d920b .chartlet-tick,#chartlet-5d0cfeba993d920b .chartlet-value,#chartlet-5d0cfeba993d920b .chartlet-value-inverse,#chartlet-5d0cfeba993d920b .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-5d0cfeba993d920b .chartlet-value,#chartlet-5d0cfeba993d920b .chartlet-value-inverse{font-weight:600}#chartlet-5d0cfeba993d920b .chartlet-value{fill:var(--chartlet-text)}#chartlet-5d0cfeba993d920b .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-5d0cfeba993d920b .chartlet-axis-title{font-weight:600}#chartlet-5d0cfeba993d920b .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-5d0cfeba993d920b .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-5d0cfeba993d920b .chartlet-bar,#chartlet-5d0cfeba993d920b .chartlet-point{fill:var(--chartlet-accent)}#chartlet-5d0cfeba993d920b .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-5d0cfeba993d920b .chartlet-background{fill:var(--chartlet-background)}#chartlet-5d0cfeba993d920b .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-5d0cfeba993d920b .chartlet-line-series-1{stroke:var(--chartlet-color-1)}#chartlet-5d0cfeba993d920b .chartlet-line-series-2{stroke:var(--chartlet-color-2)}#chartlet-5d0cfeba993d920b .chartlet-line-series-3{stroke:var(--chartlet-color-3)}#chartlet-5d0cfeba993d920b .chartlet-line-series-4{stroke:var(--chartlet-color-4)}#chartlet-5d0cfeba993d920b .chartlet-point-series-1{fill:var(--chartlet-color-1)}#chartlet-5d0cfeba993d920b .chartlet-hit{fill:transparent;stroke:none}#chartlet-5d0cfeba993d920b .chartlet-band{stroke:none;fill-opacity:.18}#chartlet-5d0cfeba993d920b .chartlet-band-series-1{fill:var(--chartlet-color-1)}#chartlet-5d0cfeba993d920b .chartlet-band-series-2{fill:var(--chartlet-color-2)}#chartlet-5d0cfeba993d920b .chartlet-band-series-3{fill:var(--chartlet-color-3)}#chartlet-5d0cfeba993d920b .chartlet-band-series-4{fill:var(--chartlet-color-4)}#chartlet-5d0cfeba993d920b .chartlet-hatch{stroke:none}#chartlet-5d0cfeba993d920b .chartlet-hatch-line{stroke-width:1.2;opacity:.75}#chartlet-5d0cfeba993d920b .chartlet-line-modeled{stroke-dasharray:7 5}#chartlet-5d0cfeba993d920b .chartlet-line-thin{stroke-width:1}#chartlet-5d0cfeba993d920b .chartlet-point-series-2{fill:var(--chartlet-color-2)}#chartlet-5d0cfeba993d920b .chartlet-point-series-3{fill:var(--chartlet-color-3)}#chartlet-5d0cfeba993d920b .chartlet-point-series-4{fill:var(--chartlet-color-4)}#chartlet-5d0cfeba993d920b .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-5d0cfeba993d920b .chartlet-rule-label{font-size:12px;font-weight:600;fill:var(--chartlet-text);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-5d0cfeba993d920b .chartlet-zone{fill:var(--chartlet-zero);fill-opacity:.14;stroke:none}#chartlet-5d0cfeba993d920b .chartlet-marker{fill:var(--chartlet-text);stroke:var(--chartlet-background);stroke-width:1.5;stroke-linejoin:round}</style><line x1="72" y1="34" x2="776" y2="34" class="chartlet-grid"/><text x="62" y="38" text-anchor="end" class="chartlet-tick">−1</text><line x1="72" y1="106" x2="776" y2="106" class="chartlet-zero"/><text x="62" y="110" text-anchor="end" class="chartlet-tick">0</text><line x1="72" y1="178" x2="776" y2="178" class="chartlet-grid"/><text x="62" y="182" text-anchor="end" class="chartlet-tick">1</text><line x1="72" y1="250" x2="776" y2="250" class="chartlet-grid"/><text x="62" y="254" text-anchor="end" class="chartlet-tick">2</text><line x1="72" y1="322" x2="776" y2="322" class="chartlet-grid"/><text x="62" y="326" text-anchor="end" class="chartlet-tick">3</text><line x1="72" y1="394" x2="776" y2="394" class="chartlet-grid"/><text x="62" y="398" text-anchor="end" class="chartlet-tick">4</text><line x1="770" y1="34" x2="770" y2="394" class="chartlet-grid"/><text x="770" y="418" text-anchor="middle" class="chartlet-tick">0</text><line x1="665.152" y1="34" x2="665.152" y2="394" class="chartlet-grid"/><text x="665.152" y="418" text-anchor="middle" class="chartlet-tick">10</text><line x1="560.303" y1="34" x2="560.303" y2="394" class="chartlet-grid"/><text x="560.303" y="418" text-anchor="middle" class="chartlet-tick">20</text><line x1="455.455" y1="34" x2="455.455" y2="394" class="chartlet-grid"/><text x="455.455" y="418" text-anchor="middle" class="chartlet-tick">30</text><line x1="350.606" y1="34" x2="350.606" y2="394" class="chartlet-grid"/><text x="350.606" y="418" text-anchor="middle" class="chartlet-tick">40</text><line x1="245.758" y1="34" x2="245.758" y2="394" class="chartlet-grid"/><text x="245.758" y="418" text-anchor="middle" class="chartlet-tick">50</text><line x1="140.909" y1="34" x2="140.909" y2="394" class="chartlet-grid"/><text x="140.909" y="418" text-anchor="middle" class="chartlet-tick">60</text><text x="72" y="14" text-anchor="start" class="chartlet-axis-title">δ18O (‰), warmer up</text><rect x="413.515" y="34" width="356.485" height="360" class="chartlet-zone"><title>Ice sheets on Antarctica: 0.0 to 34.0</title></rect><polyline points="770,343.6 742.739,358 717.576,307.6 612.727,214 528.848,250 413.515,214 245.758,106 182.848,70 78,142" class="chartlet-line chartlet-line-series-1"/><circle cx="770" cy="343.6" r="4" class="chartlet-point chartlet-point-series-1"><title>0.0 – δ18O: 3.3</title></circle><text x="770" y="333.6" text-anchor="middle" class="chartlet-value">3.3</text><circle cx="742.739" cy="358" r="4" class="chartlet-point chartlet-point-series-1"><title>2.6 – δ18O: 3.5</title></circle><text x="742.739" y="348" text-anchor="middle" class="chartlet-value">3.5</text><circle cx="717.576" cy="307.6" r="4" class="chartlet-point chartlet-point-series-1"><title>5.0 – δ18O: 2.8</title></circle><text x="717.576" y="297.6" text-anchor="middle" class="chartlet-value">2.8</text><circle cx="612.727" cy="214" r="4" class="chartlet-point chartlet-point-series-1"><title>15.0 – δ18O: 1.5</title></circle><text x="612.727" y="204" text-anchor="middle" class="chartlet-value">1.5</text><circle cx="528.848" cy="250" r="4" class="chartlet-point chartlet-point-series-1"><title>23.0 – δ18O: 2.0</title></circle><text x="528.848" y="240" text-anchor="middle" class="chartlet-value">2.0</text><circle cx="413.515" cy="214" r="4" class="chartlet-point chartlet-point-series-1"><title>34.0 – δ18O: 1.5</title></circle><text x="413.515" y="204" text-anchor="middle" class="chartlet-value">1.5</text><circle cx="245.758" cy="106" r="4" class="chartlet-point chartlet-point-series-1"><title>50.0 – δ18O: 0.0</title></circle><text x="245.758" y="96" text-anchor="middle" class="chartlet-value">0.0</text><circle cx="182.848" cy="70" r="4" class="chartlet-point chartlet-point-series-1"><title>56.0 – δ18O: −0.5</title></circle><text x="182.848" y="60" text-anchor="middle" class="chartlet-value">−0.5</text><circle cx="78" cy="142" r="4" class="chartlet-point chartlet-point-series-1"><title>66.0 – δ18O: 0.5</title></circle><text x="78" y="132" text-anchor="middle" class="chartlet-value">0.5</text><text x="417.515" y="48" text-anchor="start" class="chartlet-rule-label">Ice sheets on Antarctica</text><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Million years ago</text></svg><p class="chartlet-source">Source: Sample data, simplified</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Deep-sea oxygen isotopes since the end of the dinosaurs</caption><thead><tr><th scope="col">Million years ago</th><th scope="col">δ18O</th></tr></thead><tbody><tr><th scope="row">0.0</th><td>3.3</td></tr><tr><th scope="row">2.6</th><td>3.5</td></tr><tr><th scope="row">5.0</th><td>2.8</td></tr><tr><th scope="row">15.0</th><td>1.5</td></tr><tr><th scope="row">23.0</th><td>2.0</td></tr><tr><th scope="row">34.0</th><td>1.5</td></tr><tr><th scope="row">50.0</th><td>0.0</td></tr><tr><th scope="row">56.0</th><td>−0.5</td></tr><tr><th scope="row">66.0</th><td>0.5</td></tr></tbody></table></details></figure>