라인 1계열과 강조 점

한 지표의 흐름을 6~24개 시점으로 보여주고 전환점 하나를 짚을 때. 점은 시작·끝·강조 지점에만. 강조 점 1개와 주석 한 줄. 값 바꾸는 법: 점 x = 64 + (984 ÷ (시점 수 − 1)) × 순번. 점 y = 256 − (값 − 축 최솟값) ÷ (축 최댓값 − 축 최솟값) × 232. 예시의 축은 80~180. polyline points 에 "x,y" 를 순서대로 나열. 눈금선 3개(최솟값·중간·최댓값)의 y 도 같은 식. 강조 점은 circle.dot + 값(va) + 주석 한 줄, 주석은 선과 겹치지 않는 쪽(오르는 선이면 왼쪽 위)에 배치.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Change over Time 분류(라인), Storytelling with Data(https://www.storytellingwithdata.com)의 "모든 점에 표식과 값을 달지 않고 말하려는 점에만 주석" 방식 참고. 직접 제작.

<div class="dk dk-line1">
<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="1088" y2="256" class="ax"/><text x="32" y="260" text-anchor="end">80</text>
<line x1="44" y1="140" x2="1088" y2="140" class="gr"/><text x="32" y="144" text-anchor="end">130</text>
<line x1="44" y1="24" x2="1088" y2="24" class="gr"/><text x="32" y="28" text-anchor="end">180</text>
<text x="64" y="280" text-anchor="middle">10월</text><text x="153.5" y="280" text-anchor="middle">11월</text><text x="242.9" y="280" text-anchor="middle">12월</text><text x="332.4" y="280" text-anchor="middle">1월</text><text x="421.8" y="280" text-anchor="middle">2월</text><text x="511.3" y="280" text-anchor="middle">3월</text><text x="600.7" y="280" text-anchor="middle">4월</text><text x="690.2" y="280" text-anchor="middle">5월</text><text x="779.6" y="280" text-anchor="middle">6월</text><text x="869.1" y="280" text-anchor="middle">7월</text><text x="958.5" y="280" text-anchor="middle">8월</text><text x="1048" y="280" text-anchor="middle">9월</text>
<polyline points="64,228.2 153.5,218.9 242.9,223.5 332.4,207.3 421.8,198 511.3,202.6 600.7,186.4 690.2,167.8 779.6,98.2 869.1,89 958.5,75 1048,63.4" class="ln"/>
<line x1="779.6" y1="88.2" x2="779.6" y2="64.2" class="ld"/>
<circle cx="779.6" cy="98.2" r="6.5" class="dot"/>
<text x="769.6" y="58.2" text-anchor="end" class="va">148</text>
<text x="769.6" y="76.2" text-anchor="end" class="k">신규 소재 투입</text>
<circle cx="1048" cy="63.4" r="5" class="dot m"/><text x="1048" y="51.4" text-anchor="middle" class="v">163</text>
<circle cx="64" cy="228.2" r="5" class="dot m"/><text x="64" y="216.2" text-anchor="middle" class="v">92</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

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