# Vizney Blocks

> 복사해 붙여 쓰는 HTML 대시보드 카드 37종(v0.34). 카드 하나는 <style>, 데이터 JSON, <script>를 한데 묶은 HTML 조각이며, <body> 안에 붙여 넣으면 그려진다. 데이터는 카드 안 <script type="application/json">의 값만 바꾼다. © 2026 Vizney · MIT License.

쓰는 법:
- 카드는 "목적으로 고르기"에서 고른다. 화면이 답할 질문마다 기본 카드를 먼저 쓰고, 다른 카드는 조건이 정확히 맞을 때만 쓴다. 애매하면 기본 카드를 쓴다. 카드 이름은 지표가 아니라 모양이므로, 지표 이름은 JSON의 title로 바꾼다.
- 아래 링크(.txt)의 카드 코드를 그대로 붙여 넣고 JSON 값만 바꾼다. 스타일과 스크립트는 고치지 않는다. 같은 카드를 여러 장 쓸 때는 카드 코드를 통째로 다시 붙여 넣고 각 JSON만 바꾼다.
- 카드는 놓인 자리의 폭을 채우고, 높이는 1 · 1.5 · 2단위(1단위 168px, --vzb-unit) 중 하나다: KPI - Number 1단위, KPI - Gauge · KPI - Stacked Bar 1.5단위, 나머지 2단위. 같은 줄의 카드는 가장 높은 카드에 맞춰 늘어나고 그래픽은 바닥에 붙으므로, 빈 곳이 없게 하려면 높이가 같은 카드끼리 한 줄에 둔다.
- 여러 장은 감싸는 요소에 격자를 준다: display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:16px. 카드 폭이 340px보다 좁으면 표, 도넛, 퍼널, 워터폴의 글자가 잘리거나 겹친다. KPI 카드만 둔 줄은 300px까지 줄여도 된다.
- 색과 글꼴은 :root의 --vzb-* 변수(--vzb-primary, --vzb-font 등)로 바꾼다. 변수 목록과 쓰임은 https://blocks.vizney.com/tokens.css 에 있다(카드 코드의 :where(:root) 블록과 같은 내용). 페이지 전체를 맞출 때는 그 파일의 값을 :root에 다시 적는다.
- 공통 필드: title(지표명), subtitle(기간 부제), value(KPI 카드의 대표 수치. KPI - Line과 KPI - Bar는 비우면 마지막 값), format(eok 억 단위 숫자 · krw 원 단위 숫자를 만·억·조로 줄여 적음 · usd 달러 금액을 $745.6K·$1.2M처럼 줄여 적음 · count 개수, 단위는 unit · pct 퍼센트 숫자(3.4는 3.4%), 증감은 %p · days 일수), better(up · down · neutral, 증감 색), compare({ label, value }), labels(기간 이름. values와 같은 길이로 적고, 값이 없는 기간의 값은 null), series([{ name, values }]), rows(표의 줄), curve(라인 카드의 선 모양: smooth · linear · step), lang(en이면 합계 · 기타 · 달성처럼 카드가 직접 적는 문구가 영어. 비우면 한국어).
- 증감, 비중, 달성률, 합계는 카드가 계산하므로 JSON에 적지 않는다. 순위·비중 카드는 큰 순서 정렬과 "기타" 묶기도 직접 하므로 데이터를 미리 정렬하거나 묶지 않는다.
- 금액은 미리 반올림하거나 천·백만 단위로 나누지 않고 원래 값을 넣는다. 카드가 형식(krw · usd)에 맞춰 줄여 적고 합계와 증감도 원래 값으로 계산하므로, 카드끼리 합계가 맞고 소수 자릿수도 맞는다. usd 표와 스캐터 축은 열·축마다 K · M · B 하나를 골라 열 제목과 축 이름에 $K처럼 적는다. Grid - Basic은 금액 열에 "format": "usd"를 적는다.
- 코딩 에이전트에는 스킬로 설치한다: npx skills add yehwanhwang/vizney-blocks
- 갤러리: https://blocks.vizney.com/ko/ · 영어: https://blocks.vizney.com/ (llms.txt: https://blocks.vizney.com/en/llms.txt) · 소스: https://github.com/yehwanhwang/vizney-blocks

## 목적으로 고르기

화면이 답할 질문마다 기본 카드를 먼저 쓰고, 다른 카드는 조건이 정확히 맞을 때만 쓴다. 애매하면 기본 카드를 쓴다. 여기 없는 카드는 이 조건들로 풀리지 않을 때만 쓴다.

