chartlet 0.21.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Water in a town, with recycling</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="880" height="520" viewBox="0 0 880 520" id="chartlet-6054d349fca80eeb" role="img" aria-labelledby="chartlet-6054d349fca80eeb-title chartlet-6054d349fca80eeb-description" class="chartlet-root"><title id="chartlet-6054d349fca80eeb-title">Water in a town, with recycling</title><desc id="chartlet-6054d349fca80eeb-description">Sankey diagram of 7 nodes and 8 links; 100 enter it. Biggest links: Intake → Treatment (100), Treatment → Industry (80), Wastewater → River (70).</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-6054d349fca80eeb .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-6054d349fca80eeb .chartlet-label,#chartlet-6054d349fca80eeb .chartlet-tick,#chartlet-6054d349fca80eeb .chartlet-value,#chartlet-6054d349fca80eeb .chartlet-value-inverse,#chartlet-6054d349fca80eeb .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-6054d349fca80eeb .chartlet-value,#chartlet-6054d349fca80eeb .chartlet-value-inverse{font-weight:600}#chartlet-6054d349fca80eeb .chartlet-value{fill:var(--chartlet-text)}#chartlet-6054d349fca80eeb .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-6054d349fca80eeb .chartlet-axis-title{font-weight:600}#chartlet-6054d349fca80eeb .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-6054d349fca80eeb .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-6054d349fca80eeb .chartlet-bar,#chartlet-6054d349fca80eeb .chartlet-point{fill:var(--chartlet-accent)}#chartlet-6054d349fca80eeb .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-6054d349fca80eeb .chartlet-background{fill:var(--chartlet-background)}#chartlet-6054d349fca80eeb .chartlet-sk-1{fill:var(--chartlet-color-1)}#chartlet-6054d349fca80eeb .chartlet-sk-2{fill:var(--chartlet-color-2)}#chartlet-6054d349fca80eeb .chartlet-sk-3{fill:var(--chartlet-color-3)}#chartlet-6054d349fca80eeb .chartlet-sk-4{fill:var(--chartlet-color-4)}#chartlet-6054d349fca80eeb .chartlet-sk-node{stroke:none}#chartlet-6054d349fca80eeb .chartlet-sk-link{stroke:none;opacity:.35}#chartlet-6054d349fca80eeb .chartlet-sk-label{font-size:12px;font-weight:600;fill:var(--chartlet-text)}#chartlet-6054d349fca80eeb .chartlet-sk-value{font-size:11px;fill:var(--chartlet-muted)}</style><polyline points="104.08,63.041 113.691,62.524 123.301,61.062 132.912,58.792 142.522,55.847 152.133,52.362 161.744,48.473 171.354,44.314 180.965,40.02 190.576,35.727 200.186,31.568 209.797,27.678 219.407,24.194 229.018,21.249 238.629,18.978 248.239,17.517 257.85,17 257.85,247.204 248.239,247.721 238.629,249.182 229.018,251.453 219.407,254.398 209.797,257.882 200.186,261.772 190.576,265.931 180.965,270.224 171.354,274.518 161.744,278.677 152.133,282.566 142.522,286.051 132.912,288.996 123.301,291.267 113.691,292.728 104.08,293.245" class="chartlet-sk-link chartlet-sk-1"><title>Intake → Treatment: 100</title></polyline><polyline points="775.16,46.531 875.242,46.531 875.242,448.367 157.768,448.367 157.768,247.204 257.85,247.204 257.85,339.286 249.85,339.286 249.85,356.286 783.16,356.286 783.16,138.612 775.16,138.612" class="chartlet-sk-link chartlet-sk-2"><title>Recycling → Treatment: 40</title></polyline><polyline points="271.85,17 281.461,16.944 291.071,16.785 300.682,16.539 310.292,16.219 319.903,15.84 329.514,15.418 339.124,14.966 348.735,14.5 358.346,14.034 367.956,13.582 377.567,13.16 387.177,12.781 396.788,12.461 406.399,12.215 416.009,12.056 425.62,12 425.62,150.122 416.009,150.179 406.399,150.337 396.788,150.584 387.177,150.904 377.567,151.282 367.956,151.704 358.346,152.156 348.735,152.622 339.124,153.089 329.514,153.54 319.903,153.963 310.292,154.341 300.682,154.661 291.071,154.908 281.461,155.066 271.85,155.122" class="chartlet-sk-link chartlet-sk-2"><title>Treatment → Households: 60</title></polyline><polyline points="271.85,155.122 281.461,155.179 291.071,155.337 300.682,155.584 310.292,155.904 319.903,156.282 329.514,156.704 339.124,157.156 348.735,157.622 358.346,158.089 367.956,158.54 377.567,158.963 387.177,159.341 396.788,159.661 406.399,159.908 416.009,160.066 425.62,160.122 425.62,344.286 416.009,344.23 406.399,344.071 396.788,343.824 387.177,343.504 377.567,343.126 367.956,342.704 358.346,342.252 348.735,341.786 339.124,341.319 329.514,340.868 319.903,340.445 310.292,340.067 300.682,339.747 291.071,339.501 281.461,339.342 271.85,339.286" class="chartlet-sk-link chartlet-sk-2"><title>Treatment → Industry: 80</title></polyline><polyline points="439.62,12 449.231,12.444 458.841,13.699 468.452,15.648 478.062,18.177 487.673,21.168 497.284,24.508 506.894,28.079 516.505,31.765 526.116,35.452 535.726,39.023 545.337,42.362 554.947,45.354 564.558,47.883 574.169,49.832 583.779,51.087 593.39,51.531 593.39,166.633 583.779,166.189 574.169,164.934 564.558,162.985 554.947,160.456 545.337,157.464 535.726,154.125 526.116,150.554 516.505,146.867 506.894,143.181 497.284,139.61 487.673,136.271 478.062,133.279 468.452,130.75 458.841,128.801 449.231,127.546 439.62,127.102" class="chartlet-sk-link chartlet-sk-3"><title>Households → Wastewater: 50</title></polyline><polyline points="439.62,160.122 449.231,160.196 458.841,160.402 468.452,160.723 478.062,161.14 487.673,161.632 497.284,162.182 506.894,162.77 516.505,163.378 526.116,163.985 535.726,164.573 545.337,165.123 554.947,165.615 564.558,166.032 574.169,166.353 583.779,166.56 593.39,166.633 593.39,304.755 583.779,304.682 574.169,304.475 564.558,304.154 554.947,303.738 545.337,303.245 535.726,302.695 526.116,302.107 516.505,301.5 506.894,300.893 497.284,300.305 487.673,299.755 478.062,299.262 468.452,298.846 458.841,298.525 449.231,298.318 439.62,298.245" class="chartlet-sk-link chartlet-sk-4"><title>Industry → Wastewater: 60</title></polyline><polyline points="607.39,51.531 617.001,51.474 626.611,51.316 636.222,51.069 645.832,50.749 655.443,50.371 665.054,49.949 674.664,49.497 684.275,49.031 693.886,48.564 703.496,48.113 713.107,47.69 722.717,47.312 732.328,46.992 741.939,46.745 751.549,46.587 761.16,46.531 761.16,138.612 751.549,138.668 741.939,138.827 732.328,139.074 722.717,139.393 713.107,139.772 703.496,140.194 693.886,140.646 684.275,141.112 674.664,141.579 665.054,142.03 655.443,142.453 645.832,142.831 636.222,143.151 626.611,143.397 617.001,143.556 607.39,143.612" class="chartlet-sk-link chartlet-sk-1"><title>Wastewater → Recycling: 40</title></polyline><polyline points="607.39,143.612 617.001,143.668 626.611,143.827 636.222,144.074 645.832,144.393 655.443,144.772 665.054,145.194 674.664,145.646 684.275,146.112 693.886,146.579 703.496,147.03 713.107,147.453 722.717,147.831 732.328,148.151 741.939,148.397 751.549,148.556 761.16,148.612 761.16,309.755 751.549,309.699 741.939,309.54 732.328,309.294 722.717,308.974 713.107,308.595 703.496,308.173 693.886,307.721 684.275,307.255 674.664,306.789 665.054,306.337 655.443,305.915 645.832,305.536 636.222,305.217 626.611,304.97 617.001,304.811 607.39,304.755" class="chartlet-sk-link chartlet-sk-1"><title>Wastewater → River: 70</title></polyline><rect x="90.08" y="63.041" width="14" height="230.204" class="chartlet-sk-node chartlet-sk-1"><title>Intake: 100</title></rect><text x="84.08" y="177.143" text-anchor="end" class="chartlet-sk-label">Intake</text><text x="84.08" y="190.143" text-anchor="end" class="chartlet-sk-value">100</text><rect x="257.85" y="17" width="14" height="322.286" class="chartlet-sk-node chartlet-sk-2"><title>Treatment: 140</title></rect><text x="277.85" y="177.143" text-anchor="start" class="chartlet-sk-label">Treatment</text><text x="277.85" y="190.143" text-anchor="start" class="chartlet-sk-value">140</text><rect x="761.16" y="46.531" width="14" height="92.082" class="chartlet-sk-node chartlet-sk-2"><title>Recycling: 40</title></rect><text x="781.16" y="91.571" text-anchor="start" class="chartlet-sk-label">Recycling</text><text x="781.16" y="104.571" text-anchor="start" class="chartlet-sk-value">40</text><rect x="425.62" y="12" width="14" height="138.122" class="chartlet-sk-node chartlet-sk-3"><title>Households: 60</title></rect><text x="445.62" y="80.061" text-anchor="start" class="chartlet-sk-label">Households</text><text x="445.62" y="93.061" text-anchor="start" class="chartlet-sk-value">60</text><rect x="425.62" y="160.122" width="14" height="184.163" class="chartlet-sk-node chartlet-sk-4"><title>Industry: 80</title></rect><text x="445.62" y="251.204" text-anchor="start" class="chartlet-sk-label">Industry</text><text x="445.62" y="264.204" text-anchor="start" class="chartlet-sk-value">80</text><rect x="593.39" y="51.531" width="14" height="253.224" class="chartlet-sk-node chartlet-sk-1"><title>Wastewater: 110</title></rect><text x="613.39" y="177.143" text-anchor="start" class="chartlet-sk-label">Wastewater</text><text x="613.39" y="190.143" text-anchor="start" class="chartlet-sk-value">110</text><rect x="761.16" y="148.612" width="14" height="161.143" class="chartlet-sk-node chartlet-sk-3"><title>River: 70</title></rect><text x="781.16" y="228.184" text-anchor="start" class="chartlet-sk-label">River</text><text x="781.16" y="241.184" text-anchor="start" class="chartlet-sk-value">70</text></svg><p class="chartlet-source">Source: Illustrative flows in million cubic metres</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Water in a town, with recycling</caption><thead><tr><th scope="col">from</th><th scope="col">to</th><th scope="col">Value</th><th scope="col">Share</th></tr></thead><tbody><tr><th scope="row">Intake</th><td>Treatment</td><td>100</td><td>100.0%</td></tr><tr><th scope="row">Treatment</th><td>Industry</td><td>80</td><td>80.0%</td></tr><tr><th scope="row">Wastewater</th><td>River</td><td>70</td><td>70.0%</td></tr><tr><th scope="row">Treatment</th><td>Households</td><td>60</td><td>60.0%</td></tr><tr><th scope="row">Industry</th><td>Wastewater</td><td>60</td><td>60.0%</td></tr><tr><th scope="row">Households</th><td>Wastewater</td><td>50</td><td>50.0%</td></tr><tr><th scope="row">Recycling</th><td>Treatment</td><td>40</td><td>40.0%</td></tr><tr><th scope="row">Wastewater</th><td>Recycling</td><td>40</td><td>40.0%</td></tr></tbody></table></details></figure>