Radar Chart

설명 / Description

레이더 차트(스파이더 차트 또는 웹 차트라고도 함)는 중심점에서 방사형으로 뻗은 등각 축들 위에 다변량 데이터를 표시합니다. 각 축은 서로 다른 변수를 나타내며, 데이터 값은 그 크기에 비례하는 중심으로부터의 거리에 따라 각 축 위에 표시됩니다. 표시된 점들은 연결되어 닫힌 다각형을 형성하며, 그 형태가 데이터 개체의 전반적인 "프로필"을 드러냅니다. 여러 개체를 반투명 다각형으로 겹쳐 비교할 수도 있습니다.

A radar chart (also called a spider chart or web chart) displays multivariate data on a set of equi-angular axes radiating from a center point. Each axis represents a different variable, and data values are plotted along these axes at a distance from the center proportional to their magnitude. The plotted points are connected to form a closed polygon, whose shape reveals the overall "profile" of the data entity. Multiple entities can be overlaid as semi-transparent polygons to enable comparison.

레이더 차트는 여러 차원에 걸친 개체의 전반적인 프로필이나 균형을 비교하는 것이 목표일 때 가장 효과적입니다. "이 선수는 다재다능한가, 특화되어 있는가?"나 "제품 A의 기능 구성이 제품 B와 어떻게 비교되는가?" 같은 질문에 답합니다. 감싸인 다각형의 면적은 전반적인 크기에 대한 직관적인 감각을 주고, 형태는 강점과 약점을 드러냅니다.

Radar charts are most effective when the goal is to compare the overall profile or balance of an entity across several dimensions. They answer questions like "Is this athlete well-rounded or specialized?" or "How does Product A's feature set compare to Product B's?" The enclosed polygon area gives an intuitive sense of overall magnitude, while the shape reveals strengths and weaknesses.

그러나 레이더 차트에는 상당한 지각적 한계가 있습니다. 다각형의 면적은 축의 순서에 좌우되는데, 이 순서는 임의적입니다 -- 축을 재배열하면 같은 데이터라도 다른 형태와 면적이 나옵니다. 각도와 방사 거리에 대한 인간의 지각은 정렬된 위치에 대한 지각보다 정확도가 떨어져, 정밀한 비교를 어렵게 만듭니다. 이런 이유로 레이더 차트는 정밀한 정량 분석보다는 프로필의 빠른 정성적 비교에 가장 잘 어울리며, 소수의 개체(2~4개)와 적당한 수의 축(5~10개)에서 잘 작동합니다.

However, radar charts carry significant perceptual limitations. The area of the polygon depends on the ordering of axes, which is arbitrary -- rearranging axes produces a different shape and area for the same data. Human perception of angles and radial distances is less accurate than perception of aligned positions, making precise comparison difficult. For these reasons, radar charts are best used for quick qualitative comparison of profiles rather than precise quantitative analysis, and they work well with a small number of entities (2-4) and a moderate number of axes (5-10).

Radar Chart — interactive example

언제 사용하나 / When to Use

2~4개 개체의 다차원 프로필을 비교할 때(예: 제품 기능, 선수 스탯, 역량 평가)
Comparing the multi-dimensional profile of 2-4 entities (e.g., product features, player stats, skill assessments)
개체가 여러 차원에서 균형 잡혀 있는지, 특정 속성으로 치우쳐 있는지 보여줄 때
Showing whether an entity is balanced across dimensions or skewed toward certain attributes
전반적인 형태가 중요한 성과 스코어카드나 평가 요약을 표시할 때
Displaying performance scorecards or rating summaries where the overall shape matters
청중이 이 형식에 익숙할 때 대시보드용 간결한 요약을 만들 때
Creating compact summaries for dashboards when the audience is familiar with the format

이럴 땐 피하세요 / When NOT to Use

개체 간 정확한 값 비교가 필요할 때 -- 대신 그룹형 막대 차트나 평행 좌표 플롯을 사용하십시오
When precise value comparison across entities is needed -- use a grouped bar chart or parallel coordinates instead
겹치는 개체가 4~5개를 넘을 때 -- 차트를 읽을 수 없게 되므로, 평행 좌표 플롯이나 스몰 멀티플을 사용하십시오
When you have more than 4-5 overlapping entities -- the chart becomes unreadable; use parallel coordinates or small multiples
축의 스케일이나 단위가 매우 다를 때 -- 먼저 정규화가 필요하며, 그렇게 해도 비교가 오해를 부를 수 있습니다
When axes have very different scales or units -- normalization is required first, and even then, comparison can be misleading
변수의 개수가 3개 미만일 때 -- 다각형이 퇴화하므로, 더 단순한 차트를 사용하십시오
When the number of variables is fewer than 3 -- the polygon degenerates; use a simpler chart
축의 순서가 시각적 이야기에 큰 영향을 미칠 때 -- 순서가 더 명시적인 평행 좌표 플롯을 고려하십시오
When the ordering of axes significantly affects the visual story -- consider parallel coordinates where order is more explicit

