ParallelCoordinatesPlot

Data Visualization

visx 기반 평행 좌표 플롯.

Usage

여러 수치 차원에서 각 항목의 프로파일과 군집을 동시에 비교할 때 사용한다.

import

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

API Reference

ParallelCoordinatesPlot Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

dimensions

필수

string[]

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

colorKey

string

지정 안 함

colors

string[]

지정 안 함

dimensionLabels

Record<string, string>

지정 안 함

legendPosition

"bottom" | "left" | "right" | "top"

bottom

lineOpacity

number

지정 안 함

margin

Partial<ChartMargin>

지정 안 함

showAxisLabels

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

예제

기본 (단색)

코드

Open in Playground

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

const SUBJECTS = ['국어', '영어', '수학', '과학', '사회'];

const studentScores = [
  { 학생: '김민준', 반: '1반', 국어: 85, 영어: 92, 수학: 78, 과학: 88, 사회: 90 },
  { 학생: '이서연', 반: '1반', 국어: 91, 영어: 84, 수학: 95, 과학: 79, 사회: 86 },
  { 학생: '박지호', 반: '2반', 국어: 72, 영어: 68, 수학: 88, 과학: 92, 사회: 75 },
  { 학생: '최수아', 반: '2반', 국어: 88, 영어: 95, 수학: 70, 과학: 84, 사회: 93 },
  { 학생: '정도윤', 반: '3반', 국어: 79, 영어: 73, 수학: 82, 과학: 76, 사회: 81 },
  { 학생: '한지우', 반: '3반', 국어: 94, 영어: 88, 수학: 91, 과학: 90, 사회: 87 },
];

const ParallelCoordinatesPlotBasicExample = () => <ParallelCoordinatesPlot data={studentScores} dimensions={SUBJECTS} />;

export default ParallelCoordinatesPlotBasicExample;

그룹별 색 + 범례

코드

Open in Playground

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

const SUBJECTS = ['국어', '영어', '수학', '과학', '사회'];

const studentScores = [
  { 학생: '김민준', 반: '1반', 국어: 85, 영어: 92, 수학: 78, 과학: 88, 사회: 90 },
  { 학생: '이서연', 반: '1반', 국어: 91, 영어: 84, 수학: 95, 과학: 79, 사회: 86 },
  { 학생: '박지호', 반: '2반', 국어: 72, 영어: 68, 수학: 88, 과학: 92, 사회: 75 },
  { 학생: '최수아', 반: '2반', 국어: 88, 영어: 95, 수학: 70, 과학: 84, 사회: 93 },
  { 학생: '정도윤', 반: '3반', 국어: 79, 영어: 73, 수학: 82, 과학: 76, 사회: 81 },
  { 학생: '한지우', 반: '3반', 국어: 94, 영어: 88, 수학: 91, 과학: 90, 사회: 87 },
];

const ParallelCoordinatesPlotGroupColorExample = () => (
    <ParallelCoordinatesPlot
      data={studentScores}
      dimensions={SUBJECTS}
      colorKey="반"
      showLegend
    />
  );

export default ParallelCoordinatesPlotGroupColorExample;

Hover Tooltip

코드

Open in Playground

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

const SUBJECTS = ['국어', '영어', '수학', '과학', '사회'];

const studentScores = [
  { 학생: '김민준', 반: '1반', 국어: 85, 영어: 92, 수학: 78, 과학: 88, 사회: 90 },
  { 학생: '이서연', 반: '1반', 국어: 91, 영어: 84, 수학: 95, 과학: 79, 사회: 86 },
  { 학생: '박지호', 반: '2반', 국어: 72, 영어: 68, 수학: 88, 과학: 92, 사회: 75 },
  { 학생: '최수아', 반: '2반', 국어: 88, 영어: 95, 수학: 70, 과학: 84, 사회: 93 },
  { 학생: '정도윤', 반: '3반', 국어: 79, 영어: 73, 수학: 82, 과학: 76, 사회: 81 },
  { 학생: '한지우', 반: '3반', 국어: 94, 영어: 88, 수학: 91, 과학: 90, 사회: 87 },
];

const ParallelCoordinatesPlotHoverTooltipExample = () => (
    <ParallelCoordinatesPlot
      data={studentScores}
      dimensions={SUBJECTS}
      colorKey="학생"
      showTooltip
    />
  );

export default ParallelCoordinatesPlotHoverTooltipExample;

차원 라벨 커스텀

코드

Open in Playground

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

const weeklyStudy = [
  { 이름: '중간고사 대비', kor: 120, eng: 90, math: 150, sci: 60 },
  { 이름: '기말고사 대비', kor: 95, eng: 110, math: 135, sci: 80 },
  { 이름: '방학 특강', kor: 60, eng: 140, math: 100, sci: 45 },
];

