tw93--kami
wehub-resource-sync
188 行
8.5 KiB
HTML
188 行
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<!-- ==================================================================
|
||
DIAGRAM · Bar Chart (kami palette)
|
||
Grouped bar chart for categorical comparison (revenue, market share, etc.)
|
||
Up to 8 categories × 3 series. Demo: 4 quarters × 2 series.
|
||
DATA START / DATA END marks the region Claude replaces when filling.
|
||
================================================================== -->
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Bar Chart · kami diagram</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--parchment: #f5f4ed;
|
||
--ivory: #faf9f5;
|
||
--near-black: #141413;
|
||
--olive: #504e49;
|
||
--stone: #6b6a64;
|
||
--brand: #1B365D;
|
||
--brand-tint: #EEF2F7;
|
||
--border: #e8e6dc;
|
||
|
||
--serif: Charter, Georgia, Palatino, serif;
|
||
--sans: var(--serif);
|
||
--mono: "JetBrains Mono", "SF Mono", Consolas, "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", monospace;
|
||
}
|
||
|
||
/* Poster-size page so WeasyPrint exports the full diagram without
|
||
A4 clipping; browsers ignore @page. */
|
||
@page { size: 1000px 960px; margin: 0; }
|
||
|
||
body {
|
||
font-family: var(--sans);
|
||
background: var(--parchment);
|
||
color: var(--near-black);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 3rem 2rem;
|
||
}
|
||
|
||
.frame { max-width: 920px; width: 100%; }
|
||
|
||
.eyebrow {
|
||
font-family: var(--mono);
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
color: var(--stone);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
h1 {
|
||
font-family: var(--serif);
|
||
font-size: 1.9rem;
|
||
font-weight: 500;
|
||
letter-spacing: -0.3pt;
|
||
line-height: 1.15;
|
||
margin-bottom: 1.6rem;
|
||
}
|
||
|
||
svg { width: 100%; min-width: 640px; display: block; }
|
||
|
||
.caption {
|
||
font-family: var(--serif);
|
||
font-size: 0.95rem;
|
||
color: var(--olive);
|
||
margin-top: 1rem;
|
||
max-width: 52ch;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="frame">
|
||
<p class="eyebrow">Bar Chart · kami diagram</p>
|
||
<h1>{{Chart Title}}</h1>
|
||
|
||
<!-- ============================================================
|
||
DATA START
|
||
Chart area: x=60 y=40 w=560 h=280 · base y=320
|
||
viewBox: 0 0 680 420
|
||
Groups: 4 · group-width=140 · bar-width=32 · gap=8
|
||
Scale: max=140 · 1 unit = 2px
|
||
Y-axis labels: 0/20/40/60/80/100/120/140
|
||
Series colors: brand=#1B365D olive=#504e49
|
||
============================================================ -->
|
||
<svg viewBox="0 0 680 420" xmlns="http://www.w3.org/2000/svg">
|
||
|
||
<!-- Canvas -->
|
||
<rect width="100%" height="100%" fill="#f5f4ed"/>
|
||
|
||
<!-- Horizontal grid lines (y = 320 down to 40, step 40 = 20 units × 2px) -->
|
||
<line x1="60" y1="320" x2="620" y2="320" stroke="#e8e7e1" stroke-width="0.8"/>
|
||
<line x1="60" y1="280" x2="620" y2="280" stroke="#e8e7e1" stroke-width="0.8"/>
|
||
<line x1="60" y1="240" x2="620" y2="240" stroke="#e8e7e1" stroke-width="0.8"/>
|
||
<line x1="60" y1="200" x2="620" y2="200" stroke="#e8e7e1" stroke-width="0.8"/>
|
||
<line x1="60" y1="160" x2="620" y2="160" stroke="#e8e7e1" stroke-width="0.8"/>
|
||
<line x1="60" y1="120" x2="620" y2="120" stroke="#e8e7e1" stroke-width="0.8"/>
|
||
<line x1="60" y1="80" x2="620" y2="80" stroke="#e8e7e1" stroke-width="0.8"/>
|
||
<line x1="60" y1="40" x2="620" y2="40" stroke="#e8e7e1" stroke-width="0.8"/>
|
||
|
||
<!-- Y-axis labels -->
|
||
<text x="52" y="324" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">0</text>
|
||
<text x="52" y="284" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">20</text>
|
||
<text x="52" y="244" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">40</text>
|
||
<text x="52" y="204" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">60</text>
|
||
<text x="52" y="164" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">80</text>
|
||
<text x="52" y="124" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">100</text>
|
||
<text x="52" y="84" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">120</text>
|
||
<text x="52" y="44" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">140</text>
|
||
|
||
<!-- Y-axis unit label -->
|
||
<text x="16" y="184" fill="#6b6a64" font-size="9" font-family="'JetBrains Mono', monospace" letter-spacing="0.12em" transform="rotate(-90 16 184)" text-anchor="middle">UNIT</text>
|
||
|
||
<!-- X-axis baseline -->
|
||
<line x1="60" y1="320" x2="620" y2="320" stroke="#141413" stroke-width="0.8"/>
|
||
|
||
<!-- ==================================================
|
||
BARS · replace values between DATA START / DATA END
|
||
Group centers: 130, 270, 410, 550
|
||
Series A (brand) bars at: 94/234/374/514 · h from base 320
|
||
Series B (olive) bars at: 134/274/414/554 · h from base 320
|
||
================================================== -->
|
||
|
||
<!-- Group 1: x-label "2021" -->
|
||
<!-- Series A: value 44 → height 88, top y=232 -->
|
||
<rect x="94" y="232" width="32" height="88" fill="#1B365D" rx="2"/>
|
||
<!-- Series B: value 32 → height 64, top y=256 -->
|
||
<rect x="134" y="256" width="32" height="64" fill="#504e49" rx="2"/>
|
||
|
||
<!-- Group 2: x-label "2022" -->
|
||
<!-- Series A: value 60 → height 120, top y=200 -->
|
||
<rect x="234" y="200" width="32" height="120" fill="#1B365D" rx="2"/>
|
||
<!-- Series B: value 48 → height 96, top y=224 -->
|
||
<rect x="274" y="224" width="32" height="96" fill="#504e49" rx="2"/>
|
||
|
||
<!-- Group 3: x-label "2023" (focal) -->
|
||
<!-- Series A: value 72 → height 144, top y=176 -->
|
||
<rect x="374" y="176" width="32" height="144" fill="#1B365D" rx="2"/>
|
||
<!-- Series B: value 64 → height 128, top y=192 -->
|
||
<rect x="414" y="192" width="32" height="128" fill="#504e49" rx="2"/>
|
||
|
||
<!-- Group 4: x-label "2024" -->
|
||
<!-- Series A: value 88 → height 176, top y=144 -->
|
||
<rect x="514" y="144" width="32" height="176" fill="#1B365D" rx="2"/>
|
||
<!-- Series B: value 76 → height 152, top y=168 -->
|
||
<rect x="554" y="168" width="32" height="152" fill="#504e49" rx="2"/>
|
||
|
||
<!-- Data labels (top of each bar) -->
|
||
<text x="110" y="228" fill="#141413" font-size="10" font-family="inherit" font-weight="500" text-anchor="middle">44</text>
|
||
<text x="150" y="252" fill="#141413" font-size="10" font-family="inherit" text-anchor="middle">32</text>
|
||
|
||
<text x="250" y="196" fill="#141413" font-size="10" font-family="inherit" font-weight="500" text-anchor="middle">60</text>
|
||
<text x="290" y="220" fill="#141413" font-size="10" font-family="inherit" text-anchor="middle">48</text>
|
||
|
||
<text x="390" y="172" fill="#141413" font-size="10" font-family="inherit" font-weight="500" text-anchor="middle">72</text>
|
||
<text x="430" y="188" fill="#141413" font-size="10" font-family="inherit" text-anchor="middle">64</text>
|
||
|
||
<text x="530" y="140" fill="#141413" font-size="10" font-family="inherit" font-weight="500" text-anchor="middle">88</text>
|
||
<text x="570" y="164" fill="#141413" font-size="10" font-family="inherit" text-anchor="middle">76</text>
|
||
|
||
<!-- X-axis category labels (group centers) -->
|
||
<text x="130" y="340" fill="#141413" font-size="11" font-family="inherit" text-anchor="middle">2021</text>
|
||
<text x="270" y="340" fill="#141413" font-size="11" font-family="inherit" text-anchor="middle">2022</text>
|
||
<text x="410" y="340" fill="#141413" font-size="11" font-family="inherit" text-anchor="middle">2023</text>
|
||
<text x="550" y="340" fill="#141413" font-size="11" font-family="inherit" text-anchor="middle">2024</text>
|
||
|
||
<!-- ================================================== DATA END -->
|
||
|
||
<!-- Legend -->
|
||
<line x1="60" y1="368" x2="620" y2="368" stroke="#e8e7e1" stroke-width="0.8"/>
|
||
|
||
<rect x="60" y="380" width="12" height="12" fill="#1B365D" rx="2"/>
|
||
<text x="78" y="391" fill="#504e49" font-size="10" font-family="inherit">{{Series A label}}</text>
|
||
|
||
<rect x="200" y="380" width="12" height="12" fill="#504e49" rx="2"/>
|
||
<text x="218" y="391" fill="#504e49" font-size="10" font-family="inherit">{{Series B label}}</text>
|
||
|
||
</svg>
|
||
|
||
<p class="caption">{{Caption text. The focal series in ink-blue carries the primary argument. State the takeaway here, not a description of what is plotted.}}</p>
|
||
</div>
|
||
</body>
|
||
</html>
|