구조 / Anatomy

축(스포크): 중심에서 뻗어나가는 선으로, 각각 하나의 변수를 나타냅니다
Axes (spokes): Lines radiating from the center, each representing one variable
그리드선(웹): 각 축을 따라 스케일 간격을 표시하는 동심 다각형 또는 원
Gridlines (web): Concentric polygons or circles marking scale intervals along each axis
데이터 다각형: 한 개체의 모든 축에 걸친 표시 값을 연결하는 닫힌 도형
Data polygon: The closed shape connecting plotted values across all axes for one entity
채우기 영역: 다각형 형태를 더 잘 보이게 하기 위한 다각형 내부의 반투명 채우기
Fill area: Semi-transparent fill inside the polygon to make the shape more visible
중심점: 원점(보통 0 또는 최솟값)
Center point: The origin (typically zero or the minimum value)
축 레이블: 각 스포크 바깥쪽 끝의 변수 이름
Axis labels: Variable names at the outer end of each spoke
범례: 여러 다각형이 겹쳐 있을 때 어떤 다각형이 어떤 개체에 속하는지 식별합니다
Legend: Identifies which polygon belongs to which entity when multiple are overlaid

변형 / Variations

채워진 레이더: 다각형이 반투명 색으로 채워져 면적을 강조하고 겹침을 눈에 띄게 합니다
Filled radar: Polygons are filled with semi-transparent color, emphasizing area and making overlap visible
데이터 포인트가 있는 레이더: 각 축 값에 점이 배치되어 개별 수치를 더 쉽게 식별할 수 있습니다
Radar with data points: Dots are placed at each axis value, making individual readings easier to identify
스몰 멀티플 레이더: 다각형을 겹치는 대신, 각 개체가 그리드 안에 자신만의 작은 레이더 차트를 가져 겹침으로 인한 혼잡을 피합니다
Small-multiple radar: Instead of overlaying polygons, each entity gets its own small radar chart in a grid, avoiding overlap clutter
극좌표 영역 차트(나이팅게일 로즈): 유사한 방사형 레이아웃이지만 점의 거리 대신 쐐기 면적을 사용하는, 관련되어 있지만 별개인 차트
Polar area chart (Nightingale rose): Similar radial layout but uses wedge area rather than point distance, related but distinct
최소-최대 밴드가 있는 레이더: 음영 밴드가 그룹 전체의 범위(최소~최대)를 보여주고, 평균을 나타내는 선이 함께 표시됩니다
Radar with min-max bands: A shaded band shows the range (min to max) across a group, with a line for the average

코드 레퍼런스 / Code Reference

// D3 radar chart (simplified)
import * as d3 from "d3";

const axes = ["Speed", "Power", "Defense", "Stamina", "Skill", "Agility"];
const angleSlice = (2 * Math.PI) / axes.length;
const rScale = d3.scaleLinear().domain([0, 100]).range([0, radius]);

const line = d3.lineRadial()
  .radius(d => rScale(d.value))
  .angle((d, i) => i * angleSlice)
  .curve(d3.curveLinearClosed);

const svg = d3.select("#chart").append("svg")
  .attr("viewBox", [-width/2, -height/2, width, height]);

// Draw gridlines
[20, 40, 60, 80, 100].forEach(level => {
  svg.append("polygon")
    .attr("points", axes.map((_, i) => {
      const r = rScale(level);
      return [r * Math.cos(i * angleSlice - Math.PI/2),
              r * Math.sin(i * angleSlice - Math.PI/2)].join(",");
    }).join(" "))
    .attr("fill", "none").attr("stroke", "#ccc");
});

// Draw data polygon
svg.append("path").datum(playerStats)
  .attr("d", line).attr("fill", "steelblue").attr("fill-opacity", 0.3)
  .attr("stroke", "steelblue").attr("stroke-width", 2);