- 현황 · 지금 얼마인가?
  - 기본 [KPI - Number](https://blocks.vizney.com/cards/kpi-number.txt): 숫자와 비교 기준만 둘 때
  - [KPI - Line](https://blocks.vizney.com/cards/kpi-line.txt): 최근 13개월 흐름도 함께 볼 때
  - [KPI - Bar](https://blocks.vizney.com/cards/kpi-bar.txt): 진행 중인 이번 달을 지난달들과 견줄 때
  - [KPI - Stacked Bar](https://blocks.vizney.com/cards/kpi-stacked-bar.txt): 합계와 그 구성을 한 카드에 둘 때
  - [Line - Tabs](https://blocks.vizney.com/cards/line-tabs.txt): 단위가 다른 지표 2–3개를 한 카드에 둘 때
- 추이 · 어떻게 변해 왔나?
  - 기본 [Line - Basic](https://blocks.vizney.com/cards/line-basic.txt): 한 지표의 흐름을 볼 때
  - [Bar - Basic](https://blocks.vizney.com/cards/bar-basic.txt): 흐름보다 기간별 크기를 견줄 때
  - [Line - Compare](https://blocks.vizney.com/cards/line-compare.txt): 작년 같은 달과 견줄 때
  - [Line - Multiple](https://blocks.vizney.com/cards/line-multiple.txt): 항목 2–3개의 흐름을 함께 볼 때
  - [Bump - Basic](https://blocks.vizney.com/cards/bump-basic.txt): 값보다 순위가 바뀐 과정을 볼 때
- 목표 · 목표까지 얼마나 왔나?
  - 기본 [KPI - Gauge](https://blocks.vizney.com/cards/kpi-gauge.txt): 지표 하나의 목표·한도 대비 진척을 볼 때
  - [Grid - Target](https://blocks.vizney.com/cards/grid-target.txt): 항목별 달성률을 금액과 함께 볼 때
  - [Bar - Target](https://blocks.vizney.com/cards/bar-target.txt): 기간마다 목표가 다를 때
  - [Line - Cumulative](https://blocks.vizney.com/cards/line-cumulative.txt): 이번 달 누계 페이스를 볼 때
  - [Line - Reference](https://blocks.vizney.com/cards/line-reference.txt): 기준선·평균을 넘었는지 볼 때
- 비교 · 무엇이 크고 작은가?
  - 기본 [Bar - Ranking](https://blocks.vizney.com/cards/bar-ranking.txt): 항목별 크기와 순위를 볼 때
  - [Bar - Compare](https://blocks.vizney.com/cards/bar-compare.txt): 작년이나 지난달 값과 견줄 때
  - [Bar - Butterfly](https://blocks.vizney.com/cards/bar-butterfly.txt): 두 집단을 같은 항목으로 견줄 때
  - [Radar - Basic](https://blocks.vizney.com/cards/radar-basic.txt): 점수 여러 개로 강점과 약점을 볼 때
- 구성 · 무엇으로 이뤄져 있나?
  - 기본 [Donut - Basic](https://blocks.vizney.com/cards/donut-basic.txt): 한 시점의 비중을 볼 때
  - [Bar - Stacked 100%](https://blocks.vizney.com/cards/bar-stacked-100.txt): 기간별 구성비 변화를 볼 때
  - [Bar - Stacked](https://blocks.vizney.com/cards/bar-stacked.txt): 합계의 흐름과 구성을 함께 볼 때
  - [Treemap - Basic](https://blocks.vizney.com/cards/treemap-basic.txt): 항목이 많거나 묶음 안에 항목이 있을 때
  - [Waffle - Basic](https://blocks.vizney.com/cards/waffle-basic.txt): 비중을 칸 수로 세어 보일 때
- 표 · 항목마다 정확히 얼마인가?
  - 기본 [Grid - Basic](https://blocks.vizney.com/cards/grid-basic.txt): 항목마다 여러 지표와 합계를 적을 때
  - [Grid - Spark](https://blocks.vizney.com/cards/grid-spark.txt): 항목마다 13개월 흐름까지 훑을 때
  - [Grid - Pivot](https://blocks.vizney.com/cards/grid-pivot.txt): 두 기준으로 나눈 금액을 교차표로 볼 때
  - [Heatmap - Basic](https://blocks.vizney.com/cards/heatmap-basic.txt): 많고 적은 칸을 색으로 찾을 때
- 증감 · 왜 늘고 줄었나?
  - 기본 [Waterfall - Basic](https://blocks.vizney.com/cards/waterfall-basic.txt): 두 시점 사이의 변화를 요인별로 나눌 때
  - [Waterfall - Subtotal](https://blocks.vizney.com/cards/waterfall-subtotal.txt): 손익 구조를 보여줄 때
  - [Bar - Diverging](https://blocks.vizney.com/cards/bar-diverging.txt): 기간별 증감·목표 차이를 볼 때
- 흐름 · 어디서 빠지고 어디로 가나?
  - 기본 [Funnel - Flow](https://blocks.vizney.com/cards/funnel-flow.txt): 단계마다 얼마나 빠져나가는지 볼 때
  - [Sankey - Basic](https://blocks.vizney.com/cards/sankey-basic.txt): 두 구분 사이의 흐름을 볼 때
  - [Sankey - Levels](https://blocks.vizney.com/cards/sankey-levels.txt): 세 단 이상 이어지는 흐름을 볼 때
- 관계 · 두 값은 어떤 관계인가?
  - 기본 [Scatter - Basic](https://blocks.vizney.com/cards/scatter-basic.txt): 두 측정값이 함께 움직이는지 볼 때
  - [Scatter - Quadrant](https://blocks.vizney.com/cards/scatter-quadrant.txt): 두 기준으로 대상을 네 무리로 나눌 때
  - [Scatter - Connected](https://blocks.vizney.com/cards/scatter-connected.txt): 두 지표의 이동 경로를 볼 때

## KPI 카드

https://blocks.vizney.com/ko/kpi/ · 모든 KPI 카드는 제목과 기간 부제, 대표 수치와 바로 뒤의 증감 배지 순서로 같은 머리를 씁니다. 배지의 화살표는 오르내림을, 색은 좋고 나쁨을 나타냅니다. 카드 높이는 Number 1, Line과 Bar 2, 나머지 1.5의 세 가지입니다. 한 줄에 섞어 놓으면 가장 높은 카드에 맞춰 늘어나고 그래픽은 바닥에 붙어, 높이와 바닥선이 맞습니다.

- [KPI - Number](https://blocks.vizney.com/cards/kpi-number.txt): 숫자와 증감 배지만 있는 카드입니다. 그래픽이 없어 좁은 자리에도 들어갑니다. 규칙: 증감은 숫자 바로 뒤에 배지로 두고, 옆에 비교 기준과 그 값을 적습니다. 무엇과 비교했는지 모르는 0.3%p는 읽을 수 없습니다. 비율 지표(pct)는 증감을 %p로 적습니다. 3.1%에서 3.4%는 0.3%p 증가이고, 9.7%로 적으면 변화가 실제보다 커 보입니다. 배지의 화살표는 오르내림을, 색은 좋고 나쁨을 나타냅니다. 반품률처럼 낮을수록 좋은 지표는 "better": "down"으로 두면 증가가 빨간 배지가 됩니다.
- [KPI - Line](https://blocks.vizney.com/cards/kpi-line.txt): 숫자 아래에 선 차트를 둔 카드입니다. 월별 흐름을 함께 보여줄 때 씁니다. 규칙: 월별 선은 13개월을 그립니다. 처음과 마지막이 같은 달이라 계절의 영향 없이 작년 같은 달과 비교할 수 있고, 증감도 전년 동월 대비로 적습니다. y축은 값의 범위에 맞춰 작은 변동도 보이게 합니다. 대신 바닥 색은 아래로 갈수록 사라지게 칠해, 면적이 0부터의 양으로 읽히지 않게 합니다. 기간 이름은 석 달 간격으로 적되 처음과 마지막은 항상 남기고, 나머지 달의 값은 마우스를 올리거나 화살표 키로 봅니다.
- [KPI - Bar](https://blocks.vizney.com/cards/kpi-bar.txt): 숫자 아래에 세로 막대를 둔 카드입니다. 이번 기간 값을 지난 기간들의 규모와 함께 볼 때 씁니다. 규칙: 막대는 길이로 읽으므로 0에서 시작합니다. 흐름만 보는 KPI - Line과 다른 점입니다. 진행 중인 이번 달(partial)은 점선 윤곽으로 그려, 다 끝난 달과 길이를 그대로 비교하지 않게 합니다. 집계 기간은 제목 아래 부제에 적고, 비교는 대표 수치의 전월 동기 대비로 합니다. 지난 기간은 옅은 주황, 마지막 기간만 진하게 둡니다. 기간 이름은 석 달 간격으로 적되 이번 기간은 항상 남깁니다.
- [KPI - Gauge](https://blocks.vizney.com/cards/kpi-gauge.txt): 반원 게이지 가운데에 숫자를 둔 카드입니다. 목표나 한도가 정해진 지표의 진척을 보여줄 때 씁니다. 규칙: 전월 대비 증감은 넣지 않습니다. 목표 대비와 전월 대비가 한 카드에 함께 있으면 숫자를 어느 기준으로 읽어야 할지 헷갈립니다. 목표를 넘으면 게이지를 끝까지 채우고, 초과분은 비율 숫자로만 보여줍니다. 예산·한도처럼 적게 쓸수록 좋은 지표("better": "down")는 사용률로 적고, 한도를 넘으면 빨간색으로 적습니다.
- [KPI - Stacked Bar](https://blocks.vizney.com/cards/kpi-stacked-bar.txt): 숫자 아래에 비중을 나눈 막대 한 줄과 범례를 둔 카드입니다. 합계를 이루는 부분의 비중을 보여줄 때 씁니다. 규칙: 조각은 네 개까지 그립니다. 큰 세 항목만 색으로 나누고, 나머지는 회색 기타로 묶습니다. 기타에 든 항목은 마우스를 올리면 보여줍니다. 큰 항목부터 왼쪽에 놓고 주황, 분홍빨강, 노랑 순으로 칠합니다. 조각 사이를 띄워 맞닿은 색이 섞여 보이지 않게 합니다. 범례는 두 줄 두 칸에 이름과 비중만 적어 색만으로 읽지 않게 합니다. 비중 카드에 금액까지 적으면 무엇을 비교하는지 흐려지므로, 금액은 조각이나 범례에 마우스를 올리면 보여줍니다.

## 막대 차트

https://blocks.vizney.com/ko/bar/ · 모든 막대 차트는 0에서 시작하고, 굵기 24px을 넘지 않으며 끝만 둥근 막대를 옅은 실선 격자 위에 같은 규칙으로 그립니다. 차트 가이드의 원칙대로 흐름과 비교에는 세로 막대를, 순위와 목록에는 가로 막대를 씁니다. 마우스를 올리거나 그래프에 포커스한 뒤 화살표 키를 누르면 그 칸의 값을 보여줍니다. 높이는 2단위입니다.

- [Bar - Basic](https://blocks.vizney.com/cards/bar-basic.txt): 0에서 시작하는 세로 막대 카드입니다. 기간이나 항목별 크기를 길이로 비교할 때 씁니다. 규칙: 막대는 길이로 읽으므로 세로축을 0에서 시작합니다. 작은 변화의 흐름을 봐야 하면 라인 카드를 씁니다. 막대 굵기는 24px을 넘기지 않고 남는 폭은 여백으로 둡니다. 끝만 둥글게, 바닥은 반듯하게 해 0선에서 자라는 모양을 지킵니다. 값은 마지막 막대에만, 막대 끝 오른쪽에 적습니다. 좁은 막대 위에 값을 얹으면 옆 막대와 겹칩니다. 나머지 값은 마우스를 올리거나 화살표 키로 봅니다.
- [Bar - Stacked](https://blocks.vizney.com/cards/bar-stacked.txt): 막대 하나를 항목별 조각으로 나눠 쌓은 카드입니다. 합계의 흐름과 구성을 함께 볼 때 씁니다. 규칙: 가장 큰 항목을 바닥에 둡니다. 0선에서 시작하는 조각만 길이를 그대로 비교할 수 있어, 가장 중요한 항목의 흐름이 읽힙니다. 색은 큰 세 항목에만 주고 나머지는 회색 기타로 묶습니다. KPI - Stacked Bar와 같은 규칙이라 같은 항목은 같은 색이 됩니다. 조각 사이를 2px 띄워 색이 섞여 보이지 않게 하고, 합계는 마지막 막대 오른쪽과 툴팁에 적습니다.
- [Bar - Stacked 100%](https://blocks.vizney.com/cards/bar-stacked-100.txt): 기간마다 100%로 맞춘 누적 막대 카드입니다. 금액이 아니라 구성비가 어떻게 바뀌는지 볼 때 씁니다. 규칙: 막대 높이를 모두 100%로 맞춰, 합계가 오르내려도 비중의 변화만 보이게 합니다. 합계의 변화까지 봐야 하면 Bar - Stacked를 씁니다. 가장 큰 항목을 바닥에 둡니다. 0선에서 시작하는 바닥 조각은 비중의 오르내림을 그대로 읽을 수 있습니다. 툴팁에 비중과 금액을 함께 적어, 비중이 늘어난 것이 그 항목이 늘어서인지 다른 항목이 줄어서인지 구분하게 합니다.
- [Bar - Target](https://blocks.vizney.com/cards/bar-target.txt): 막대마다 목표를 짧은 가로선으로 표시한 카드입니다. 기간마다 목표가 다를 때 달성 여부를 볼 때 씁니다. 규칙: 목표는 막대 위에 짧은 가로선으로 긋습니다. 기간마다 목표가 달라도 막대와 목표를 같은 자리에서 견줄 수 있습니다. 목표에 못 미친 기간은 막대를 옅게 칠해 달성 여부가 먼저 보이게 합니다. 낮을수록 좋은 지표는 "better": "down"으로 뒤집습니다. 툴팁에 목표와 달성률을 함께 적습니다.
- [Bar - Diverging](https://blocks.vizney.com/cards/bar-diverging.txt): 0선 위아래로 막대가 갈리는 카드입니다. 목표 대비 차이나 증감처럼 부호가 있는 값에 씁니다. 규칙: 0선만 실선으로 긋고 막대는 0선에서 위아래로 자랍니다. 부호가 바뀌는 시점이 먼저 보입니다. 좋은 쪽은 초록, 나쁜 쪽은 빨강으로 KPI 배지와 같은 색을 씁니다. 낮을수록 좋은 지표는 "better": "down"으로 색을 뒤집습니다. 값에는 부호를 붙여 적고, 마지막 막대의 값은 막대 끝 오른쪽에 적습니다.
- [Bar - Ranking](https://blocks.vizney.com/cards/bar-ranking.txt): 막대 안에 이름을 얹고 오른쪽에 값을 둔 가로 막대입니다. 항목별 크기를 순위와 함께 볼 때 씁니다. 규칙: 항목은 큰 순서로 정렬합니다. 연령대나 구간처럼 순서가 정해진 항목은 "sort": false로 적은 순서를 지킵니다. 다섯 줄까지 보여주고 나머지는 '기타 n개' 한 줄로 묶습니다. 기타는 막대 없이 합계만 적어, 묶인 합이 순위를 흐리지 않게 합니다. 줄 수는 max로 바꿉니다. 이름을 막대 안에 얹어 이름 열 없이도 막대 폭을 넓게 씁니다. 툴팁에는 전체 중 비중을 적습니다.
- [Bar - Compare](https://blocks.vizney.com/cards/bar-compare.txt): 가로 막대 위에 비교 값을 세로 눈금으로 긋고 오른쪽에 증감 배지를 둔 카드입니다. 항목별 값을 작년이나 지난달과 견줄 때 씁니다. 규칙: 비교 값은 막대를 하나 더 그리지 않고 세로 눈금으로 긋습니다. 막대 끝이 눈금을 넘었는지로 늘고 줄었는지가 먼저 읽힙니다. 증감 배지는 KPI 카드와 같습니다. 화살표는 오르내림을, 색은 좋고 나쁨(better)을 나타냅니다. 정렬은 이번 기간 값 기준입니다. 묶인 기타 줄도 합계끼리 비교한 증감을 적습니다.
- [Bar - Butterfly](https://blocks.vizney.com/cards/bar-butterfly.txt): 가운데에 항목 이름을 두고 두 집단의 막대를 좌우로 펼친 카드입니다. 남녀나 두 지역처럼 같은 항목을 두 집단으로 나눠 견줄 때 씁니다. 규칙: 두 집단은 같은 눈금을 씁니다. 가장 큰 값 하나에 양쪽 막대 길이를 맞춰, 좌우 길이를 그대로 견줄 수 있게 합니다. 항목 이름은 가운데에 한 번만 적고 값은 양쪽 끝 칸에 적습니다. 연령대처럼 순서가 있는 항목은 적은 순서를 지키고, "sort": true면 두 값의 합이 큰 순서로 둡니다. 두 집단은 주황과 분홍빨강으로 칠하고 집단 이름을 각 막대 위쪽 끝에 적습니다. 툴팁에는 두 값과 합계, 오른쪽 집단의 비중을 적습니다.

## 라인 차트

https://blocks.vizney.com/ko/line/ · 모든 라인 카드는 제목과 기간 부제 아래에 값 범위에 맞춘 세로축 눈금 3–4개와 옅은 실선 격자를 같은 규칙으로 그리고, 선이 그래프 가운데에 머물도록 값 범위 위아래에 여유를 둡니다. 선이 하나인 카드는 KPI - Line처럼 선 아래를 옅게 칠하고, 둘 이상이면 음영이 겹치므로 칠하지 않습니다. 마우스를 올리거나 그래프에 포커스한 뒤 화살표 키를 누르면 그 기간의 값을 모두 보여줍니다. 선 모양은 curve로 곡선, 직선, 계단 가운데 고르고, 아래에서 미리 볼 수 있습니다. 높이는 KPI - Line과 같은 2단위입니다.

- [Line - Basic](https://blocks.vizney.com/cards/line-basic.txt): 선 하나에 세로축 눈금과 옅은 실선 격자를 둔 카드입니다. 한 지표의 흐름을 기간별 값과 함께 읽을 때 씁니다. 규칙: 세로축은 0에서 시작하지 않고 값의 범위를 끝수 없는 눈금으로 감쌉니다. 선은 기울기로 읽으므로 0부터 그리면 변화가 납작해집니다. 선 아래 음영은 크기로 읽히지 않도록 아래로 갈수록 옅어지게 칠합니다. 눈금은 3–4개만 두고 단위는 맨 위 눈금에만 적으며, 기간 이름은 다섯 개 안팎으로 솎아 내되 마지막 기간은 항상 남깁니다. 점과 값은 마지막 기간에만 적습니다. 선 모양은 curve로 정합니다. 기본 곡선은 실제 값보다 위아래로 튀어나가지 않게 잇고, "step"은 금리나 단가처럼 다음 변경까지 값이 그대로인 지표에 씁니다.
- [Line - Tabs](https://blocks.vizney.com/cards/line-tabs.txt): 머리 아래 탭에 지표 2–3개의 대표 수치를 두고, 고른 지표의 선만 그리는 카드입니다. 단위가 다른 지표를 한 자리에서 번갈아 볼 때 씁니다. 규칙: 단위가 다른 지표는 한 그래프에 겹치지 않고 탭으로 나눕니다. 억과 건, %를 한 축에 그리면 축이 둘이 되거나 작은 값의 변화가 보이지 않습니다. 탭에는 지표 이름과 대표 수치를 적어 선을 보기 전에 숫자부터 비교하게 합니다. 대표 수치는 마지막 기간 값이고, 탭마다 value로 바꿀 수 있습니다. 탭은 세 칸으로 나눠 같은 폭을 쓰고 세 개까지 둡니다. 넷째부터는 칸이 좁아져 숫자가 읽히지 않으니 카드를 나눕니다.
- [Line - Multiple](https://blocks.vizney.com/cards/line-multiple.txt): 색이 다른 선 2–3개를 겹친 카드입니다. 한 지표를 몇 개 항목으로 나눠 흐름을 견줄 때 씁니다. 규칙: 선 색은 주황, 분홍빨강, 파랑 순서입니다. 노랑은 흰 바탕의 가는 선으로는 대비가 1.5:1에 그쳐 선에는 쓰지 않습니다. 색 있는 선은 세 개까지입니다. 넷째 항목부터는 옅은 회색 선으로 그리고 범례에서 '그 밖의 n개'로 묶어, 색이 늘어나 서로 구분되지 않는 일을 막습니다. 범례를 두고 선 끝에는 마지막 값을 적습니다. 끝 값이 겹치면 뒤 항목의 값을 생략하고, 툴팁은 그 기간 값이 큰 순서로 보여줍니다.
- [Line - Compare](https://blocks.vizney.com/cards/line-compare.txt): 올해 선과 작년 회색 선을 같은 월 축에 겹친 카드입니다. 계절을 타는 지표를 전년 같은 달과 견줄 때 씁니다. 규칙: 가로축을 1–12월로 두고 두 해를 겹칩니다. 24개월을 이어 그리면 같은 달끼리의 차이를 눈으로 맞춰 읽어야 합니다. 기준인 작년은 회색, 올해만 주황입니다. 올해 선은 끝난 달에서 멈추고, 남은 달에는 작년 선만 남아 앞으로의 계절 흐름을 보여줍니다. 툴팁에 두 해의 값과 전년 대비 증감을 함께 적고, 올해의 마지막 값은 점 위에 적습니다.
- [Line - Cumulative](https://blocks.vizney.com/cards/line-cumulative.txt): 이번 달 누계와 지난달 누계를 같은 날짜 축에 겹치고 목표선을 그은 카드입니다. 월 목표를 향한 진행 속도를 지난달과 견줄 때 씁니다. 규칙: 일별 값을 넣으면 카드가 누계로 바꿉니다. 누계는 0에서 쌓이므로 세로축도 0에서 시작합니다. 목표까지의 페이스는 직선으로 긋지 않고 지난달 누계 선으로 봅니다. 주말과 휴일이 끼면 하루 실적이 고르지 않아, 직선 페이스로는 월초마다 뒤처져 보입니다. 툴팁에 그날까지의 두 달 누계, 지난달 같은 날 대비 증감, 목표 달성률을 함께 적습니다. 목표선의 이름과 값은 오른쪽 끝에 적습니다.
- [Line - Reference](https://blocks.vizney.com/cards/line-reference.txt): 선 하나에 목표나 평균 같은 기준선을 그은 카드입니다. 기간마다 기준을 넘었는지 볼 때 씁니다. 규칙: 기준선은 점선으로 긋고 이름과 값을 선의 오른쪽 끝, 그래프 바깥에 적어 선과 겹치지 않게 합니다. value에 숫자 대신 "avg"를 적으면 기간 평균을 긋습니다. 세로축 범위에 기준선을 항상 넣습니다. 값이 기준에서 멀리 떨어져 있어도 기준선이 카드 밖으로 밀려나지 않습니다. 툴팁에 그 기간 값과 기준 대비 차이를 함께 적습니다. 비율 지표는 차이를 %p로 적습니다.

## 그리드 차트

https://blocks.vizney.com/ko/grid/ · 그리드 차트는 표로 정확한 숫자를 전합니다. 머리글은 가운데에, 이름은 왼쪽에 두고, 숫자는 오른쪽 정렬과 같은 폭 숫자로 적어 자릿수를 맞춥니다. 단위는 열 제목이나 부제에 한 번만 적습니다. 열 제목을 누르면 그 열로 정렬하고, 음영을 넣은 합계 줄은 늘 맨 아래에 둡니다. 높이는 2단위로, 다섯 줄과 합계 줄이 넉넉하게 들어갑니다.

- [Grid - Basic](https://blocks.vizney.com/cards/grid-basic.txt): 여러 지표를 항목마다 나란히 적고 합계까지 보는 기본 표입니다. 항목별 실적을 몇 가지 숫자로 함께 보고할 때 씁니다. 규칙: 처음에는 가장 중요한 숫자 열의 큰 순서로 둡니다(sortKey). 숫자 열은 큰 순서부터, 이름 열은 가나다순부터 정렬하고 다시 누르면 반대로 바뀝니다. 합계 줄은 정렬과 상관없이 맨 아래에 둡니다. 증감률 열의 합계는 칸의 증감률을 더하거나 평균하지 않고 합계끼리 다시 계산합니다. 열은 columns에 적습니다. "total": "sum"이면 합을 적고, "type": "change" 열은 of와 base 두 값의 증감률을 KPI 카드와 같은 배지로 적습니다. 달러 금액 열은 "format": "usd"를 적고 원래 값을 넣으면, 열 제목에 $K · $M을 적고 칸에는 나눈 값을 적습니다.
- [Grid - Spark](https://blocks.vizney.com/cards/grid-spark.txt): 줄마다 13개월 흐름을 작은 선으로 넣은 표입니다. 여러 항목의 최근 값과 흐름을 한 번에 훑을 때 씁니다. 규칙: 작은 선은 줄마다 자기 범위에 맞춰 그리되, 범위가 값의 10%보다 좁으면 10%로 넓혀 거의 변하지 않은 줄이 크게 출렁여 보이지 않게 합니다. 줄끼리의 크기 비교는 숫자 열로 합니다. 선 끝에 마지막 값을 점으로 찍고, 같은 줄에 마지막 값과 첫 값 대비 증감을 적습니다. 13개월이면 첫 값 대비가 전년 동월 대비가 됩니다. 축 · 격자 · 툴팁은 두지 않습니다. 한 항목의 흐름을 자세히 봐야 하면 Line - Basic이나 Line - Multiple을 씁니다.
- [Grid - Target](https://blocks.vizney.com/cards/grid-target.txt): 목표 · 실적 · 달성률을 한 줄에 적고 달성 여부를 표시한 표입니다. 목표와 실적 금액까지 숫자로 보고할 때 씁니다. 규칙: 달성률 칸의 막대는 0에서 시작하고, 바탕 끝은 가장 높은 달성률, 세로 눈금은 목표(100%)입니다. 목표를 넘은 줄도 넘은 만큼 길어져 줄 사이의 차이가 보입니다. 막대 색은 상태와 같은 초록 · 빨강입니다. 상태는 색과 함께 달성 · 미달 글자로 적어, 색만으로 구분하지 않게 합니다. 색은 KPI 배지와 같은 초록 · 빨강입니다. 달성률이 높은 순서로 두고, 합계 줄의 달성률은 실적 합계를 목표 합계로 나눠 다시 계산합니다. 낮을수록 좋은 지표는 "better": "down"으로 바꿉니다.
- [Grid - Pivot](https://blocks.vizney.com/cards/grid-pivot.txt): 행 × 열 교차표에 행 합계와 열 합계를 함께 둔 표입니다. 권역 × 채널처럼 두 기준으로 나눈 금액을 그대로 보여줄 때 씁니다. 규칙: 오른쪽 끝 열에 행 합계, 맨 아래 줄에 열 합계를 둡니다. 오른쪽 아래 칸이 전체 합계입니다. 열은 합계가 큰 순서로 두고, 다섯 개 이상이면 큰 세 열만 남기고 나머지는 기타 열로 묶습니다(도넛 차트와 같은 규칙). 순서가 정해진 열은 "sort": false로 적은 순서를 지킵니다. 칸에 마우스를 올리면 같은 행과 열을 함께 칠해, 교차하는 위치를 따라가기 쉽게 합니다.

## 도넛 차트

https://blocks.vizney.com/ko/donut/ · 모든 도넛 차트는 큰 세 항목만 주황, 분홍빨강, 노랑으로 칠하고 나머지는 회색 기타로 묶습니다(KPI - Stacked Bar와 같은 규칙). 비중을 먼저 적고 금액은 툴팁에 둡니다. 조각이나 범례에 마우스를 올리면 그 항목만 진하게 남습니다. 높이는 2단위입니다.

- [Donut - Basic](https://blocks.vizney.com/cards/donut-basic.txt): 가운데에 합계를 적은 도넛과 비중 범례를 나란히 둔 카드입니다. 합계를 이루는 몇 개 항목의 비중을 한눈에 볼 때 씁니다. 규칙: 파이 대신 도넛을 씁니다. 가운데에 합계를 적을 수 있고, 조각을 각도가 아니라 호의 길이로 읽게 됩니다. 조각은 네 개까지입니다. 큰 세 항목만 색을 주고 나머지는 회색 기타로 묶으며, 기타에 든 항목은 툴팁에 적습니다. 항목이 많고 크기가 고르면 기타가 가장 커지므로 Bar - Ranking이 맞습니다. 범례에는 이름과 비중만 적습니다. 비중 카드에 금액까지 적으면 무엇을 비교하는지 흐려지므로 금액은 툴팁에 둡니다.

## 스캐터 차트

https://blocks.vizney.com/ko/scatter/ · 스캐터 차트는 두 측정값을 가로 · 세로축에 두고 항목마다 점을 찍어 관계와 흩어짐을 보여줍니다. 점은 묶음별로 큰 세 묶음만 색을 주고 나머지는 회색입니다. 축마다 눈금 3–5개와 옅은 실선 격자를 두고, 축 이름과 단위는 축에 붙여 세로축은 그래프 왼쪽 위에 ↑로, 가로축은 눈금 아래 오른쪽 끝에 →로 적습니다. 마우스를 점에 가까이 가져가거나 그래프에 포커스한 뒤 좌우 화살표를 누르면 그 점의 값을 보여줍니다. 높이는 2단위입니다.

- [Scatter - Basic](https://blocks.vizney.com/cards/scatter-basic.txt): 항목마다 두 측정값을 점 하나로 찍고 묶음별로 색을 준 카드입니다. 영업 활동과 실적처럼 두 값이 함께 움직이는지, 묶음마다 다른지 볼 때 씁니다. 규칙: 묶음(group)이 있으면 점 수가 많은 세 묶음만 주황 · 분홍빨강 · 파랑으로, 나머지는 회색으로 칠하고 점 모양 범례를 둡니다. 흰 테두리 2px로 겹친 점을 가립니다. 이름은 가장 큰 값이나 크게 벗어난 점처럼 이야기할 점에만 "label": true로 적습니다. 모든 점에 이름을 달면 읽히지 않습니다. 값이 모두 0 이상이면 축을 0 아래로 내리지 않고, 범위 위아래에 8% 여유를 둡니다.
- [Scatter - Quadrant](https://blocks.vizney.com/cards/scatter-quadrant.txt): 평균과 0을 기준선으로 그어 점을 네 구역으로 나눈 카드입니다. 규모와 성장률처럼 두 기준으로 대상을 분류할 때 씁니다. 규칙: 가로 기준선은 평균, 세로 기준선은 0입니다. 다른 기준이 필요하면 ref에 { "x": 값, "y": 값 }으로 적습니다. 구역 이름(quadrants)은 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래 순서로 적고 네 모서리에 옅게 둡니다. 이름은 가장 큰 점이나 기준에서 크게 벗어난 점처럼 이야기할 점 두세 개에만 "label": true로 적습니다. 이름이 없으면 어느 점이 문제인지 툴팁을 하나씩 열어 봐야 하고, 모든 점에 달면 읽히지 않습니다. 구역은 색으로 칠하지 않고 점 색은 묶음(group)을 따릅니다. 툴팁에는 부호를 붙인 증감률, 묶음, 속한 구역을 적습니다.
- [Scatter - Connected](https://blocks.vizney.com/cards/scatter-connected.txt): 기간마다 찍은 점을 시간 순서대로 이은 카드입니다. 방문자와 전환율처럼 두 지표가 함께 어느 쪽으로 움직였는지 볼 때 씁니다. 규칙: 점은 points에 적은 순서대로 잇습니다. 묶음(group, 예: 연도)이 있으면 최근 묶음부터 주황 · 분홍빨강 · 파랑으로 칠하고, 구간은 도착점의 색으로 잇습니다. 마지막 점은 크게 찍어 흐름의 방향을 보여줍니다. 기간 이름은 처음과 마지막 점에만 적고, 나머지 기간은 툴팁과 화살표 키로 봅니다. 기간은 열세 개 안팎까지 둡니다. 더 길면 선이 엉켜 방향이 읽히지 않으니 기간을 묶거나 라인 차트 두 장으로 나눕니다.

## 트리맵 차트

https://blocks.vizney.com/ko/treemap/ · 트리맵 차트는 면적으로 비중을, 칸의 묶음으로 계층을 함께 보여줍니다. 칸 사이는 2px 띄우고, 칸에 마우스를 올리거나 그래프에 포커스한 뒤 화살표 키를 누르면 그 칸만 진하게 남기고 값을 보여줍니다. 높이는 2단위입니다.

- [Treemap - Basic](https://blocks.vizney.com/cards/treemap-basic.txt): 묶음 안의 항목까지 면적으로 나눈 카드입니다. 항목이 많아 도넛으로는 조각이 너무 얇을 때 씁니다. 규칙: 면적이 값에 비례하고 칸이 정사각형에 가깝게 나뉘도록 배치합니다. 큰 칸이 왼쪽 위에 옵니다. 색은 묶음(groups)에 줍니다. 큰 세 묶음만 색을 주고 나머지 묶음은 회색 기타 한 칸으로 묶습니다. 넓은 면을 칠하므로 막대보다 한 단계 옅은 색을 씁니다. 칸이 넉넉할 때만 이름과 비중을 적습니다. 작은 칸의 값은 툴팁에서 전체 중 비중과 묶음 안 비중으로 봅니다.

## 히트맵 차트

https://blocks.vizney.com/ko/heatmap/ · 히트맵 차트는 두 기준이 만나는 칸을 색의 농도로 칠해, 많고 적은 곳을 숫자보다 먼저 찾게 합니다. 값은 주황 한 가지의 농도로 칠하고, 0을 사이에 두고 갈리는 값은 초록과 빨강으로 나눕니다. 칸 사이는 2px 띄우고 데이터 열은 같은 폭이며, 칸이 넉넉하면 칸에 숫자도 적습니다. 칸에 마우스를 올리거나 표에 포커스한 뒤 화살표 키를 누르면 그 칸의 값을 보여줍니다. 높이는 2단위입니다.

- [Heatmap - Basic](https://blocks.vizney.com/cards/heatmap-basic.txt): 행과 열이 만나는 칸을 값의 크기에 따라 색의 농도로 칠한 표입니다. 시간대 × 요일처럼 두 기준이 만나는 곳에서 많고 적은 칸을 찾을 때 씁니다. 규칙: 색은 주황 한 가지의 농도만 씁니다. 가장 작은 값이 가장 옅고, 표 위에 카드 폭을 채운 농도 막대와 양 끝 값을 범례로 둡니다. 이익률이나 증감률처럼 값이 0을 사이에 두고 갈리면 0을 경계로 좋은 쪽은 초록, 나쁜 쪽은 빨강의 농도로 칠합니다(KPI 배지와 같은 색). 주황 한 가지로 칠하면 적자와 작은 흑자가 똑같이 옅은 칸이 됩니다. 두 쪽은 절댓값이 큰 쪽에 맞춘 같은 눈금이라 농도로 크기를 견줄 수 있고, 낮을수록 좋은 지표는 "better": "down"으로 색을 뒤집습니다. 칸 폭이 48px 이상이면 칸에 숫자를 적고, 좁으면 적지 않아 색의 패턴이 먼저 보이게 합니다. 값은 칸에 마우스를 올리거나 표에 포커스한 뒤 화살표 키로 칸을 옮기면 툴팁으로 보이고(좌우는 읽는 순서, 위아래는 같은 열), 화면 낭독기는 칸마다 숫자를 읽습니다. 처음에는 적은 순서대로 두고, 요일 같은 열 제목을 누르면 그 열의 큰 순서로 정렬합니다. 행마다 크기가 크게 달라 큰 행만 진해지면 "scale": "row"로 행마다 따로 칠해 행 안의 높낮이를 봅니다.

## 워터폴 차트

https://blocks.vizney.com/ko/waterfall/ · 워터폴 차트는 시작 값에서 항목별 증감을 차례로 쌓아 끝 값에 이르는 과정을 보여줍니다. 합계는 0에서 자라는 막대, 증감은 앞 누계에서 떠 있는 막대로 그리고, 막대 사이는 누계 높이의 가는 실선으로 잇습니다. 값은 막대마다 적습니다. 높이는 2단위입니다.

- [Waterfall - Basic](https://blocks.vizney.com/cards/waterfall-basic.txt): 두 시점의 값 사이를 요인별 증감으로 나눈 카드입니다. 영업이익이나 매출이 왜 바뀌었는지 설명할 때 씁니다. 규칙: items에 시작 합계, 요인별 증감, 끝 합계 순서로 적습니다. 끝 합계는 "type": "total"만 적으면 누계로 채웁니다. 늘린 요인은 초록, 줄인 요인은 빨강(KPI 배지와 같은 색), 합계는 주황입니다. 낮을수록 좋은 지표는 "better": "down"으로 색을 뒤집습니다. 세로축은 0에서 시작합니다. 증감이 합계에 비해 너무 작아 막대가 보이지 않으면 증감만 Bar - Diverging으로 그립니다.
- [Waterfall - Subtotal](https://blocks.vizney.com/cards/waterfall-subtotal.txt): 큰 값에서 항목을 차례로 빼며 소계를 세우는 카드입니다. 매출에서 영업이익까지의 손익 구조를 보여줄 때 씁니다. 규칙: 값을 적지 않은 합계("type": "total")는 그때까지의 누계라, 매출총이익 · 영업이익 같은 소계가 저절로 맞습니다. 합계와 소계는 주황, 빼는 항목은 회색, 더하는 항목은 옅은 주황입니다. 비용은 나쁜 값이 아니라 구조의 일부라 빨강을 쓰지 않습니다. 증감 막대는 바뀐 쪽 끝만 둥글게 그리고, 빼는 항목의 값은 막대 아래에 적습니다.

## 퍼널 차트

https://blocks.vizney.com/ko/funnel/ · 퍼널 차트는 단계마다 줄어드는 흐름을 보여줍니다. 단계마다 같은 폭의 칸을 두고, 칸 안에서는 단계 값만큼의 두께를 평평하게 유지하다가 칸 경계에서 S자 곡선으로 다음 단계의 두께로 줄어듭니다. 칸에 마우스를 올리거나 카드에 포커스한 뒤 좌우 화살표를 누르면 나머지 칸을 옅게 덮어 그 칸만 남기고 값, 첫 단계 대비 비율, 이탈 수를 보여줍니다. 높이는 2단위입니다.

- [Funnel - Flow](https://blocks.vizney.com/cards/funnel-flow.txt): 단계 값만큼의 두께를 가운데 정렬한 흐름으로 그린 카드입니다. 방문에서 구매까지처럼 단계마다 얼마나 좁아지는지를 한눈에 보여줄 때 씁니다. 규칙: 흐름의 두께는 값에 비례합니다. 마지막 단계가 아주 작아도 4px은 남겨 흐름이 끊겨 보이지 않게 합니다. 칸 위에는 단계 이름과 값을, 지난 기간 값(prev)이 있으면 KPI 카드와 같은 증감 배지를 적습니다. 흐름 안의 흰 알약은 첫 단계 대비 비율입니다. 단계는 네 개 안팎으로 둡니다. 칸이 좁아지면 값 글자가 카드 폭에 맞춰 작아집니다.

## 와플 차트

https://blocks.vizney.com/ko/waffle/ · 와플 차트는 100칸 가운데 몇 칸인지로 비중을 셀 수 있게 보여줍니다. 색 규칙은 도넛 차트와 같고, 칸 크기는 카드에 남은 자리에 맞춰 정합니다. 칸이나 범례에 마우스를 올리면 그 항목만 진하게 남습니다. 높이는 2단위입니다.

- [Waffle - Basic](https://blocks.vizney.com/cards/waffle-basic.txt): 100칸 가운데 몇 칸인지로 비중을 보여주는 카드입니다. 비중을 '열 칸 중 네 칸'처럼 셀 수 있는 크기로 전할 때 씁니다. 규칙: 한 칸은 1%입니다. 반올림한 칸 수의 합이 100이 되도록 나머지가 큰 항목부터 한 칸씩 더합니다. 큰 항목부터 왼쪽 위에서 채워, 같은 색 칸이 한 덩어리로 모이게 합니다. 칸 크기는 카드에 남은 자리에 맞춰 10–24px 사이로 정해 빈 곳이 크게 남지 않게 합니다. 색 규칙은 도넛과 같습니다. 큰 세 항목 밖은 회색 기타로 묶습니다.

## 범프 차트

https://blocks.vizney.com/ko/bump/ · 범프 차트는 기간마다 항목의 순위를 찍고 S자 곡선으로 이어, 값보다 순서가 어떻게 바뀌었는지를 보여줍니다. 1위가 맨 위이고, 이름은 선의 양 끝에 적어 범례를 대신합니다. 선에 마우스를 올리거나 그래프에 포커스한 뒤 위아래 화살표를 누르면 그 항목을 굵은 선과 점 안의 순위로 다시 그리고, 나머지는 옅게 둡니다. 높이는 2단위입니다.

- [Bump - Basic](https://blocks.vizney.com/cards/bump-basic.txt): 여러 항목의 순위가 기간마다 어떻게 바뀌었는지 한꺼번에 보는 카드입니다. 지사나 상품의 순위 경쟁을 보여줄 때 씁니다. 규칙: 값(values)을 주면 기간마다 큰 순서로 순위를 매깁니다. 순위는 값의 차이를 감추므로, 차이의 크기가 중요하면 Line - Multiple을 씁니다. 마지막 기간의 상위 세 항목만 주황 · 분홍빨강 · 파랑(라인 차트의 선 색 규칙)으로, 나머지는 회색으로 그립니다. 항목은 여덟 개 안팎까지 둡니다. 더 많으면 선이 얽혀 읽히지 않으니 상위 항목만 남깁니다.

## 생키 차트

https://blocks.vizney.com/ko/sankey/ · 생키 차트는 띠의 두께로 양이 어디서 어디로 옮겨 가는지 보여줍니다. 출발 · 도착 · 값으로 된 흐름(links) 목록만 적으면 노드와 단은 저절로 정해지고, 노드 높이는 들어온 양과 나간 양 중 큰 쪽입니다. 모든 단이 같은 비율로 그려 띠 두께를 단끼리 견줄 수 있고, 노드 사이는 넉넉히 띄웁니다. 노드 이름과 값은 노드 옆에 바로 적어 범례를 두지 않습니다. 띠나 노드에 마우스를 올리거나 그래프에 포커스한 뒤 좌우 화살표를 누르면 나머지를 옅게 하고 값과 비중을 보여줍니다. 높이는 2단위입니다.

- [Sankey - Basic](https://blocks.vizney.com/cards/sankey-basic.txt): 왼쪽 단에서 오른쪽 단으로 가는 흐름을 그린 카드입니다. 채널별 매출이 어느 제품군으로 가는지처럼 두 구분 사이의 구성을 함께 볼 때 씁니다. 규칙: 왼쪽 노드는 값이 큰 순서로 주황 · 분홍빨강 · 노랑, 넷째부터 회색으로 칠하고, 띠는 출발 노드의 색을 따릅니다. 오른쪽 노드는 검정 막대로 둡니다. 노드 순서는 links에 처음 나온 순서입니다. 양쪽 모두 큰 노드부터 적으면 띠가 덜 엇갈립니다. 양쪽 노드는 다섯 개 안팎으로 둡니다. 띠가 스무 개를 넘으면 작은 흐름을 '기타'로 묶습니다.
- [Sankey - Levels](https://blocks.vizney.com/cards/sankey-levels.txt): 세 단 이상으로 이어지는 흐름에서 마지막 단의 한 노드를 짚은 카드입니다. 매출이 비용과 이익으로 나뉘는 손익 흐름이나 예산 배분처럼, 들어온 양 가운데 얼마가 끝까지 남는지 보여줄 때 씁니다. 규칙: 들어오는 흐름이 없는 노드에서 시작해 흐름마다 한 단씩 오른쪽으로 놓고, 나가는 흐름이 없는 노드는 마지막 단에 모읍니다. 단은 네 개까지 둡니다. focus에 마지막 단의 노드 이름을 적으면 그 노드와 그 노드로 가는 띠는 파랑, 마지막 단의 나머지 노드로 가는 띠는 회색, 앞 단의 띠는 주황입니다. 앞 단과 색을 달리해 앞 단의 노드가 focus로 바로 흘러가는 것처럼 보이지 않게 합니다. 비우면 모두 주황입니다. 첫 단 이름은 노드 왼쪽, 나머지 단 이름은 노드 오른쪽에 적습니다. 가운데 단 이름은 띠 위에 흰 테두리를 둘러 읽히게 합니다.

## 레이더 차트

https://blocks.vizney.com/ko/radar/ · 레이더 차트는 여러 항목의 점수를 한 다각형으로 이어 대상의 강점과 약점을 한눈에 보여줍니다. 정확한 값보다 전체 모양을 읽는 차트라, 항목마다 단위가 다르면 0–100점처럼 같은 범위로 환산해 적습니다. 격자는 옅은 실선 다각형 네 겹과 바퀴살이고, 항목 이름은 꼭짓점 바깥에 둡니다. 항목 쪽으로 마우스를 올리거나 그래프에 포커스한 뒤 좌우 화살표를 누르면 그 항목의 값을 대상별로 보여줍니다. 높이는 2단위입니다.

- [Radar - Basic](https://blocks.vizney.com/cards/radar-basic.txt): 한 대상의 항목별 점수를 비교 기준과 겹친 카드입니다. 대리점 평가처럼 한 대상이 평균보다 어디서 강하고 약한지 볼 때 씁니다. 규칙: 비교 기준은 series에서 "base": true로 적습니다. 기준은 옅은 회색 면에 회색 테두리로 아래에 깔고, 대상은 옅은 주황 면에 주황 테두리로 그 위에 겹칩니다. 꼭짓점 점은 찍지 않습니다. 카드 폭이 넉넉하면 오른쪽 목록에 항목별 점수와 기준 대비 배지를 적고, 좁으면 꼭짓점 이름 옆에 점수를 적습니다. 툴팁에는 기준과의 차이를 적습니다. 항목은 다섯에서 여덟 개 사이로 둡니다. 눈금 끝은 max로 정하고, 비우면 값을 감싸는 끝수 없는 값입니다.