DensityPlot

Data Visualization

visx 기반 커널 밀도 곡선.

Usage

표본의 분포 모양을 부드러운 밀도 곡선으로 겹쳐 비교할 때 사용한다.

import

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

API Reference

DensityPlot Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

valueKey

필수

string

지정 안 함

bandwidth

number

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

fillOpacity

number

0.25

groupKey

string

지정 안 함

label

string

밀도

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

paints

ChartPaint[]

지정 안 함

points

number

showGrid

boolean

false

showLegend

boolean

false

showTooltip

boolean

false

showXAxis

boolean

true

showYAxis

boolean

false

valueFormat

(value: number) => string

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

예제

단일 곡선

코드

Open in Playground

import { DensityPlot } 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 DensityPlotSingleExample = () => <DensityPlot data={singleClassData} valueKey="score" label="점수 분포" />;

export default DensityPlotSingleExample;

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

코드

Open in Playground

import { DensityPlot } 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 DensityPlotGroupedExample = () => (
    <DensityPlot data={twoClassData} valueKey="score" groupKey="class" showLegend showTooltip />
  );

export default DensityPlotGroupedExample;

Hover Tooltip (최근접 곡선)

코드

Open in Playground

import { DensityPlot } 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 DensityPlotHoverTooltipExample = () => (
    <DensityPlot data={singleClassData} valueKey="score" label="점수 분포" showTooltip />
  );

export default DensityPlotHoverTooltipExample;

대역폭 조정 (bandwidth=2, 촘촘한 곡선)

코드

Open in Playground

import { DensityPlot } 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 DensityPlotCustomBandwidthExample = () => (
    <DensityPlot
      data={twoClassData}
      valueKey="score"
      groupKey="class"
      bandwidth={2}
      points={128}
      showLegend
    />
  );

export default DensityPlotCustomBandwidthExample;

밀도 축 + 그리드 표시

코드

Open in Playground

import { DensityPlot } 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 DensityPlotWithAxisAndGridExample = () => (
    <DensityPlot
      data={twoClassData}
      valueKey="score"
      groupKey="class"
      showYAxis
      showGrid
      showLegend
    />
  );

export default DensityPlotWithAxisAndGridExample;

빈 데이터

코드

Open in Playground

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

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

export default DensityPlotEmptyExample;

데이터 1개

코드

Open in Playground

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

const DensityPlotSingleDatumExample = () => <DensityPlot data={[{ score: 85 }]} valueKey="score" label="점수 분포" />;

export default DensityPlotSingleDatumExample;

반응형 (너비 자동 조정)

코드

Open in Playground

import { DensityPlot } 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 DensityPlotResponsiveExample = () => (
    <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 }}>
            <DensityPlot data={twoClassData} valueKey="score" groupKey="class" showLegend />
          </div>
        </div>
      ))}
    </div>
  );

export default DensityPlotResponsiveExample;