VennDiagram

visual

2~3개 집합을 면적 비례 원으로 그리는 순수 SVG 벤 다이어그램. 2집합은 겹침 면적을 정확히 풀고, 3집합은 쌍별 거리로 근사합니다. 배타 영역별 hover/클릭과 숨김 표를 제공합니다.

100%

두 집합 — 겹침 면적이 정확히 맞는다

세 집합 — 영역 클릭

플랫폼별 활성 사용자

선택한 영역: 없음

겹침 없음 / 완전 포함

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

VennDiagram 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

VennDiagram Props

Prop	타입	기본값	설명
`sets`*	`VennSet[]`	—	집합 2~3개. { id, label, size, color? }
`intersections`*	`VennIntersection[]`	—	쌍별 겹침과 (3집합이면) 삼중 겹침. { sets, size }
`height`	`number`	`280`	차트 높이. 너비는 1.5배 viewBox
`valueFormatter`	`(n: number) => string`	`Intl.NumberFormat`	값 포맷터
`showLabels`	`boolean`	`true`	집합 이름과 영역 값 표시
`onRegionClick`	`(region: { sets: string[]; size: number }) => void`	—	배타 영역 클릭 핸들러. 주면 영역이 버튼이 됩니다
`labels`	`VennDiagramLabels`	—	i18n용 라벨 오버라이드 (요약 문장, 영역 이름, 빈 상태, 표)
`className`	`string`	—	루트 CSS 클래스
`aria-label`	`string`	—	접근성 이름. 뒤에 계산된 요약 문장이 붙습니다

Design contract

Usage

집합 2~3개의 겹침을 보여 줄 때 씁니다. 집합 크기와 쌍별 겹침(3집합이면 삼중 겹침까지)을 같은 단위로 넘기세요.
valueFormatter로 단위(명, 건)를 붙이면 영역 값과 aria 요약 문장에 함께 반영됩니다.
영역 클릭으로 드릴다운하려면 onRegionClick을 주세요. 그러면 각 배타 영역이 버튼이 됩니다.
Avoid: 집합 4개 이상은 원으로 정확히 그릴 수 없어 무시됩니다. 그 경우 매트릭스나 UpSet 형태를 쓰세요.
Avoid: 3집합 레이아웃은 근사입니다. 정확한 수치가 중요하면 값 라벨과 표를 함께 보여 주세요.

Import

tsx

import {
  VennDiagram,
  computeVennLayout,
  exclusiveRegionSizes,
  lensArea,
  solveCircleDistance,
  vennRegionKey,
} from "@reopt-ai/opt-ui";

영역별 크기

영역

크기

구매자만

900명

뉴스레터 구독자만

500명

구매자 ∩ 뉴스레터 구독자

300명

영역별 크기

영역

크기

웹만

2,240명

iOS만

1,360명

Android만

1,100명

웹 ∩ iOS

480명

웹 ∩ Android

340명

iOS ∩ Android

120명

웹 ∩ iOS ∩ Android

140명

영역별 크기

영역

크기

무료 플랜만

900명

엔터프라이즈만

300명

무료 플랜 ∩ 엔터프라이즈

0명

영역별 크기

영역

크기

전체 사용자만

1,500명

이번 주 활성만

0명

전체 사용자 ∩ 이번 주 활성

500명

Prop

타입

기본값

설명

sets*

VennSet[]

—

집합 2~3개. { id, label, size, color? }

intersections*

VennIntersection[]

—

쌍별 겹침과 (3집합이면) 삼중 겹침. { sets, size }

height

number

280

차트 높이. 너비는 1.5배 viewBox

valueFormatter

(n: number) => string

Intl.NumberFormat

값 포맷터

showLabels

boolean

true

집합 이름과 영역 값 표시

onRegionClick

(region: { sets: string[]; size: number }) => void

—

배타 영역 클릭 핸들러. 주면 영역이 버튼이 됩니다

labels

VennDiagramLabels

—

i18n용 라벨 오버라이드 (요약 문장, 영역 이름, 빈 상태, 표)

className

string

—

루트 CSS 클래스

aria-label

string

—

접근성 이름. 뒤에 계산된 요약 문장이 붙습니다

Design contract

Usage

집합 2~3개의 겹침을 보여 줄 때 씁니다. 집합 크기와 쌍별 겹침(3집합이면 삼중 겹침까지)을 같은 단위로 넘기세요.
valueFormatter로 단위(명, 건)를 붙이면 영역 값과 aria 요약 문장에 함께 반영됩니다.
영역 클릭으로 드릴다운하려면 onRegionClick을 주세요. 그러면 각 배타 영역이 버튼이 됩니다.
Avoid: 집합 4개 이상은 원으로 정확히 그릴 수 없어 무시됩니다. 그 경우 매트릭스나 UpSet 형태를 쓰세요.
Avoid: 3집합 레이아웃은 근사입니다. 정확한 수치가 중요하면 값 라벨과 표를 함께 보여 주세요.