chartlet 0.6.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Contributions to warming</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-59319841d1365191" role="img" aria-labelledby="chartlet-59319841d1365191-title chartlet-59319841d1365191-description" class="chartlet-root"><title id="chartlet-59319841d1365191-title">Contributions to warming</title><desc id="chartlet-59319841d1365191-description">Range chart with 5 categories, each a span from low to high and a central value. Lowest low: −0.8 (Other human drivers). Highest high: 2 (Greenhouse gases). Modeled, drawn hatched: Human influence, Greenhouse gases, Other human drivers, Natural drivers.</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-59319841d1365191 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-59319841d1365191 .chartlet-label,#chartlet-59319841d1365191 .chartlet-tick,#chartlet-59319841d1365191 .chartlet-value,#chartlet-59319841d1365191 .chartlet-value-inverse,#chartlet-59319841d1365191 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-59319841d1365191 .chartlet-value,#chartlet-59319841d1365191 .chartlet-value-inverse{font-weight:600}#chartlet-59319841d1365191 .chartlet-value{fill:var(--chartlet-text)}#chartlet-59319841d1365191 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-59319841d1365191 .chartlet-axis-title{font-weight:600}#chartlet-59319841d1365191 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-59319841d1365191 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-59319841d1365191 .chartlet-bar,#chartlet-59319841d1365191 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-59319841d1365191 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-59319841d1365191 .chartlet-background{fill:var(--chartlet-background)}#chartlet-59319841d1365191 .chartlet-range{fill:var(--chartlet-accent);fill-opacity:.3;stroke:var(--chartlet-accent);stroke-width:1}#chartlet-59319841d1365191 .chartlet-range-hatch{stroke:none}#chartlet-59319841d1365191 .chartlet-hatch-line{stroke:var(--chartlet-accent);stroke-width:1.2;opacity:.75}#chartlet-59319841d1365191 .chartlet-range-mid{stroke:var(--chartlet-text);stroke-width:3}#chartlet-59319841d1365191 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}</style><defs><pattern id="chartlet-59319841d1365191-hatch-range" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="6" class="chartlet-hatch-line"/></pattern></defs><line x1="153.2" y1="58" x2="153.2" y2="394" class="chartlet-grid"/><text x="153.2" y="416" text-anchor="middle" class="chartlet-tick">−1</text><line x1="285.887" y1="58" x2="285.887" y2="394" class="chartlet-zero"/><text x="285.887" y="416" text-anchor="middle" class="chartlet-tick">0</text><line x1="418.574" y1="58" x2="418.574" y2="394" class="chartlet-grid"/><text x="418.574" y="416" text-anchor="middle" class="chartlet-tick">1</text><line x1="551.262" y1="58" x2="551.262" y2="394" class="chartlet-grid"/><text x="551.262" y="416" text-anchor="middle" class="chartlet-tick">2</text><line x1="683.949" y1="58" x2="683.949" y2="394" class="chartlet-grid"/><text x="683.949" y="416" text-anchor="middle" class="chartlet-tick">3</text><text x="418.574" y="438" text-anchor="middle" class="chartlet-axis-title">°C</text><rect x="405.306" y="77.6" width="39.806" height="28" class="chartlet-range"><title>Observed: 1.05 (0.9 to 1.2)</title></rect><line x1="425.209" y1="74.6" x2="425.209" y2="108.6" class="chartlet-range-mid"/><text x="453.112" y="95.6" text-anchor="start" class="chartlet-value">1.05 (0.9 to 1.2)</text><text x="141.2" y="95.6" text-anchor="end" class="chartlet-label">Observed</text><rect x="392.037" y="144.8" width="66.344" height="28" class="chartlet-range"><title>Human influence: 1.05 (0.8 to 1.3), modeled</title></rect><rect x="392.037" y="144.8" width="66.344" height="28" fill="url(#chartlet-59319841d1365191-hatch-range)" class="chartlet-range-hatch"><title>Human influence: 1.05 (0.8 to 1.3), modeled</title></rect><line x1="425.209" y1="141.8" x2="425.209" y2="175.8" class="chartlet-range-mid"/><text x="466.381" y="162.8" text-anchor="start" class="chartlet-value">1.05 (0.8 to 1.3)</text><text x="141.2" y="162.8" text-anchor="end" class="chartlet-label">Human influence</text><rect x="418.574" y="212" width="132.687" height="28" class="chartlet-range"><title>Greenhouse gases: 1.5 (1 to 2), modeled</title></rect><rect x="418.574" y="212" width="132.687" height="28" fill="url(#chartlet-59319841d1365191-hatch-range)" class="chartlet-range-hatch"><title>Greenhouse gases: 1.5 (1 to 2), modeled</title></rect><line x1="484.918" y1="209" x2="484.918" y2="243" class="chartlet-range-mid"/><text x="559.262" y="230" text-anchor="start" class="chartlet-value">1.5 (1 to 2)</text><text x="141.2" y="230" text-anchor="end" class="chartlet-label">Greenhouse gases</text><rect x="179.737" y="279.2" width="106.15" height="28" class="chartlet-range"><title>Other human drivers: −0.4 (−0.8 to 0), modeled</title></rect><rect x="179.737" y="279.2" width="106.15" height="28" fill="url(#chartlet-59319841d1365191-hatch-range)" class="chartlet-range-hatch"><title>Other human drivers: −0.4 (−0.8 to 0), modeled</title></rect><line x1="232.812" y1="276.2" x2="232.812" y2="310.2" class="chartlet-range-mid"/><text x="293.887" y="297.2" text-anchor="start" class="chartlet-value">−0.4 (−0.8 to 0)</text><text x="141.2" y="297.2" text-anchor="end" class="chartlet-label">Other human drivers</text><rect x="272.618" y="346.4" width="26.537" height="28" class="chartlet-range"><title>Natural drivers: 0 (−0.1 to 0.1), modeled</title></rect><rect x="272.618" y="346.4" width="26.537" height="28" fill="url(#chartlet-59319841d1365191-hatch-range)" class="chartlet-range-hatch"><title>Natural drivers: 0 (−0.1 to 0.1), modeled</title></rect><line x1="285.887" y1="343.4" x2="285.887" y2="377.4" class="chartlet-range-mid"/><text x="307.156" y="364.4" text-anchor="start" class="chartlet-value">0 (−0.1 to 0.1)</text><text x="141.2" y="364.4" text-anchor="end" class="chartlet-label">Natural drivers</text><rect x="153.2" y="2" width="10" height="10" class="chartlet-range"/><rect x="153.2" y="2" width="10" height="10" fill="url(#chartlet-59319841d1365191-hatch-range)" class="chartlet-range-hatch"/><text x="169.2" y="11" text-anchor="start" class="chartlet-legend">Hatched: modeled</text></svg><p class="chartlet-source">Source: Illustrative values, chartlet</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Contributions to warming</caption><thead><tr><th scope="col">Category</th><th scope="col">Low</th><th scope="col">Mid</th><th scope="col">High</th></tr></thead><tbody><tr><th scope="row">Observed</th><td>0.9</td><td>1.05</td><td>1.2</td></tr><tr><th scope="row">Human influence (modeled)</th><td>0.8</td><td>1.05</td><td>1.3</td></tr><tr><th scope="row">Greenhouse gases (modeled)</th><td>1</td><td>1.5</td><td>2</td></tr><tr><th scope="row">Other human drivers (modeled)</th><td>−0.8</td><td>−0.4</td><td>0</td></tr><tr><th scope="row">Natural drivers (modeled)</th><td>−0.1</td><td>0</td><td>0.1</td></tr></tbody></table></details></figure>