ConnectedScatterPlot

Data Visualization

visx 기반 연결 산점도.

Usage

두 지표의 관계가 시간 순서에 따라 이동하는 궤적을 비교할 때 사용한다.

import

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

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

ConnectedScatterPlot Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

xKey

필수

string

지정 안 함

yKey

필수

string

지정 안 함

className

string

지정 안 함

color

string

지정 안 함

curve

"linear" | "monotone"

linear

labelKey

string

지정 안 함

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

pointRadius

number

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

xFormat

(value: number) => string

지정 안 함

xLabel

string

지정 안 함

yFormat

(value: number) => string

지정 안 함

yLabel

string

지정 안 함

예제

기본 (점 라벨)

코드

Open in Playground

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

// 월별 평균 학습 시간(분) vs 평균 점수 — 학습 시간이 늘며 점수가 오르는 궤적
const monthlyProgress = [
  { month: '1월', studyMinutes: 118, avgScore: 62 },
  { month: '2월', studyMinutes: 126, avgScore: 64 },
  { month: '3월', studyMinutes: 141, avgScore: 69 },
  { month: '4월', studyMinutes: 137, avgScore: 72 },
  { month: '5월', studyMinutes: 158, avgScore: 74 },
  { month: '6월', studyMinutes: 171, avgScore: 79 },
  { month: '7월', studyMinutes: 163, avgScore: 81 },
  { month: '8월', studyMinutes: 182, avgScore: 84 },
];

const ConnectedScatterPlotBasicExample = () => (
    <ConnectedScatterPlot
      data={monthlyProgress}
      xKey="studyMinutes"
      yKey="avgScore"
      labelKey="month"
      xLabel="학습시간"
      yLabel="평균점수"
    />
  );

export default ConnectedScatterPlotBasicExample;

곡선 연결 (monotone)

코드

Open in Playground

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

// 월별 평균 학습 시간(분) vs 평균 점수 — 학습 시간이 늘며 점수가 오르는 궤적
const monthlyProgress = [
  { month: '1월', studyMinutes: 118, avgScore: 62 },
  { month: '2월', studyMinutes: 126, avgScore: 64 },
  { month: '3월', studyMinutes: 141, avgScore: 69 },
  { month: '4월', studyMinutes: 137, avgScore: 72 },
  { month: '5월', studyMinutes: 158, avgScore: 74 },
  { month: '6월', studyMinutes: 171, avgScore: 79 },
  { month: '7월', studyMinutes: 163, avgScore: 81 },
  { month: '8월', studyMinutes: 182, avgScore: 84 },
];

const ConnectedScatterPlotMonotoneCurveExample = () => (
    <ConnectedScatterPlot
      data={monthlyProgress}
      xKey="studyMinutes"
      yKey="avgScore"
      labelKey="month"
      xLabel="학습시간"
      yLabel="평균점수"
      curve="monotone"
    />
  );

export default ConnectedScatterPlotMonotoneCurveExample;

커스텀 색상 · 점 크기 · 범례

코드

Open in Playground

import { ConnectedScatterPlot } from '@mildang/design-system/Chart';
import { token } from '@mildang/styled-system/tokens';

// 월별 평균 학습 시간(분) vs 평균 점수 — 학습 시간이 늘며 점수가 오르는 궤적
const monthlyProgress = [
  { month: '1월', studyMinutes: 118, avgScore: 62 },
  { month: '2월', studyMinutes: 126, avgScore: 64 },
  { month: '3월', studyMinutes: 141, avgScore: 69 },
  { month: '4월', studyMinutes: 137, avgScore: 72 },
  { month: '5월', studyMinutes: 158, avgScore: 74 },
  { month: '6월', studyMinutes: 171, avgScore: 79 },
  { month: '7월', studyMinutes: 163, avgScore: 81 },
  { month: '8월', studyMinutes: 182, avgScore: 84 },
];

const ConnectedScatterPlotCustomStyleExample = () => (
    <ConnectedScatterPlot
      data={monthlyProgress}
      xKey="studyMinutes"
      yKey="avgScore"
      labelKey="month"
      xLabel="학습시간"
      yLabel="평균점수"
      color={token('colors.purple.light.400')}
      pointRadius={6}
      showLegend
    />
  );

export default ConnectedScatterPlotCustomStyleExample;

Hover Tooltip

코드

Open in Playground

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

// 월별 평균 학습 시간(분) vs 평균 점수 — 학습 시간이 늘며 점수가 오르는 궤적
const monthlyProgress = [
  { month: '1월', studyMinutes: 118, avgScore: 62 },
  { month: '2월', studyMinutes: 126, avgScore: 64 },
  { month: '3월', studyMinutes: 141, avgScore: 69 },
  { month: '4월', studyMinutes: 137, avgScore: 72 },
  { month: '5월', studyMinutes: 158, avgScore: 74 },
  { month: '6월', studyMinutes: 171, avgScore: 79 },
  { month: '7월', studyMinutes: 163, avgScore: 81 },
  { month: '8월', studyMinutes: 182, avgScore: 84 },
];

const ConnectedScatterPlotHoverTooltipExample = () => (
    <ConnectedScatterPlot
      data={monthlyProgress}
      xKey="studyMinutes"
      yKey="avgScore"
      labelKey="month"
      xLabel="학습시간"
      yLabel="평균점수"
      xFormat={(v) => `${v.toLocaleString()}분`}
      yFormat={(v) => `${v.toLocaleString()}점`}
      showTooltip
    />
  );

export default ConnectedScatterPlotHoverTooltipExample;

빈 데이터

코드

Open in Playground

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

const ConnectedScatterPlotEmptyExample = () => (
    <ConnectedScatterPlot data={[]} xKey="studyMinutes" yKey="avgScore" xLabel="학습시간" yLabel="평균점수" />
  );

export default ConnectedScatterPlotEmptyExample;

데이터 1개

코드

Open in Playground

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

const ConnectedScatterPlotSinglePointExample = () => (
    <ConnectedScatterPlot
      data={[{ month: '1월', studyMinutes: 118, avgScore: 62 }]}
      xKey="studyMinutes"
      yKey="avgScore"
      labelKey="month"
      xLabel="학습시간"
      yLabel="평균점수"
    />
  );

export default ConnectedScatterPlotSinglePointExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

// 월별 평균 학습 시간(분) vs 평균 점수 — 학습 시간이 늘며 점수가 오르는 궤적
const monthlyProgress = [
  { month: '1월', studyMinutes: 118, avgScore: 62 },
  { month: '2월', studyMinutes: 126, avgScore: 64 },
  { month: '3월', studyMinutes: 141, avgScore: 69 },
  { month: '4월', studyMinutes: 137, avgScore: 72 },
  { month: '5월', studyMinutes: 158, avgScore: 74 },
  { month: '6월', studyMinutes: 171, avgScore: 79 },
  { month: '7월', studyMinutes: 163, avgScore: 81 },
  { month: '8월', studyMinutes: 182, avgScore: 84 },
];

const ConnectedScatterPlotResponsiveExample = () => (
    <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: 240 }}>
            <ConnectedScatterPlot
              data={monthlyProgress}
              xKey="studyMinutes"
              yKey="avgScore"
              labelKey="month"
              xLabel="학습시간"
              yLabel="평균점수"
            />
          </div>
        </div>
      ))}
    </div>
  );

export default ConnectedScatterPlotResponsiveExample;