chartlet 0.22.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper chartlet-responsive chartlet-bp-640"><style>.chartlet-wrapper.chartlet-responsive{display:block;width:100%;container-type:inline-size}.chartlet-variant-mobile{display:none}@container (max-width:639px){.chartlet-bp-640 .chartlet-variant-desktop{display:none}.chartlet-bp-640 .chartlet-variant-mobile{display:block}}</style><figure class="chartlet-figure" data-viz="chart"><figcaption>Who may do what</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="760" height="380" viewBox="0 0 760 380" id="chartlet-1c5592bb0dc46071" role="img" aria-labelledby="chartlet-1c5592bb0dc46071-title chartlet-1c5592bb0dc46071-description" class="chartlet-root"><title id="chartlet-1c5592bb0dc46071-title">Who may do what</title><desc id="chartlet-1c5592bb0dc46071-description">Heatmap of 4 rows by 4 columns, each cell one category. Cells by category: Read 4, Write 8, None 3. 1 without a value.</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-1c5592bb0dc46071 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-1c5592bb0dc46071 .chartlet-label,#chartlet-1c5592bb0dc46071 .chartlet-tick,#chartlet-1c5592bb0dc46071 .chartlet-value,#chartlet-1c5592bb0dc46071 .chartlet-value-inverse,#chartlet-1c5592bb0dc46071 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-1c5592bb0dc46071 .chartlet-value,#chartlet-1c5592bb0dc46071 .chartlet-value-inverse{font-weight:600}#chartlet-1c5592bb0dc46071 .chartlet-value{fill:var(--chartlet-text)}#chartlet-1c5592bb0dc46071 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-1c5592bb0dc46071 .chartlet-axis-title{font-weight:600}#chartlet-1c5592bb0dc46071 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-1c5592bb0dc46071 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-1c5592bb0dc46071 .chartlet-bar,#chartlet-1c5592bb0dc46071 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-1c5592bb0dc46071 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-1c5592bb0dc46071 .chartlet-background{fill:var(--chartlet-background)}#chartlet-1c5592bb0dc46071 .chartlet-hm-s0{fill:#cde0f5}#chartlet-1c5592bb0dc46071 .chartlet-hm-s1{fill:#a7c8ea}#chartlet-1c5592bb0dc46071 .chartlet-hm-s2{fill:#81afdf}#chartlet-1c5592bb0dc46071 .chartlet-hm-s3{fill:#5b97d3}#chartlet-1c5592bb0dc46071 .chartlet-hm-s4{fill:#0f66ac}#chartlet-1c5592bb0dc46071 .chartlet-hm-s5{fill:#064f89}#chartlet-1c5592bb0dc46071 .chartlet-hm-d0{fill:#9c4a05}#chartlet-1c5592bb0dc46071 .chartlet-hm-d1{fill:#e0852a}#chartlet-1c5592bb0dc46071 .chartlet-hm-d2{fill:#f6c389}#chartlet-1c5592bb0dc46071 .chartlet-hm-d3{fill:#f4f4f4}#chartlet-1c5592bb0dc46071 .chartlet-hm-d4{fill:#a9cfe6}#chartlet-1c5592bb0dc46071 .chartlet-hm-d5{fill:#5b97d3}#chartlet-1c5592bb0dc46071 .chartlet-hm-d6{fill:#0f66ac}#chartlet-1c5592bb0dc46071 .chartlet-hm-c1{fill:var(--chartlet-color-1)}#chartlet-1c5592bb0dc46071 .chartlet-hm-c2{fill:var(--chartlet-color-2)}#chartlet-1c5592bb0dc46071 .chartlet-hm-c3{fill:var(--chartlet-color-3)}#chartlet-1c5592bb0dc46071 .chartlet-hm-c4{fill:var(--chartlet-color-4)}#chartlet-1c5592bb0dc46071 .chartlet-hm-cell{stroke:var(--chartlet-background);stroke-width:1}#chartlet-1c5592bb0dc46071 .chartlet-hm-key{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-1c5592bb0dc46071 .chartlet-hm-missing{fill:none;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:3 3}#chartlet-1c5592bb0dc46071 .chartlet-hm-value{font-size:12px;font-weight:600}#chartlet-1c5592bb0dc46071 .chartlet-hm-on-light{fill:#172033}#chartlet-1c5592bb0dc46071 .chartlet-hm-on-dark{fill:#fff}#chartlet-1c5592bb0dc46071 .chartlet-hm-symbol{fill:var(--chartlet-background);stroke:var(--chartlet-text);stroke-width:1.5}#chartlet-1c5592bb0dc46071 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}</style><text x="154.12" y="26" text-anchor="middle" class="chartlet-label">Pages</text><text x="250.12" y="26" text-anchor="middle" class="chartlet-label">Comments</text><text x="346.12" y="26" text-anchor="middle" class="chartlet-label">Releases</text><text x="442.12" y="26" text-anchor="middle" class="chartlet-label">Settings</text><text x="98.12" y="56" text-anchor="end" class="chartlet-label">Reader</text><rect x="106.12" y="34" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c1"><title>Reader, Pages: Read</title></rect><circle cx="154.12" cy="52" r="5" class="chartlet-hm-symbol"/><rect x="202.12" y="34" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c1"><title>Reader, Comments: Read</title></rect><circle cx="250.12" cy="52" r="5" class="chartlet-hm-symbol"/><rect x="298.12" y="34" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c3"><title>Reader, Releases: None</title></rect><polyline points="346.12,47 351.12,57 341.12,57 346.12,47" class="chartlet-hm-symbol"/><rect x="394.12" y="34" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c3"><title>Reader, Settings: None</title></rect><polyline points="442.12,47 447.12,57 437.12,57 442.12,47" class="chartlet-hm-symbol"/><text x="98.12" y="92" text-anchor="end" class="chartlet-label">Contributor</text><rect x="106.12" y="70" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Contributor, Pages: Write</title></rect><rect x="149.12" y="83" width="10" height="10" class="chartlet-hm-symbol"/><rect x="202.12" y="70" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Contributor, Comments: Write</title></rect><rect x="245.12" y="83" width="10" height="10" class="chartlet-hm-symbol"/><rect x="298.12" y="70" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c1"><title>Contributor, Releases: Read</title></rect><circle cx="346.12" cy="88" r="5" class="chartlet-hm-symbol"/><rect x="394.12" y="70" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c3"><title>Contributor, Settings: None</title></rect><polyline points="442.12,83 447.12,93 437.12,93 442.12,83" class="chartlet-hm-symbol"/><text x="98.12" y="128" text-anchor="end" class="chartlet-label">Maintainer</text><rect x="106.12" y="106" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Maintainer, Pages: Write</title></rect><rect x="149.12" y="119" width="10" height="10" class="chartlet-hm-symbol"/><rect x="202.12" y="106" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Maintainer, Comments: Write</title></rect><rect x="245.12" y="119" width="10" height="10" class="chartlet-hm-symbol"/><rect x="298.12" y="106" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Maintainer, Releases: Write</title></rect><rect x="341.12" y="119" width="10" height="10" class="chartlet-hm-symbol"/><rect x="394.12" y="106" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c1"><title>Maintainer, Settings: Read</title></rect><circle cx="442.12" cy="124" r="5" class="chartlet-hm-symbol"/><text x="98.12" y="164" text-anchor="end" class="chartlet-label">Owner</text><rect x="106.12" y="142" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Owner, Pages: Write</title></rect><rect x="149.12" y="155" width="10" height="10" class="chartlet-hm-symbol"/><rect x="202.12" y="142" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Owner, Comments: Write</title></rect><rect x="245.12" y="155" width="10" height="10" class="chartlet-hm-symbol"/><rect x="298.12" y="142" width="96" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Owner, Releases: Write</title></rect><rect x="341.12" y="155" width="10" height="10" class="chartlet-hm-symbol"/><rect x="394.12" y="142" width="96" height="36" class="chartlet-hm-missing"><title>Owner, Settings: no value</title></rect><rect x="24" y="194" width="14" height="12" class="chartlet-hm-key chartlet-hm-c1"/><circle cx="31" cy="200" r="4" class="chartlet-hm-symbol"/><text x="46" y="204.5" text-anchor="start" class="chartlet-legend">Read</text><rect x="24" y="216" width="14" height="12" class="chartlet-hm-key chartlet-hm-c2"/><rect x="27" y="218" width="8" height="8" class="chartlet-hm-symbol"/><text x="46" y="226.5" text-anchor="start" class="chartlet-legend">Write</text><rect x="24" y="238" width="14" height="12" class="chartlet-hm-key chartlet-hm-c3"/><polyline points="31,240 35,248 27,248 31,240" class="chartlet-hm-symbol"/><text x="46" y="248.5" text-anchor="start" class="chartlet-legend">None</text><rect x="24" y="260" width="14" height="12" class="chartlet-hm-missing"/><text x="46" y="270.5" text-anchor="start" class="chartlet-legend">no value</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="380" height="460" viewBox="0 0 380 460" id="chartlet-1c5592bb0dc46071-m" role="img" aria-labelledby="chartlet-1c5592bb0dc46071-m-title chartlet-1c5592bb0dc46071-m-description" class="chartlet-root"><title id="chartlet-1c5592bb0dc46071-m-title">Who may do what</title><desc id="chartlet-1c5592bb0dc46071-m-description">Heatmap of 4 rows by 4 columns, each cell one category. Cells by category: Read 4, Write 8, None 3. 1 without a value.</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-1c5592bb0dc46071-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-1c5592bb0dc46071-m .chartlet-label,#chartlet-1c5592bb0dc46071-m .chartlet-tick,#chartlet-1c5592bb0dc46071-m .chartlet-value,#chartlet-1c5592bb0dc46071-m .chartlet-value-inverse,#chartlet-1c5592bb0dc46071-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-1c5592bb0dc46071-m .chartlet-value,#chartlet-1c5592bb0dc46071-m .chartlet-value-inverse{font-weight:600}#chartlet-1c5592bb0dc46071-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-1c5592bb0dc46071-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-1c5592bb0dc46071-m .chartlet-axis-title{font-weight:600}#chartlet-1c5592bb0dc46071-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-1c5592bb0dc46071-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-1c5592bb0dc46071-m .chartlet-bar,#chartlet-1c5592bb0dc46071-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-1c5592bb0dc46071-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-1c5592bb0dc46071-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-1c5592bb0dc46071-m .chartlet-hm-s0{fill:#cde0f5}#chartlet-1c5592bb0dc46071-m .chartlet-hm-s1{fill:#a7c8ea}#chartlet-1c5592bb0dc46071-m .chartlet-hm-s2{fill:#81afdf}#chartlet-1c5592bb0dc46071-m .chartlet-hm-s3{fill:#5b97d3}#chartlet-1c5592bb0dc46071-m .chartlet-hm-s4{fill:#0f66ac}#chartlet-1c5592bb0dc46071-m .chartlet-hm-s5{fill:#064f89}#chartlet-1c5592bb0dc46071-m .chartlet-hm-d0{fill:#9c4a05}#chartlet-1c5592bb0dc46071-m .chartlet-hm-d1{fill:#e0852a}#chartlet-1c5592bb0dc46071-m .chartlet-hm-d2{fill:#f6c389}#chartlet-1c5592bb0dc46071-m .chartlet-hm-d3{fill:#f4f4f4}#chartlet-1c5592bb0dc46071-m .chartlet-hm-d4{fill:#a9cfe6}#chartlet-1c5592bb0dc46071-m .chartlet-hm-d5{fill:#5b97d3}#chartlet-1c5592bb0dc46071-m .chartlet-hm-d6{fill:#0f66ac}#chartlet-1c5592bb0dc46071-m .chartlet-hm-c1{fill:var(--chartlet-color-1)}#chartlet-1c5592bb0dc46071-m .chartlet-hm-c2{fill:var(--chartlet-color-2)}#chartlet-1c5592bb0dc46071-m .chartlet-hm-c3{fill:var(--chartlet-color-3)}#chartlet-1c5592bb0dc46071-m .chartlet-hm-c4{fill:var(--chartlet-color-4)}#chartlet-1c5592bb0dc46071-m .chartlet-hm-cell{stroke:var(--chartlet-background);stroke-width:1}#chartlet-1c5592bb0dc46071-m .chartlet-hm-key{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-1c5592bb0dc46071-m .chartlet-hm-missing{fill:none;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:3 3}#chartlet-1c5592bb0dc46071-m .chartlet-hm-value{font-size:12px;font-weight:600}#chartlet-1c5592bb0dc46071-m .chartlet-hm-on-light{fill:#172033}#chartlet-1c5592bb0dc46071-m .chartlet-hm-on-dark{fill:#fff}#chartlet-1c5592bb0dc46071-m .chartlet-hm-symbol{fill:var(--chartlet-background);stroke:var(--chartlet-text);stroke-width:1.5}#chartlet-1c5592bb0dc46071-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-1c5592bb0dc46071-m .chartlet-title-small{font-size:18px}</style><text x="128.12" y="26" text-anchor="middle" class="chartlet-label">Pages</text><text x="196.12" y="26" text-anchor="middle" class="chartlet-label">Comments</text><text x="264.12" y="26" text-anchor="middle" class="chartlet-label">Releases</text><text x="332.12" y="26" text-anchor="middle" class="chartlet-label">Settings</text><text x="86.12" y="56" text-anchor="end" class="chartlet-label">Reader</text><rect x="94.12" y="34" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c1"><title>Reader, Pages: Read</title></rect><circle cx="128.12" cy="52" r="5" class="chartlet-hm-symbol"/><rect x="162.12" y="34" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c1"><title>Reader, Comments: Read</title></rect><circle cx="196.12" cy="52" r="5" class="chartlet-hm-symbol"/><rect x="230.12" y="34" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c3"><title>Reader, Releases: None</title></rect><polyline points="264.12,47 269.12,57 259.12,57 264.12,47" class="chartlet-hm-symbol"/><rect x="298.12" y="34" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c3"><title>Reader, Settings: None</title></rect><polyline points="332.12,47 337.12,57 327.12,57 332.12,47" class="chartlet-hm-symbol"/><text x="86.12" y="92" text-anchor="end" class="chartlet-label">Contributor</text><rect x="94.12" y="70" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Contributor, Pages: Write</title></rect><rect x="123.12" y="83" width="10" height="10" class="chartlet-hm-symbol"/><rect x="162.12" y="70" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Contributor, Comments: Write</title></rect><rect x="191.12" y="83" width="10" height="10" class="chartlet-hm-symbol"/><rect x="230.12" y="70" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c1"><title>Contributor, Releases: Read</title></rect><circle cx="264.12" cy="88" r="5" class="chartlet-hm-symbol"/><rect x="298.12" y="70" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c3"><title>Contributor, Settings: None</title></rect><polyline points="332.12,83 337.12,93 327.12,93 332.12,83" class="chartlet-hm-symbol"/><text x="86.12" y="128" text-anchor="end" class="chartlet-label">Maintainer</text><rect x="94.12" y="106" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Maintainer, Pages: Write</title></rect><rect x="123.12" y="119" width="10" height="10" class="chartlet-hm-symbol"/><rect x="162.12" y="106" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Maintainer, Comments: Write</title></rect><rect x="191.12" y="119" width="10" height="10" class="chartlet-hm-symbol"/><rect x="230.12" y="106" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Maintainer, Releases: Write</title></rect><rect x="259.12" y="119" width="10" height="10" class="chartlet-hm-symbol"/><rect x="298.12" y="106" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c1"><title>Maintainer, Settings: Read</title></rect><circle cx="332.12" cy="124" r="5" class="chartlet-hm-symbol"/><text x="86.12" y="164" text-anchor="end" class="chartlet-label">Owner</text><rect x="94.12" y="142" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Owner, Pages: Write</title></rect><rect x="123.12" y="155" width="10" height="10" class="chartlet-hm-symbol"/><rect x="162.12" y="142" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Owner, Comments: Write</title></rect><rect x="191.12" y="155" width="10" height="10" class="chartlet-hm-symbol"/><rect x="230.12" y="142" width="68" height="36" class="chartlet-hm-cell chartlet-hm-c2"><title>Owner, Releases: Write</title></rect><rect x="259.12" y="155" width="10" height="10" class="chartlet-hm-symbol"/><rect x="298.12" y="142" width="68" height="36" class="chartlet-hm-missing"><title>Owner, Settings: no value</title></rect><rect x="12" y="194" width="14" height="12" class="chartlet-hm-key chartlet-hm-c1"/><circle cx="19" cy="200" r="4" class="chartlet-hm-symbol"/><text x="34" y="204.5" text-anchor="start" class="chartlet-legend">Read</text><rect x="12" y="216" width="14" height="12" class="chartlet-hm-key chartlet-hm-c2"/><rect x="15" y="218" width="8" height="8" class="chartlet-hm-symbol"/><text x="34" y="226.5" text-anchor="start" class="chartlet-legend">Write</text><rect x="12" y="238" width="14" height="12" class="chartlet-hm-key chartlet-hm-c3"/><polyline points="19,240 23,248 15,248 19,240" class="chartlet-hm-symbol"/><text x="34" y="248.5" text-anchor="start" class="chartlet-legend">None</text><rect x="12" y="260" width="14" height="12" class="chartlet-hm-missing"/><text x="34" y="270.5" text-anchor="start" class="chartlet-legend">no value</text></svg></div><p class="chartlet-source">Source: Illustrative roles of a documentation project</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Who may do what</caption><thead><tr><th scope="col">Row</th><th scope="col">Column</th><th scope="col">Category</th></tr></thead><tbody><tr><th scope="row">Reader</th><td>Pages</td><td>Read</td></tr><tr><th scope="row">Reader</th><td>Comments</td><td>Read</td></tr><tr><th scope="row">Reader</th><td>Releases</td><td>None</td></tr><tr><th scope="row">Reader</th><td>Settings</td><td>None</td></tr><tr><th scope="row">Contributor</th><td>Pages</td><td>Write</td></tr><tr><th scope="row">Contributor</th><td>Comments</td><td>Write</td></tr><tr><th scope="row">Contributor</th><td>Releases</td><td>Read</td></tr><tr><th scope="row">Contributor</th><td>Settings</td><td>None</td></tr><tr><th scope="row">Maintainer</th><td>Pages</td><td>Write</td></tr><tr><th scope="row">Maintainer</th><td>Comments</td><td>Write</td></tr><tr><th scope="row">Maintainer</th><td>Releases</td><td>Write</td></tr><tr><th scope="row">Maintainer</th><td>Settings</td><td>Read</td></tr><tr><th scope="row">Owner</th><td>Pages</td><td>Write</td></tr><tr><th scope="row">Owner</th><td>Comments</td><td>Write</td></tr><tr><th scope="row">Owner</th><td>Releases</td><td>Write</td></tr><tr><th scope="row">Owner</th><td>Settings</td><td>no value</td></tr></tbody></table></details></figure></div>