chartlet 0.3.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper"><fieldset class="chartlet-filter"><legend>Series</legend><label><input type="checkbox" class="series-0" checked> Population</label><label><input type="checkbox" class="series-1" checked> CO₂ emissions</label></fieldset><figure class="chartlet-figure" data-viz="chart"><figcaption>Share of world population and of CO₂ emissions</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-3e7f83b2ef77aaaa" role="img" aria-labelledby="chartlet-3e7f83b2ef77aaaa-title chartlet-3e7f83b2ef77aaaa-description" class="chartlet-root"><title id="chartlet-3e7f83b2ef77aaaa-title">Share of world population and of CO₂ emissions</title><desc id="chartlet-3e7f83b2ef77aaaa-description">Bar chart with 5 categories and 2 series (Population, CO₂ emissions). Highest: 31% (CO₂ emissions in China). Lowest: 4% (Population in United States, CO₂ emissions in Africa).</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-3e7f83b2ef77aaaa .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-3e7f83b2ef77aaaa .chartlet-label,#chartlet-3e7f83b2ef77aaaa .chartlet-tick,#chartlet-3e7f83b2ef77aaaa .chartlet-value,#chartlet-3e7f83b2ef77aaaa .chartlet-value-inverse,#chartlet-3e7f83b2ef77aaaa .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-3e7f83b2ef77aaaa .chartlet-value,#chartlet-3e7f83b2ef77aaaa .chartlet-value-inverse{font-weight:600}#chartlet-3e7f83b2ef77aaaa .chartlet-value{fill:var(--chartlet-text)}#chartlet-3e7f83b2ef77aaaa .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-3e7f83b2ef77aaaa .chartlet-axis-title{font-weight:600}#chartlet-3e7f83b2ef77aaaa .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-3e7f83b2ef77aaaa .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-3e7f83b2ef77aaaa .chartlet-bar,#chartlet-3e7f83b2ef77aaaa .chartlet-point{fill:var(--chartlet-accent)}#chartlet-3e7f83b2ef77aaaa .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-3e7f83b2ef77aaaa .chartlet-background{fill:var(--chartlet-background)}#chartlet-3e7f83b2ef77aaaa .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-3e7f83b2ef77aaaa .chartlet-series-1{fill:var(--chartlet-color-1)}#chartlet-3e7f83b2ef77aaaa .chartlet-series-2{fill:var(--chartlet-color-2)}#chartlet-3e7f83b2ef77aaaa .chartlet-series-3{fill:var(--chartlet-color-3)}#chartlet-3e7f83b2ef77aaaa .chartlet-series-4{fill:var(--chartlet-color-4)}.chartlet-wrapper{display:inline-block;max-width:100%}.chartlet-filter{border:none;padding:0;margin:0 0 12px 0}.chartlet-filter legend{font-size:14px;font-weight:650;margin-bottom:4px}.chartlet-filter label{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin-right:14px;cursor:pointer;white-space:nowrap}.chartlet-filter input{margin-right:4px}.chartlet-filter input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.chartlet-wrapper:has(.chartlet-filter input.series-0:not(:checked)) .chartlet-root [data-series="0"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-1:not(:checked)) .chartlet-root [data-series="1"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-2:not(:checked)) .chartlet-root [data-series="2"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-3:not(:checked)) .chartlet-root [data-series="3"]{display:none}#chartlet-3e7f83b2ef77aaaa .chartlet-outline{fill:var(--chartlet-background);stroke-width:2}#chartlet-3e7f83b2ef77aaaa .chartlet-series-2.chartlet-outline{stroke:var(--chartlet-color-2)}#chartlet-3e7f83b2ef77aaaa .chartlet-series-4.chartlet-outline{stroke:var(--chartlet-color-4)}</style><line x1="118.72" y1="58" x2="118.72" y2="414" class="chartlet-zero"/><text x="118.72" y="436" text-anchor="middle" class="chartlet-tick">0%</text><line x1="272.04" y1="58" x2="272.04" y2="414" class="chartlet-grid"/><text x="272.04" y="436" text-anchor="middle" class="chartlet-tick">10%</text><line x1="425.36" y1="58" x2="425.36" y2="414" class="chartlet-grid"/><text x="425.36" y="436" text-anchor="middle" class="chartlet-tick">20%</text><line x1="578.68" y1="58" x2="578.68" y2="414" class="chartlet-grid"/><text x="578.68" y="436" text-anchor="middle" class="chartlet-tick">30%</text><line x1="732" y1="58" x2="732" y2="414" class="chartlet-grid"/><text x="732" y="436" text-anchor="middle" class="chartlet-tick">40%</text><rect x="118.72" y="2" width="10" height="10" class="chartlet-bar chartlet-series-1"/><text x="134.72" y="11" text-anchor="start" class="chartlet-legend">Population</text><rect x="217" y="2" width="10" height="10" class="chartlet-bar chartlet-series-2 chartlet-outline"/><text x="233" y="11" text-anchor="start" class="chartlet-legend">CO₂ emissions</text><rect data-series="0" x="118.72" y="67.12" width="275.976" height="24.48" class="chartlet-bar chartlet-series-1"><title>China – Population: 18%</title></rect><text data-series="0" x="402.696" y="83.36" text-anchor="start" class="chartlet-value">18%</text><rect data-series="1" x="118.72" y="95.6" width="475.292" height="24.48" class="chartlet-bar chartlet-series-2 chartlet-outline"><title>China – CO₂ emissions: 31%</title></rect><text data-series="1" x="602.012" y="111.84" text-anchor="start" class="chartlet-value">31%</text><text x="106.72" y="97.6" text-anchor="end" class="chartlet-label">China</text><rect data-series="0" x="118.72" y="138.32" width="61.328" height="24.48" class="chartlet-bar chartlet-series-1"><title>United States – Population: 4%</title></rect><text data-series="0" x="188.048" y="154.56" text-anchor="start" class="chartlet-value">4%</text><rect data-series="1" x="118.72" y="166.8" width="199.316" height="24.48" class="chartlet-bar chartlet-series-2 chartlet-outline"><title>United States – CO₂ emissions: 13%</title></rect><text data-series="1" x="326.036" y="183.04" text-anchor="start" class="chartlet-value">13%</text><text x="106.72" y="168.8" text-anchor="end" class="chartlet-label">United States</text><rect data-series="0" x="118.72" y="209.52" width="91.992" height="24.48" class="chartlet-bar chartlet-series-1"><title>European Union – Population: 6%</title></rect><text data-series="0" x="218.712" y="225.76" text-anchor="start" class="chartlet-value">6%</text><rect data-series="1" x="118.72" y="238" width="107.324" height="24.48" class="chartlet-bar chartlet-series-2 chartlet-outline"><title>European Union – CO₂ emissions: 7%</title></rect><text data-series="1" x="234.044" y="254.24" text-anchor="start" class="chartlet-value">7%</text><text x="106.72" y="240" text-anchor="end" class="chartlet-label">European Union</text><rect data-series="0" x="118.72" y="280.72" width="275.976" height="24.48" class="chartlet-bar chartlet-series-1"><title>India – Population: 18%</title></rect><text data-series="0" x="402.696" y="296.96" text-anchor="start" class="chartlet-value">18%</text><rect data-series="1" x="118.72" y="309.2" width="122.656" height="24.48" class="chartlet-bar chartlet-series-2 chartlet-outline"><title>India – CO₂ emissions: 8%</title></rect><text data-series="1" x="249.376" y="325.44" text-anchor="start" class="chartlet-value">8%</text><text x="106.72" y="311.2" text-anchor="end" class="chartlet-label">India</text><rect data-series="0" x="118.72" y="351.92" width="275.976" height="24.48" class="chartlet-bar chartlet-series-1"><title>Africa – Population: 18%</title></rect><text data-series="0" x="402.696" y="368.16" text-anchor="start" class="chartlet-value">18%</text><rect data-series="1" x="118.72" y="380.4" width="61.328" height="24.48" class="chartlet-bar chartlet-series-2 chartlet-outline"><title>Africa – CO₂ emissions: 4%</title></rect><text data-series="1" x="188.048" y="396.64" text-anchor="start" class="chartlet-value">4%</text><text x="106.72" y="382.4" text-anchor="end" class="chartlet-label">Africa</text></svg><p class="chartlet-source">Source: Sample data, rounded</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Share of world population and of CO₂ emissions</caption><thead><tr><th scope="col">Category</th><th scope="col">Population</th><th scope="col">CO₂ emissions</th></tr></thead><tbody><tr><th scope="row">China</th><td>18%</td><td>31%</td></tr><tr><th scope="row">United States</th><td>4%</td><td>13%</td></tr><tr><th scope="row">European Union</th><td>6%</td><td>7%</td></tr><tr><th scope="row">India</th><td>18%</td><td>8%</td></tr><tr><th scope="row">Africa</th><td>18%</td><td>4%</td></tr></tbody></table></details></figure></div>