2계열 라인(우리와 비교 대상)

우리와 비교 대상(업종 평균, 경쟁사, 지난해) 두 흐름의 격차. 시점 6~12개. 계열 이름과 마지막 값은 선 끝에 직접 적고 범례는 두지 않음. 계열 3개까지(세 번째는 g3). 값 바꾸는 법: 점 x = 64 + (896 ÷ (시점 수 − 1)) × 순번, y = 256 − (값 − 90) ÷ 60 × 232(예시 축 90~150, 값에 맞게 축 범위 교체). 우리 계열은 polyline class="ln hot", 비교 계열은 "ln sub". 선 끝 라벨의 x = 마지막 점 x + 16, y 는 마지막 점 y 기준. 두 라벨 간격이 40px 미만이면 위 라벨을 위로, 아래 라벨을 아래로 밀어 배치.

Storytelling with Data(https://www.storytellingwithdata.com)의 선 끝 직접 라벨(범례 제거)과 비교 대상을 회색으로 낮추는 방식, Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Change over Time 참고. 두 계열은 같은 축(지수) 하나만 사용. 직접 제작.

<div class="dk dk-line2">
<div class="dk-card">
<p class="ttl"><span>주차별 계정 도달 지수 · 집행 첫 주 100 기준</span></p>
<svg width="1088" height="290" viewBox="0 0 1088 290" role="img">
<line x1="44" y1="256" x2="960" y2="256" class="ax"/><text x="32" y="260" text-anchor="end">90</text>
<line x1="44" y1="140" x2="960" y2="140" class="gr"/><text x="32" y="144" text-anchor="end">120</text>
<line x1="44" y1="24" x2="960" y2="24" class="gr"/><text x="32" y="28" text-anchor="end">150</text>
<text x="64" y="280" text-anchor="middle">1주</text><text x="192" y="280" text-anchor="middle">2주</text><text x="320" y="280" text-anchor="middle">3주</text><text x="448" y="280" text-anchor="middle">4주</text><text x="576" y="280" text-anchor="middle">5주</text><text x="704" y="280" text-anchor="middle">6주</text><text x="832" y="280" text-anchor="middle">7주</text><text x="960" y="280" text-anchor="middle">8주</text>
<polyline points="64,217.3 192,213.5 320,205.7 448,201.9 576,198 704,194.1 832,190.3 960,186.4" class="ln sub"/>
<polyline points="64,217.3 192,201.9 320,182.5 448,167.1 576,136.1 704,109.1 832,78.1 960,54.9" class="ln hot"/>
<circle cx="960" cy="186.4" r="5" class="dot s"/>
<circle cx="960" cy="54.9" r="6.5" class="dot"/>
<text x="976" y="52.9" class="va big">142</text><text x="976" y="72.9" class="v">우리 계정</text>
<text x="976" y="184.4" class="v big">108</text><text x="976" y="204.4">업종 평균</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

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