그래프와 오른쪽 해석 3줄

그래프 하나만 두면 장이 비고 읽는 법이 전달되지 않을 때의 기본 배치. 왼쪽 그래프(폭 596px), 오른쪽에 해석 3줄(굵은 한 줄 + 설명 한 줄). 왼쪽 그래프는 같은 폭의 다른 그래프로 교체 가능. 해석 2~3줄. 값 바꾸는 법: 왼쪽 막대: 기준선 y = 252, height = 값 ÷ 최댓값 × 222, y = 252 − height, 칸 폭 = 596 ÷ 막대 수, 막대 폭 60. 오른쪽은 li 3개의 굵은 문구(b)와 설명(p)만 교체. 굵은 문구는 수치나 사실, 설명은 원인이나 다음 조치. 장의 헤드카피와 같은 문장을 반복하지 않음.

컨설팅 장표 차트 관행 정리(https://deckary.com/blog/present-data-effectively-powerpoint)의 "그래프마다 so what 을 옆에 적는다" 관행과 예시 조각(D-표-주기별3단표)의 표 + 오른쪽 요점 구성 참고. 직접 제작.

<div class="dk dk-read3">
<div class="dk-card">
<p class="ttl"><span>월별 상담 신청 건수 · 단위 건</span></p>
<svg width="596" height="290" viewBox="0 0 596 290" role="img">
<line x1="0" y1="252" x2="596" y2="252" class="ax"/>
<rect x="19.7" y="123.7" width="60" height="128.3" rx="3" class="g2"/><text x="49.7" y="115.7" text-anchor="middle" class="v">182</text><text x="49.7" y="274" text-anchor="middle" class="">4월</text>
<rect x="119" y="108.2" width="60" height="143.8" rx="3" class="g2"/><text x="149" y="100.2" text-anchor="middle" class="v">204</text><text x="149" y="274" text-anchor="middle" class="">5월</text>
<rect x="218.3" y="113.2" width="60" height="138.8" rx="3" class="g2"/><text x="248.3" y="105.2" text-anchor="middle" class="v">197</text><text x="248.3" y="274" text-anchor="middle" class="">6월</text>
<rect x="317.7" y="85.7" width="60" height="166.3" rx="3" class="g2"/><text x="347.7" y="77.7" text-anchor="middle" class="v">236</text><text x="347.7" y="274" text-anchor="middle" class="">7월</text>
<rect x="417" y="63.1" width="60" height="188.9" rx="3" class="g2"/><text x="447" y="55.1" text-anchor="middle" class="v">268</text><text x="447" y="274" text-anchor="middle" class="">8월</text>
<rect x="516.3" y="30" width="60" height="222" rx="3" class="a"/><text x="546.3" y="22" text-anchor="middle" class="va">315</text><text x="546.3" y="274" text-anchor="middle" class="v">9월</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
<div class="r">
<p class="dk-lb">그래프에서 읽을 것</p>
<ol>
<li><span class="no num">01</span><div><b>7월부터 상승 구간</b><p>체험단 후기 발행이 시작된 달부터 석 달 연속 증가</p></div></li>
<li><span class="no num">02</span><div><b>9월 315건, 4월의 1.7배</b><p>광고 노출량은 같은 기간 1.1배, 증가분의 대부분은 전환 효율</p></div></li>
<li><span class="no num">03</span><div><b>6월 일시 감소</b><p>소재 교체 공백 2주의 영향. 4분기는 교체 주기를 4주로 고정</p></div></li>
</ol>
</div>
</div>

.dk-read3 .dk-card{padding:22px 32px 20px}
.dk-read3 .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-read3 .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-read3 .lg span{display:flex;align-items:center;gap:6px}
.dk-read3 .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-read3 .lg i.c-a{background:var(--ac)}
.dk-read3 .lg i.c-s{background:var(--soft)}
.dk-read3 .lg i.c-g1{background:var(--g1)}
.dk-read3 .lg i.c-g2{background:var(--g2)}
.dk-read3 .lg i.c-g3{background:var(--g3)}
.dk-read3 .lg i.c-g4{background:var(--g4)}
.dk-read3 .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-read3 svg{display:block}
.dk-read3 svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-read3 svg .a{fill:var(--ac)}
.dk-read3 svg .sf{fill:var(--soft)}
.dk-read3 svg .g1{fill:var(--g1)}
.dk-read3 svg .g2{fill:var(--g2)}
.dk-read3 svg .g3{fill:var(--g3)}
.dk-read3 svg .g4{fill:var(--g4)}
.dk-read3 svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-read3 svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-read3 svg text.k{fill:var(--ink2)}
.dk-read3 svg text.v{fill:var(--ink);font-weight:600}
.dk-read3 svg text.va{fill:var(--ac);font-weight:700}
.dk-read3 svg text.on{fill:var(--card);font-weight:600}
.dk-read3{display:grid;grid-template-columns:660px minmax(0,1fr);gap:48px;align-items:center}
.dk-read3 ol{list-style:none;margin:var(--s3) 0 0;padding:0}
.dk-read3 li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.dk-read3 li:last-child{border-bottom:0}
.dk-read3 .no{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:3px}
.dk-read3 li b{display:block;font-size:var(--f-md);font-weight:700;line-height:1.4}
.dk-read3 li p{font-size:var(--f-sm);color:var(--ink2);margin:4px 0 0}