const ParallelCoordinatesPlotCustomDimensionLabelsExample = () => (
    <ParallelCoordinatesPlot
      data={weeklyStudy}
      dimensions={['kor', 'eng', 'math', 'sci']}
      dimensionLabels={{ kor: '국어 (분)', eng: '영어 (분)', math: '수학 (분)', sci: '과학 (분)' }}
      colorKey="이름"
      showLegend
    />
  );

export default ParallelCoordinatesPlotCustomDimensionLabelsExample;

낮은 불투명도 + 축 라벨 숨김

코드

Open in Playground

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

const SUBJECTS = ['국어', '영어', '수학', '과학', '사회'];

const studentScores = [
  { 학생: '김민준', 반: '1반', 국어: 85, 영어: 92, 수학: 78, 과학: 88, 사회: 90 },
  { 학생: '이서연', 반: '1반', 국어: 91, 영어: 84, 수학: 95, 과학: 79, 사회: 86 },
  { 학생: '박지호', 반: '2반', 국어: 72, 영어: 68, 수학: 88, 과학: 92, 사회: 75 },
  { 학생: '최수아', 반: '2반', 국어: 88, 영어: 95, 수학: 70, 과학: 84, 사회: 93 },
  { 학생: '정도윤', 반: '3반', 국어: 79, 영어: 73, 수학: 82, 과학: 76, 사회: 81 },
  { 학생: '한지우', 반: '3반', 국어: 94, 영어: 88, 수학: 91, 과학: 90, 사회: 87 },
];

const ParallelCoordinatesPlotLowOpacityExample = () => (
    <ParallelCoordinatesPlot
      data={studentScores}
      dimensions={SUBJECTS}
      lineOpacity={0.15}
      showAxisLabels={false}
    />
  );

export default ParallelCoordinatesPlotLowOpacityExample;

빈 데이터

코드

Open in Playground

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

const SUBJECTS = ['국어', '영어', '수학', '과학', '사회'];

const ParallelCoordinatesPlotEmptyExample = () => <ParallelCoordinatesPlot data={[]} dimensions={SUBJECTS} />;

export default ParallelCoordinatesPlotEmptyExample;

데이터 1행 (0값 포함)

코드

Open in Playground

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

const SUBJECTS = ['국어', '영어', '수학', '과학', '사회'];

const ParallelCoordinatesPlotSingleRowExample = () => (
    <ParallelCoordinatesPlot
      data={[{ 학생: '김민준', 국어: 85, 영어: 0, 수학: 78, 과학: 88, 사회: 90 }]}
      dimensions={SUBJECTS}
      colorKey="학생"
      showLegend
    />
  );

export default ParallelCoordinatesPlotSingleRowExample;

0값 포함 다중 행

코드

Open in Playground

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

const SUBJECTS = ['국어', '영어', '수학', '과학', '사회'];

const ParallelCoordinatesPlotWithZeroValuesExample = () => (
    <ParallelCoordinatesPlot
      data={[
        { 학생: '김민준', 국어: 0, 영어: 92, 수학: 78, 과학: 0, 사회: 90 },
        { 학생: '이서연', 국어: 91, 영어: 0, 수학: 95, 과학: 79, 사회: 0 },
        { 학생: '박지호', 국어: 72, 영어: 68, 수학: 0, 과학: 92, 사회: 75 },
      ]}
      dimensions={SUBJECTS}
      colorKey="학생"
      showLegend
    />
  );

export default ParallelCoordinatesPlotWithZeroValuesExample;

반응형 (너비 자동 조정)

코드

Open in Playground

import { ParallelCoordinatesPlot } from '@mildang/design-system/Chart';

const SUBJECTS = ['국어', '영어', '수학', '과학', '사회'];

const studentScores = [
  { 학생: '김민준', 반: '1반', 국어: 85, 영어: 92, 수학: 78, 과학: 88, 사회: 90 },
  { 학생: '이서연', 반: '1반', 국어: 91, 영어: 84, 수학: 95, 과학: 79, 사회: 86 },
  { 학생: '박지호', 반: '2반', 국어: 72, 영어: 68, 수학: 88, 과학: 92, 사회: 75 },
  { 학생: '최수아', 반: '2반', 국어: 88, 영어: 95, 수학: 70, 과학: 84, 사회: 93 },
  { 학생: '정도윤', 반: '3반', 국어: 79, 영어: 73, 수학: 82, 과학: 76, 사회: 81 },
  { 학생: '한지우', 반: '3반', 국어: 94, 영어: 88, 수학: 91, 과학: 90, 사회: 87 },
];

const ParallelCoordinatesPlotResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([320, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w }}>
          <div style={{ marginBottom: 4, fontSize: 11 }}>{w}px</div>
          <div style={{ width: w, height: 240 }}>
            <ParallelCoordinatesPlot
              data={studentScores}
              dimensions={SUBJECTS}
              colorKey="반"
              showLegend
            />
          </div>
        </div>
      ))}
    </div>
  );

export default ParallelCoordinatesPlotResponsiveExample;