ScatterPlot

Data Visualization

visx 기반 산점도.

Usage

두 수치 변수의 상관관계·군집·이상치를 점의 분포로 살펴볼 때 사용한다.

import

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

API Reference

ScatterPlot Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

xKey

필수

string

지정 안 함

yKey

필수

string

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

dotRadius

number

groupKey

string

지정 안 함

groupLabels

Record<string, string>

지정 안 함

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

maxRadius

number

renderNode

(props: ScatterNodeProps) => ReactNode

지정 안 함

showGrid

boolean

true

showLegend

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

sizeKey

string

지정 안 함

예제

기본 산점도

코드

Open in Playground

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

const studentData = [
  { name: '학생1', score: 75, effort: 80, class: 'A반' },
  { name: '학생2', score: 62, effort: 55, class: 'A반' },
  { name: '학생3', score: 88, effort: 90, class: 'B반' },
  { name: '학생4', score: 70, effort: 65, class: 'B반' },
  { name: '학생5', score: 55, effort: 50, class: 'A반' },
  { name: '학생6', score: 92, effort: 95, class: 'B반' },
  { name: '학생7', score: 78, effort: 70, class: 'A반' },
  { name: '학생8', score: 45, effort: 40, class: 'B반' },
];

const ScatterPlotBasicExample = () => (
    <ScatterPlot
      data={studentData}
      xKey="effort"
      yKey="score"
    />
  );

export default ScatterPlotBasicExample;

그룹별 산점도

코드

Open in Playground

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

const studentData = [
  { name: '학생1', score: 75, effort: 80, class: 'A반' },
  { name: '학생2', score: 62, effort: 55, class: 'A반' },
  { name: '학생3', score: 88, effort: 90, class: 'B반' },
  { name: '학생4', score: 70, effort: 65, class: 'B반' },
  { name: '학생5', score: 55, effort: 50, class: 'A반' },
  { name: '학생6', score: 92, effort: 95, class: 'B반' },
  { name: '학생7', score: 78, effort: 70, class: 'A반' },
  { name: '학생8', score: 45, effort: 40, class: 'B반' },
];

const ScatterPlotGroupedExample = () => (
    <ScatterPlot
      data={studentData}
      xKey="effort"
      yKey="score"
      groupKey="class"
      showLegend
    />
  );

export default ScatterPlotGroupedExample;

버블 차트 (크기 매핑)

코드

Open in Playground

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

const studentData = [
  { name: '학생1', score: 75, effort: 80, class: 'A반' },
  { name: '학생2', score: 62, effort: 55, class: 'A반' },
  { name: '학생3', score: 88, effort: 90, class: 'B반' },
  { name: '학생4', score: 70, effort: 65, class: 'B반' },
  { name: '학생5', score: 55, effort: 50, class: 'A반' },
  { name: '학생6', score: 92, effort: 95, class: 'B반' },
  { name: '학생7', score: 78, effort: 70, class: 'A반' },
  { name: '학생8', score: 45, effort: 40, class: 'B반' },
];

const ScatterPlotBubbleExample = () => (
    <ScatterPlot
      data={studentData}
      xKey="effort"
      yKey="score"
      sizeKey="score"
      groupKey="class"
      dotRadius={4}
      maxRadius={20}
      showLegend
    />
  );

export default ScatterPlotBubbleExample;

커스텀 노드

코드

Open in Playground

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

const studentData = [
  { name: '학생1', score: 75, effort: 80, class: 'A반' },
  { name: '학생2', score: 62, effort: 55, class: 'A반' },
  { name: '학생3', score: 88, effort: 90, class: 'B반' },
  { name: '학생4', score: 70, effort: 65, class: 'B반' },
  { name: '학생5', score: 55, effort: 50, class: 'A반' },
  { name: '학생6', score: 92, effort: 95, class: 'B반' },
  { name: '학생7', score: 78, effort: 70, class: 'A반' },
  { name: '학생8', score: 45, effort: 40, class: 'B반' },
];

const ScatterPlotCustomNodeExample = () => (
    <ScatterPlot
      data={studentData}
      xKey="effort"
      yKey="score"
      groupKey="class"
      renderNode={({ r, color }) => (
        <rect x={-r} y={-r} width={r * 2} height={r * 2} fill={color} fillOpacity={0.8} rx={2} />
      )}
      showLegend
    />
  );

export default ScatterPlotCustomNodeExample;

Compound 패턴

코드

Open in Playground

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

const studentData = [
  { name: '학생1', score: 75, effort: 80, class: 'A반' },
  { name: '학생2', score: 62, effort: 55, class: 'A반' },
  { name: '학생3', score: 88, effort: 90, class: 'B반' },
  { name: '학생4', score: 70, effort: 65, class: 'B반' },
  { name: '학생5', score: 55, effort: 50, class: 'A반' },
  { name: '학생6', score: 92, effort: 95, class: 'B반' },
  { name: '학생7', score: 78, effort: 70, class: 'A반' },
  { name: '학생8', score: 45, effort: 40, class: 'B반' },
];

const ScatterPlotCompoundUsageExample = () => (
    <ScatterPlot data={studentData} xKey="effort" yKey="score" groupKey="class">
      <ScatterPlot.Grid />
      <ScatterPlot.XAxis />
      <ScatterPlot.Points />
    </ScatterPlot>
  );

export default ScatterPlotCompoundUsageExample;