Radial Bar Chart

설명 / Description

방사형 막대 차트는 익숙한 막대 차트를 중심점 둘레로 감싸서, 막대가 바퀴의 살처럼 바깥으로 뻗어 나가게 만듭니다. 각 막대는 동일한 각도의 조각을 차지하며, 길이(반지름)가 정량적 값을 인코딩합니다. 그 결과 대략 원형인 영역 안에 많은 범주를 담을 수 있는 간결하고 시각적으로 독특한 디스플레이가 만들어집니다.

A radial bar chart takes the familiar bar chart and wraps it around a central point, so bars extend outward like spokes of a wheel. Each bar occupies an equal angular slice and its length (radius) encodes the quantitative value. The result is a compact, visually distinctive display that can fit many categories into a roughly circular footprint.

원형 레이아웃은 방사형 막대 차트를 시각적 임팩트와 공간 효율이 중시되는 대시보드, 인포그래픽, 데이터 아트에서 인기 있게 만듭니다. 이 형태는 또한 주기적 데이터와 자연스러운 친화성을 가집니다: 연중 월, 하루 중 시간, 나침반 방향은 원 둘레의 각도 위치에 자연스럽게 대응되어, 차트의 원형 형태로 데이터의 주기적 성질을 강화합니다.

The circular layout makes radial bar charts popular in dashboards, infographics, and data art, where visual impact and space efficiency are valued. The form also has a natural affinity with cyclical data: months of the year, hours of the day, or compass directions map naturally to angular positions around a circle, reinforcing the cyclical nature of the data with the cyclical shape of the chart.

하지만 방사형 레이아웃은 체계적인 지각 왜곡을 일으킵니다: (중심에서 더 먼) 바깥쪽 막대는 동일한 반지름 길이의 안쪽 막대보다 더 긴 호를 그리므로 더 커 보입니다. 즉, 값이 같은 막대라도 안쪽 반지름에 대한 각도 위치에 따라 다르게 보인다는 뜻입니다. 이런 이유로 방사형 막대 차트는 선형 막대 차트에 비해 비교 정확도를 어느 정도 희생합니다. 디자이너는 안쪽 반지름을 상대적으로 크게 유지하여(안쪽과 바깥쪽 호 길이의 비율 차이를 줄여서) 정확한 값을 위한 툴팁을 제공함으로써 이를 완화할 수 있습니다.

However, the radial layout introduces a systematic perceptual distortion: outer bars (those farther from the center) span a longer arc than inner bars of the same radial length, making them appear larger. This means that bars of equal value look different depending on their angular position relative to the inner radius. For this reason, radial bar charts sacrifice some comparison accuracy compared to their linear counterparts. Designers can mitigate this by keeping the inner radius relatively large (reducing the proportional difference between inner and outer arc lengths) and providing tooltips for exact values.

언제 사용하나 / When to Use

• 원형이 데이터의 성질을 강화하는 주기적 데이터(12개월, 24시간, 7일) 표시
• Displaying cyclical data (12 months, 24 hours, 7 days) where the circular form reinforces the data's nature
• 제한된 공간에서 시각적으로 매력적인 대시보드나 인포그래픽 디스플레이 제작
• Creating visually engaging dashboards or infographic displays with limited space
• 범주 수가 적당하고(6-24개) 원 둘레에 잘 들어맞을 때
• When the number of categories is moderate (6-24) and fits well around a circle
• 정확한 비교보다 대략적인 비교로 충분한 순위나 비교 표시
• Showing rankings or comparisons where approximate rather than precise comparison suffices
• 원형 형태가 주제적으로 적합할 때(시계 모양, 나침반 모양, 계절성)
• When the circular form is thematically appropriate (clock-like, compass-like, seasonal)

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

• 막대 길이의 정밀한 비교가 필수적일 때 -- 표준 막대 차트가 더 정확합니다
• When precise comparison of bar lengths is essential -- a standard bar chart is more accurate
• 범주 간 주기적이거나 원형적인 관계가 없어서 레이아웃이 의미를 더하지 못할 때
• When categories have no cyclical or circular relationship and the layout adds no meaning
• 범주가 너무 적어(4개 미만) 원이 성겨 보이거나, 너무 많아(30개 초과) 쐐기가 지나치게 얇아질 때
• When there are very few categories (fewer than 4) and the circle looks sparse, or very many (more than 30) and wedges become too thin
• 추세나 시간에 따른 변화를 보여줄 때 -- 선 그래프가 시간적 연속성을 더 잘 보존합니다
• For showing trends or change over time -- a line graph preserves temporal continuity better
• 낯선 레이아웃 때문에 청중이 혼란스러워할 수 있을 때
• When the audience may be confused by the unfamiliar layout

