EcdfPlot

Data Visualization

visx 기반 경험적 누적분포(ECDF) 계단 곡선.

Usage

여러 집단에서 특정 값 이하의 누적 비율을 계단 곡선으로 비교할 때 사용한다.

import

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

API Reference

EcdfPlot Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

valueKey

필수

string

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

groupKey

string

지정 안 함

label

string

누적 비율

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

paints

ChartPaint[]

지정 안 함

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

valueFormat

(value: number) => string

(value: number) => (Math.round(value * 10) / 10).toLocaleString()

예제

단일 곡선

코드

Open in Playground

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

// A반 — 평균 78점 부근에 몰린 분포
const classAScores = [62, 68, 71, 73, 74, 75, 76, 77, 78, 78, 79, 80, 81, 82, 84, 85, 87, 88, 90, 92];

const singleClassData = classAScores.map((score) => ({ score }));

const EcdfPlotSingleExample = () => <EcdfPlot data={singleClassData} valueKey="score" label="점수 누적분포" />;

export default EcdfPlotSingleExample;

그룹 비교 (반별 점수 누적분포)

코드

Open in Playground

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

// A반 — 평균 78점 부근에 몰린 분포
const classAScores = [62, 68, 71, 73, 74, 75, 76, 77, 78, 78, 79, 80, 81, 82, 84, 85, 87, 88, 90, 92];

// B반 — 평균 63점, 더 넓게 퍼진 분포
const classBScores = [41, 45, 50, 52, 55, 58, 59, 60, 61, 62, 63, 64, 66, 68, 70, 72, 75, 78, 82, 86];

const twoClassData = [
  ...classAScores.map((score) => ({ class: 'A반', score })),
  ...classBScores.map((score) => ({ class: 'B반', score })),
];

const EcdfPlotGroupedExample = () => (
    <EcdfPlot data={twoClassData} valueKey="score" groupKey="class" showLegend showTooltip />
  );

export default EcdfPlotGroupedExample;

Hover Tooltip (x 위치의 그룹별 누적 비율)

코드

Open in Playground

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

// A반 — 평균 78점 부근에 몰린 분포
const classAScores = [62, 68, 71, 73, 74, 75, 76, 77, 78, 78, 79, 80, 81, 82, 84, 85, 87, 88, 90, 92];

// B반 — 평균 63점, 더 넓게 퍼진 분포
const classBScores = [41, 45, 50, 52, 55, 58, 59, 60, 61, 62, 63, 64, 66, 68, 70, 72, 75, 78, 82, 86];

const twoClassData = [
  ...classAScores.map((score) => ({ class: 'A반', score })),
  ...classBScores.map((score) => ({ class: 'B반', score })),
];

const EcdfPlotHoverTooltipExample = () => (
    <EcdfPlot data={twoClassData} valueKey="score" groupKey="class" showLegend showTooltip />
  );

export default EcdfPlotHoverTooltipExample;

그리드·y축 숨김

코드

Open in Playground

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

// A반 — 평균 78점 부근에 몰린 분포
const classAScores = [62, 68, 71, 73, 74, 75, 76, 77, 78, 78, 79, 80, 81, 82, 84, 85, 87, 88, 90, 92];

const singleClassData = classAScores.map((score) => ({ score }));

const EcdfPlotWithoutGridExample = () => (
    <EcdfPlot data={singleClassData} valueKey="score" label="점수 누적분포" showGrid={false} showYAxis={false} />
  );

export default EcdfPlotWithoutGridExample;

빈 데이터

코드

Open in Playground

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

const EcdfPlotEmptyExample = () => <EcdfPlot data={[]} valueKey="score" showLegend />;

export default EcdfPlotEmptyExample;

데이터 1개 (세로 계단)

코드

Open in Playground

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

const EcdfPlotSingleDatumExample = () => <EcdfPlot data={[{ score: 85 }]} valueKey="score" label="점수 누적분포" />;

export default EcdfPlotSingleDatumExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

// A반 — 평균 78점 부근에 몰린 분포
const classAScores = [62, 68, 71, 73, 74, 75, 76, 77, 78, 78, 79, 80, 81, 82, 84, 85, 87, 88, 90, 92];

// B반 — 평균 63점, 더 넓게 퍼진 분포
const classBScores = [41, 45, 50, 52, 55, 58, 59, 60, 61, 62, 63, 64, 66, 68, 70, 72, 75, 78, 82, 86];

const twoClassData = [
  ...classAScores.map((score) => ({ class: 'A반', score })),
  ...classBScores.map((score) => ({ class: 'B반', score })),
];

const EcdfPlotResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([280, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w }}>
          <div style={{ marginBottom: 4, fontSize: 11, color: '#888' }}>{w}px</div>
          <div style={{ width: w, height: 220 }}>
            <EcdfPlot data={twoClassData} valueKey="score" groupKey="class" showLegend />
          </div>
        </div>
      ))}
    </div>
  );

export default EcdfPlotResponsiveExample;