제안 시스템

디자인킷 · 그래프

우리와 경쟁사 점유 100% 띠(여러 줄)

D-그래프-점유100띠-여러줄

우리와 경쟁사 점유 100% 띠(여러 줄)

언제 쓰는가

여러 구분(키워드군, 지면, 지역, 연령대)마다 우리와 경쟁사가 차지한 몫을 한 줄씩. 경쟁 현황 진단. 3~6줄, 조각 3~4개(우리, 경쟁 1~2곳, 그 외). 우리 조각은 항상 맨 왼쪽에 두고 강조색, 우리 점유 내림차순. 값 바꾸는 법: 조각 width = 비율 × 7.2(100% = 720px) − 2, 줄의 x 시작 180, 줄 y = 28 + 순번 × 50. 조각 폭이 44px 미만이면 숫자 생략. 선두 경쟁사 대비 = 우리 비율 − 가장 큰 경쟁사 비율(포인트), 앞서면 class va 와 +, 뒤지면 class v 와 − 기호.

참고

구글 애즈 입찰 통계(auction insights)의 노출 점유율 비교 표와 Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Part-to-whole 분류의 100% 누적 막대, Storytelling with Data(https://www.storytellingwithdata.com)의 "비교 기준 조각을 한쪽 끝에 붙여 기준선 공유" 원칙 참고. 선두 대비 격차 열을 붙여 직접 제작.

조각

<div class="dk dk-share">
<div class="dk-card">
<p class="ttl"><span>키워드군별 검색 광고 노출 점유율 · 최근 4주</span><span class="lg"><span><i class="c-a"></i>우리</span><span><i class="c-g4"></i>경쟁 A</span><span><i class="c-g3"></i>경쟁 B</span><span><i class="c-g1"></i>그 외</span></span></p>
<svg width="1088" height="268" viewBox="0 0 1088 268" role="img">
<text x="0" y="14">키워드군</text>
<text x="180" y="14">노출 점유 구성</text>
<text x="1088" y="14" text-anchor="end">선두 경쟁사 대비</text>
<text x="0" y="51" class="k md">브랜드 키워드</text>
<rect x="180" y="28" width="329.2" height="34" rx="2" class="a"/>
<text x="344.6" y="50" text-anchor="middle" class="on">46%</text>
<rect x="511.2" y="28" width="156.4" height="34" rx="2" class="g4"/>
<text x="589.4" y="50" text-anchor="middle" class="on">22%</text>
<rect x="669.6" y="28" width="98.8" height="34" rx="2" class="g3"/>
<text x="719" y="50" text-anchor="middle" class="on">14%</text>
<rect x="770.4" y="28" width="127.6" height="34" rx="2" class="g1"/>
<text x="834.2" y="50" text-anchor="middle" class="v">18%</text>
<text x="1088" y="51" text-anchor="end" class="va md">+24p</text>
<text x="0" y="101" class="k md">지역 키워드</text>
<rect x="180" y="78" width="192.4" height="34" rx="2" class="a"/>
<text x="276.2" y="100" text-anchor="middle" class="on">27%</text>
<rect x="374.4" y="78" width="134.8" height="34" rx="2" class="g4"/>
<text x="441.8" y="100" text-anchor="middle" class="on">19%</text>
<rect x="511.2" y="78" width="113.2" height="34" rx="2" class="g3"/>
<text x="567.8" y="100" text-anchor="middle" class="on">16%</text>
<rect x="626.4" y="78" width="271.6" height="34" rx="2" class="g1"/>
<text x="762.2" y="100" text-anchor="middle" class="v">38%</text>
<text x="1088" y="101" text-anchor="end" class="va md">+8p</text>
<text x="0" y="151" class="k md">제품군 키워드</text>
<rect x="180" y="128" width="127.6" height="34" rx="2" class="a"/>
<text x="243.8" y="150" text-anchor="middle" class="on">18%</text>
<rect x="309.6" y="128" width="242.8" height="34" rx="2" class="g4"/>
<text x="431" y="150" text-anchor="middle" class="on">34%</text>
<rect x="554.4" y="128" width="149.2" height="34" rx="2" class="g3"/>
<text x="629" y="150" text-anchor="middle" class="on">21%</text>
<rect x="705.6" y="128" width="192.4" height="34" rx="2" class="g1"/>
<text x="801.8" y="150" text-anchor="middle" class="v">27%</text>
<text x="1088" y="151" text-anchor="end" class="v md">−16p</text>
<text x="0" y="201" class="k md">정보 탐색 키워드</text>
<rect x="180" y="178" width="84.4" height="34" rx="2" class="a"/>
<text x="222.2" y="200" text-anchor="middle" class="on">12%</text>
<rect x="266.4" y="178" width="178" height="34" rx="2" class="g4"/>
<text x="355.4" y="200" text-anchor="middle" class="on">25%</text>
<rect x="446.4" y="178" width="142" height="34" rx="2" class="g3"/>
<text x="517.4" y="200" text-anchor="middle" class="on">20%</text>
<rect x="590.4" y="178" width="307.6" height="34" rx="2" class="g1"/>
<text x="744.2" y="200" text-anchor="middle" class="v">43%</text>
<text x="1088" y="201" text-anchor="end" class="v md">−13p</text>
<text x="0" y="251" class="k md">비교·추천 키워드</text>
<rect x="180" y="228" width="62.8" height="34" rx="2" class="a"/>
<text x="211.4" y="250" text-anchor="middle" class="on">9%</text>
<rect x="244.8" y="228" width="271.6" height="34" rx="2" class="g4"/>
<text x="380.6" y="250" text-anchor="middle" class="on">38%</text>
<rect x="518.4" y="228" width="170.8" height="34" rx="2" class="g3"/>
<text x="603.8" y="250" text-anchor="middle" class="on">24%</text>
<rect x="691.2" y="228" width="206.8" height="34" rx="2" class="g1"/>
<text x="794.6" y="250" text-anchor="middle" class="v">29%</text>
<text x="1088" y="251" text-anchor="end" class="v md">−29p</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

스타일

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