chartlet 0.21.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>Effect of the intervention on systolic blood pressure</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="820" height="380" viewBox="0 0 820 380" id="chartlet-5925b0ab0409a031" role="img" aria-labelledby="chartlet-5925b0ab0409a031-title chartlet-5925b0ab0409a031-description" class="chartlet-root"><title id="chartlet-5925b0ab0409a031-title">Effect of the intervention on systolic blood pressure</title><desc id="chartlet-5925b0ab0409a031-description">Range chart with 6 categories, each a span from low to high and a central value. Lowest low: −9.9 (Berg 2019 (n=120)). Highest high: 4.1 (Dubois 2021 (n=95)). Overall result, drawn as a diamond: Overall (random effects) (−3.3 (−4.7 to −1.9)). The area of each square follows the weight of its span. Reference lines: No effect at 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-5925b0ab0409a031 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-5925b0ab0409a031 .chartlet-label,#chartlet-5925b0ab0409a031 .chartlet-tick,#chartlet-5925b0ab0409a031 .chartlet-value,#chartlet-5925b0ab0409a031 .chartlet-value-inverse,#chartlet-5925b0ab0409a031 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-5925b0ab0409a031 .chartlet-value,#chartlet-5925b0ab0409a031 .chartlet-value-inverse{font-weight:600}#chartlet-5925b0ab0409a031 .chartlet-value{fill:var(--chartlet-text)}#chartlet-5925b0ab0409a031 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-5925b0ab0409a031 .chartlet-axis-title{font-weight:600}#chartlet-5925b0ab0409a031 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-5925b0ab0409a031 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-5925b0ab0409a031 .chartlet-bar,#chartlet-5925b0ab0409a031 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-5925b0ab0409a031 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-5925b0ab0409a031 .chartlet-background{fill:var(--chartlet-background)}#chartlet-5925b0ab0409a031 .chartlet-range{fill:var(--chartlet-accent);fill-opacity:.3;stroke:var(--chartlet-accent);stroke-width:1}#chartlet-5925b0ab0409a031 .chartlet-range-hatch{stroke:none}#chartlet-5925b0ab0409a031 .chartlet-hatch-line{stroke:var(--chartlet-accent);stroke-width:1.2;opacity:.75}#chartlet-5925b0ab0409a031 .chartlet-range-mid{stroke:var(--chartlet-text);stroke-width:3}#chartlet-5925b0ab0409a031 .chartlet-range-weight{fill:var(--chartlet-text);stroke:none}#chartlet-5925b0ab0409a031 .chartlet-range-summary{fill:var(--chartlet-text);fill-opacity:.85;stroke:var(--chartlet-text);stroke-width:1}#chartlet-5925b0ab0409a031 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-5925b0ab0409a031 .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-5925b0ab0409a031 .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}</style><line x1="183.68" y1="34" x2="183.68" y2="324" class="chartlet-grid"/><text x="183.68" y="346" text-anchor="middle" class="chartlet-tick">−15</text><line x1="284.053" y1="34" x2="284.053" y2="324" class="chartlet-grid"/><text x="284.053" y="346" text-anchor="middle" class="chartlet-tick">−10</text><line x1="384.426" y1="34" x2="384.426" y2="324" class="chartlet-grid"/><text x="384.426" y="346" text-anchor="middle" class="chartlet-tick">−5</text><line x1="484.799" y1="34" x2="484.799" y2="324" class="chartlet-zero"/><text x="484.799" y="346" text-anchor="middle" class="chartlet-tick">0</text><line x1="585.172" y1="34" x2="585.172" y2="324" class="chartlet-grid"/><text x="585.172" y="346" text-anchor="middle" class="chartlet-tick">5</text><line x1="685.546" y1="34" x2="685.546" y2="324" class="chartlet-grid"/><text x="685.546" y="346" text-anchor="middle" class="chartlet-tick">10</text><text x="434.613" y="368" text-anchor="middle" class="chartlet-axis-title">Difference in mmHg (negative favors the intervention)</text><polyline points="484.799,34 484.799,324" class="chartlet-rule"><title>No effect: 0</title></polyline><rect x="328.217" y="56.667" width="132.493" height="3" class="chartlet-range"><title>Alvarez 2018 (n=240): −4.5 (−7.8 to −1.2), weight 24</title></rect><rect x="389.108" y="52.811" width="10.711" height="10.711" class="chartlet-range-weight"><title>Alvarez 2018 (n=240): −4.5 (−7.8 to −1.2), weight 24</title></rect><text x="490.799" y="62.167" text-anchor="start" class="chartlet-value">−4.5 (−7.8 to −1.2)</text><text x="171.68" y="62.167" text-anchor="end" class="chartlet-label">Alvarez 2018 (n=240)</text><rect x="286.061" y="105" width="232.866" height="3" class="chartlet-range"><title>Berg 2019 (n=120): −4.1 (−9.9 to 1.7), weight 11</title></rect><rect x="398.868" y="102.874" width="7.252" height="7.252" class="chartlet-range-weight"><title>Berg 2019 (n=120): −4.1 (−9.9 to 1.7), weight 11</title></rect><text x="526.926" y="110.5" text-anchor="start" class="chartlet-value">−4.1 (−9.9 to 1.7)</text><text x="171.68" y="110.5" text-anchor="end" class="chartlet-label">Berg 2019 (n=120)</text><rect x="376.396" y="153.333" width="104.388" height="3" class="chartlet-range"><title>Chen 2020 (n=410): −2.8 (−5.4 to −0.2), weight 41</title></rect><rect x="421.59" y="147.833" width="14" height="14" class="chartlet-range-weight"><title>Chen 2020 (n=410): −2.8 (−5.4 to −0.2), weight 41</title></rect><text x="488.784" y="158.833" text-anchor="start" class="chartlet-value">−2.8 (−5.4 to −0.2)</text><text x="171.68" y="158.833" text-anchor="end" class="chartlet-label">Chen 2020 (n=410)</text><rect x="354.314" y="201.667" width="212.791" height="3" class="chartlet-range"><title>Dubois 2021 (n=95): −1.2 (−6.5 to 4.1), weight 9</title></rect><rect x="457.43" y="199.887" width="6.559" height="6.559" class="chartlet-range-weight"><title>Dubois 2021 (n=95): −1.2 (−6.5 to 4.1), weight 9</title></rect><text x="575.105" y="207.167" text-anchor="start" class="chartlet-value">−1.2 (−6.5 to 4.1)</text><text x="171.68" y="207.167" text-anchor="end" class="chartlet-label">Dubois 2021 (n=95)</text><rect x="312.158" y="250" width="164.612" height="3" class="chartlet-range"><title>Evans 2022 (n=180): −4.5 (−8.6 to −0.4), weight 15</title></rect><rect x="390.23" y="247.266" width="8.468" height="8.468" class="chartlet-range-weight"><title>Evans 2022 (n=180): −4.5 (−8.6 to −0.4), weight 15</title></rect><text x="490.799" y="255.5" text-anchor="start" class="chartlet-value">−4.5 (−8.6 to −0.4)</text><text x="171.68" y="255.5" text-anchor="end" class="chartlet-label">Evans 2022 (n=180)</text><polyline points="390.449,299.833 418.553,290.733 446.658,299.833 418.553,308.933 390.449,299.833" class="chartlet-range-summary"><title>Overall (random effects): −3.3 (−4.7 to −1.9)</title></polyline><text x="490.799" y="303.833" text-anchor="start" class="chartlet-value">−3.3 (−4.7 to −1.9)</text><text x="171.68" y="303.833" text-anchor="end" class="chartlet-label">Overall (random effects)</text><text x="488.799" y="28" text-anchor="start" class="chartlet-rule-label">No effect</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="400" height="420" viewBox="0 0 400 420" id="chartlet-5925b0ab0409a031-m" role="img" aria-labelledby="chartlet-5925b0ab0409a031-m-title chartlet-5925b0ab0409a031-m-description" class="chartlet-root"><title id="chartlet-5925b0ab0409a031-m-title">Effect of the intervention on systolic blood pressure</title><desc id="chartlet-5925b0ab0409a031-m-description">Range chart with 6 categories, each a span from low to high and a central value. Lowest low: −9.9 (Berg 2019 (n=120)). Highest high: 4.1 (Dubois 2021 (n=95)). Overall result, drawn as a diamond: Overall (random effects) (−3.3 (−4.7 to −1.9)). The area of each square follows the weight of its span. Reference lines: No effect at 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-5925b0ab0409a031-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-5925b0ab0409a031-m .chartlet-label,#chartlet-5925b0ab0409a031-m .chartlet-tick,#chartlet-5925b0ab0409a031-m .chartlet-value,#chartlet-5925b0ab0409a031-m .chartlet-value-inverse,#chartlet-5925b0ab0409a031-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-5925b0ab0409a031-m .chartlet-value,#chartlet-5925b0ab0409a031-m .chartlet-value-inverse{font-weight:600}#chartlet-5925b0ab0409a031-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-5925b0ab0409a031-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-5925b0ab0409a031-m .chartlet-axis-title{font-weight:600}#chartlet-5925b0ab0409a031-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-5925b0ab0409a031-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-5925b0ab0409a031-m .chartlet-bar,#chartlet-5925b0ab0409a031-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-5925b0ab0409a031-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-5925b0ab0409a031-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-5925b0ab0409a031-m .chartlet-range{fill:var(--chartlet-accent);fill-opacity:.3;stroke:var(--chartlet-accent);stroke-width:1}#chartlet-5925b0ab0409a031-m .chartlet-range-hatch{stroke:none}#chartlet-5925b0ab0409a031-m .chartlet-hatch-line{stroke:var(--chartlet-accent);stroke-width:1.2;opacity:.75}#chartlet-5925b0ab0409a031-m .chartlet-range-mid{stroke:var(--chartlet-text);stroke-width:3}#chartlet-5925b0ab0409a031-m .chartlet-range-weight{fill:var(--chartlet-text);stroke:none}#chartlet-5925b0ab0409a031-m .chartlet-range-summary{fill:var(--chartlet-text);fill-opacity:.85;stroke:var(--chartlet-text);stroke-width:1}#chartlet-5925b0ab0409a031-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-5925b0ab0409a031-m .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-5925b0ab0409a031-m .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-5925b0ab0409a031-m .chartlet-title-small{font-size:18px}</style><line x1="183.68" y1="34" x2="183.68" y2="364" class="chartlet-grid"/><text x="183.68" y="386" text-anchor="middle" class="chartlet-tick">−15</text><line x1="200.053" y1="34" x2="200.053" y2="364" class="chartlet-grid"/><line x1="216.426" y1="34" x2="216.426" y2="364" class="chartlet-grid"/><text x="216.426" y="386" text-anchor="middle" class="chartlet-tick">−5</text><line x1="232.799" y1="34" x2="232.799" y2="364" class="chartlet-zero"/><line x1="249.172" y1="34" x2="249.172" y2="364" class="chartlet-grid"/><text x="249.172" y="386" text-anchor="middle" class="chartlet-tick">5</text><line x1="265.546" y1="34" x2="265.546" y2="364" class="chartlet-grid"/><text x="224.613" y="408" text-anchor="middle" class="chartlet-axis-title">Difference i…</text><polyline points="232.799,34 232.799,364" class="chartlet-rule"><title>No effect: 0</title></polyline><rect x="207.257" y="60" width="21.613" height="3" class="chartlet-range"><title>Alvarez 2018 (n=240): −4.5 (−7.8 to −1.2), weight 24</title></rect><rect x="212.708" y="56.144" width="10.711" height="10.711" class="chartlet-range-weight"><title>Alvarez 2018 (n=240): −4.5 (−7.8 to −1.2), weight 24</title></rect><text x="236.87" y="65.5" text-anchor="start" class="chartlet-value">−4.5 (−7.8 to −1.2)</text><text x="171.68" y="65.5" text-anchor="end" class="chartlet-label">Alvarez 2018 (n=240)</text><rect x="200.381" y="115" width="37.986" height="3" class="chartlet-range"><title>Berg 2019 (n=120): −4.1 (−9.9 to 1.7), weight 11</title></rect><rect x="215.748" y="112.874" width="7.252" height="7.252" class="chartlet-range-weight"><title>Berg 2019 (n=120): −4.1 (−9.9 to 1.7), weight 11</title></rect><text x="246.366" y="120.5" text-anchor="start" class="chartlet-value">−4.1 (−9.9 to 1.7)</text><text x="171.68" y="120.5" text-anchor="end" class="chartlet-label">Berg 2019 (n=120)</text><rect x="215.116" y="170" width="17.028" height="3" class="chartlet-range"><title>Chen 2020 (n=410): −2.8 (−5.4 to −0.2), weight 41</title></rect><rect x="216.63" y="164.5" width="14" height="14" class="chartlet-range-weight"><title>Chen 2020 (n=410): −2.8 (−5.4 to −0.2), weight 41</title></rect><text x="240.144" y="175.5" text-anchor="start" class="chartlet-value">−2.8 (−5.4 to −0.2)</text><text x="171.68" y="175.5" text-anchor="end" class="chartlet-label">Chen 2020 (n=410)</text><rect x="211.514" y="225" width="34.711" height="3" class="chartlet-range"><title>Dubois 2021 (n=95): −1.2 (−6.5 to 4.1), weight 9</title></rect><rect x="225.59" y="223.22" width="6.559" height="6.559" class="chartlet-range-weight"><title>Dubois 2021 (n=95): −1.2 (−6.5 to 4.1), weight 9</title></rect><text x="254.225" y="230.5" text-anchor="start" class="chartlet-value">−1.2 (−6.5 to 4.1)</text><text x="171.68" y="230.5" text-anchor="end" class="chartlet-label">Dubois 2021 (n=95)</text><rect x="204.638" y="280" width="26.852" height="3" class="chartlet-range"><title>Evans 2022 (n=180): −4.5 (−8.6 to −0.4), weight 15</title></rect><rect x="213.83" y="277.266" width="8.468" height="8.468" class="chartlet-range-weight"><title>Evans 2022 (n=180): −4.5 (−8.6 to −0.4), weight 15</title></rect><text x="239.49" y="285.5" text-anchor="start" class="chartlet-value">−4.5 (−8.6 to −0.4)</text><text x="171.68" y="285.5" text-anchor="end" class="chartlet-label">Evans 2022 (n=180)</text><polyline points="217.409,336.5 221.993,327.4 226.578,336.5 221.993,345.6 217.409,336.5" class="chartlet-range-summary"><title>Overall (random effects): −3.3 (−4.7 to −1.9)</title></polyline><text x="238.799" y="340.5" text-anchor="start" class="chartlet-value">−3.3 (−4.7 to −1.9)</text><text x="171.68" y="340.5" text-anchor="end" class="chartlet-label">Overall (random effects)</text><text x="236.799" y="28" text-anchor="start" class="chartlet-rule-label">No e…</text></svg></div><p class="chartlet-source">Source: Illustrative meta-analysis</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Effect of the intervention on systolic blood pressure</caption><thead><tr><th scope="col">Category</th><th scope="col">Low</th><th scope="col">Mid</th><th scope="col">High</th><th scope="col">Weight</th></tr></thead><tbody><tr><th scope="row">Alvarez 2018 (n=240)</th><td>−7.8</td><td>−4.5</td><td>−1.2</td><td>24</td></tr><tr><th scope="row">Berg 2019 (n=120)</th><td>−9.9</td><td>−4.1</td><td>1.7</td><td>11</td></tr><tr><th scope="row">Chen 2020 (n=410)</th><td>−5.4</td><td>−2.8</td><td>−0.2</td><td>41</td></tr><tr><th scope="row">Dubois 2021 (n=95)</th><td>−6.5</td><td>−1.2</td><td>4.1</td><td>9</td></tr><tr><th scope="row">Evans 2022 (n=180)</th><td>−8.6</td><td>−4.5</td><td>−0.4</td><td>15</td></tr><tr><th scope="row">Overall (random effects) (summary)</th><td>−4.7</td><td>−3.3</td><td>−1.9</td><td>Missing</td></tr></tbody></table></details></figure></div>