구조 / Anatomy

• 막대(세그먼트): 중심에서 방사하는 직사각형 또는 호 모양의 마크로, 범주마다 하나씩. 길이(반지름)가 값을 인코딩합니다.
• Bars (segments): Rectangular or arc-shaped marks radiating from the center, one per category. Length (radius) encodes the value.
• 안쪽 반지름: 막대가 시작되는 반지름. 안쪽 반지름이 클수록 안쪽과 바깥쪽 호 길이 사이의 지각 왜곡이 줄어듭니다.
• Inner radius: The starting radius of the bars. A larger inner radius reduces perceptual distortion between inner and outer arc lengths.
• 각도 조각: 원 둘레에 배열된, 범주마다 하나씩인 동일 너비의 각도 구획.
• Angular slices: Equal-width angular divisions, one per category, arranged around the circle.
• 방사형 격자선: 값 척도(예: 0, 25, 50, 75, 100)를 표시하는 동심원.
• Radial gridlines: Concentric circles marking value scales (e.g., 0, 25, 50, 75, 100).
• 범주 레이블: 둘레를 따라 또는 각 막대 끝에 배치된 텍스트.
• Category labels: Text placed along the circumference or at the end of each bar.
• 색상 인코딩: 범주별로 구별되는 색상 또는 값을 인코딩하는 그러데이션으로 채워진 막대.
• Color encoding: Bars filled with distinct colors per category or a gradient encoding the value.

변형 / Variations

• 방사형 누적 막대 차트: 각 막대가 하위 범주 구성을 보여주는 누적 세그먼트로 나뉩니다.
• Radial stacked bar chart: Each bar is split into stacked segments showing sub-category composition.
• 방사형 그룹 막대 차트: 각도 조각마다 여러 막대가 서로 다른 반지름에 배치되어 하위 그룹을 비교합니다.
• Radial grouped bar chart: Multiple bars per angular slice, arranged at different radii, for sub-group comparison.
• 방사형 진행률 차트: 하나의 막대가 원 둘레를 부분적으로 감싸며 목표를 향한 진행률을 보여줍니다(피트니스 트래커와 KPI 대시보드에서 흔함).
• Radial progress chart: A single bar wraps partially around the circle to show progress toward a goal (common in fitness trackers and KPI dashboards).
• 나이팅게일 로즈 차트: 막대 대신 쐐기 모양 영역을 사용하며, 길이가 아니라 면적이 값을 인코딩합니다.
• Nightingale rose chart: Wedge-shaped areas instead of bars; area rather than length encodes value.
• 방사형 롤리팝 차트: 완전한 막대 대신 점이 있는 얇은 선을 사용하여 원형 레이아웃의 잉크를 줄입니다.
• Radial lollipop chart: Thin lines with dots instead of full bars, reducing ink in the circular layout.

코드 레퍼런스 / Code Reference

// D3 - radial bar chart
import * as d3 from "d3";

const angle = d3.scaleBand()
  .domain(data.map(d => d.category))
  .range([0, 2 * Math.PI])
  .padding(0.1);

const radius = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([innerRadius, outerRadius]);

const arc = d3.arc()
  .innerRadius(innerRadius)
  .outerRadius(d => radius(d.value))
  .startAngle(d => angle(d.category))
  .endAngle(d => angle(d.category) + angle.bandwidth())
  .padAngle(0.02)
  .padRadius(innerRadius);

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

svg.selectAll("path").data(data).join("path")
  .attr("d", arc)
  .attr("fill", (d, i) => d3.schemeTableau10[i % 10]);

// Concentric gridlines
svg.selectAll(".grid").data(radius.ticks(4)).join("circle")
  .attr("r", radius)
  .attr("fill", "none").attr("stroke", "#ddd");