영역 그래프(누적 추이와 목표선)

쌓여 가는 양(누적 도달, 누적 참여, 누적 후기 수)과 목표선의 관계. 시점 6~12개, 계열 1개. 축은 반드시 0에서 시작. 계열이 2개 이상이면 라인을 사용. 값 바꾸는 법: 점 x = 64 + (936 ÷ (시점 수 − 1)) × 순번, y = 256 − 값 ÷ 축 최댓값(예시 240) × 232. polyline 과 polygon 에 같은 점을 넣고 polygon 은 앞뒤에 "첫 x,256" "끝 x,256" 을 추가. 목표선 y 도 같은 식으로 계산(line.tg 와 글자). 목표선이 없으면 두 요소 삭제.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Change over Time 분류(영역은 양의 누적을 보일 때, 0 기준선 필수), Datawrapper Academy(https://www.datawrapper.de/academy/customizing-your-bar-chart) 영역 그래프 안내 참고. 직접 제작.

<div class="dk dk-area">
<div class="dk-card">
<p class="ttl"><span>주차별 누적 도달 지수 · 목표 200</span></p>
<svg width="1088" height="290" viewBox="0 0 1088 290" role="img">
<line x1="44" y1="256" x2="1088" y2="256" class="ax"/><text x="32" y="260" text-anchor="end">0</text>
<line x1="44" y1="178.7" x2="1088" y2="178.7" class="gr"/><text x="32" y="182.7" text-anchor="end">80</text>
<line x1="44" y1="101.3" x2="1088" y2="101.3" class="gr"/><text x="32" y="105.3" text-anchor="end">160</text>
<line x1="44" y1="24" x2="1088" y2="24" class="gr"/><text x="32" y="28" text-anchor="end">240</text>
<text x="64" y="280" text-anchor="middle">1주</text><text x="197.7" y="280" text-anchor="middle">2주</text><text x="331.4" y="280" text-anchor="middle">3주</text><text x="465.1" y="280" text-anchor="middle">4주</text><text x="598.9" y="280" text-anchor="middle">5주</text><text x="732.6" y="280" text-anchor="middle">6주</text><text x="866.3" y="280" text-anchor="middle">7주</text><text x="1000" y="280" text-anchor="middle">8주</text>
<polygon points="64,256 64,244.4 197.7,229.9 331.4,212.5 465.1,190.3 598.9,163.2 732.6,129.4 866.3,91.7 1000,49.1 1000,256" class="ar"/>
<line x1="44" y1="62.7" x2="1088" y2="62.7" class="tg"/><text x="1088" y="54.7" text-anchor="end" class="k">목표 200</text>
<polyline points="64,244.4 197.7,229.9 331.4,212.5 465.1,190.3 598.9,163.2 732.6,129.4 866.3,91.7 1000,49.1" class="ln hot"/>
<circle cx="1000" cy="49.1" r="6.5" class="dot"/><text x="986" y="43.1" text-anchor="end" class="va big">214</text>
<text x="465.1" y="178.3" text-anchor="middle" class="v">68</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-area .dk-card{padding:22px 32px 20px}
.dk-area .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-area .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-area .lg span{display:flex;align-items:center;gap:6px}
.dk-area .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-area .lg i.c-a{background:var(--ac)}
.dk-area .lg i.c-s{background:var(--soft)}
.dk-area .lg i.c-g1{background:var(--g1)}
.dk-area .lg i.c-g2{background:var(--g2)}
.dk-area .lg i.c-g3{background:var(--g3)}
.dk-area .lg i.c-g4{background:var(--g4)}
.dk-area .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-area svg{display:block}
.dk-area svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-area svg .a{fill:var(--ac)}
.dk-area svg .sf{fill:var(--soft)}
.dk-area svg .g1{fill:var(--g1)}
.dk-area svg .g2{fill:var(--g2)}
.dk-area svg .g3{fill:var(--g3)}
.dk-area svg .g4{fill:var(--g4)}
.dk-area svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-area svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-area svg text.k{fill:var(--ink2)}
.dk-area svg text.v{fill:var(--ink);font-weight:600}
.dk-area svg text.va{fill:var(--ac);font-weight:700}
.dk-area svg text.on{fill:var(--card);font-weight:600}
.dk-area svg .ln{fill:none;stroke:var(--g4);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.dk-area svg .ln.hot{stroke:var(--ac)}
.dk-area svg .ln.sub{stroke:var(--g2);stroke-width:2}
.dk-area svg .dot{fill:var(--ac);stroke:var(--card);stroke-width:2}
.dk-area svg .dot.m{fill:var(--g4)}
.dk-area svg .dot.s{fill:var(--g2)}
.dk-area svg .ar{fill:var(--acw)}
.dk-area svg .tg{stroke:var(--g3);stroke-width:1;stroke-dasharray:4 4;fill:none}
.dk-area svg .ld{stroke:var(--ac);stroke-width:1;fill:none}
.dk-area svg text.big{font-size:24px;font-weight:700}