새로고침 중...
테크

SVG 차트 테스트

SVG 차트 컴포넌트 렌더링 테스트

#테스트#차트

1. Line Chart (꺾은선 그래프)

월별 매출 추이 위로 갈수록 매출이 높아요. 점과 선이 연결된 차트는 시간에 따른 변화를 보여줘요.
매출 (억원)
50억 40억 30억 20억 10억
1월 2월 3월 4월 5월 6월

2. Area Chart (영역 차트)

분기별 사용자 수 색칠된 영역이 클수록 사용자가 많아요. 누적 데이터나 전체 규모를 강조할 때 사용해요.
사용자 (만명)
150만 100만 50만 0
Q1 Q2 Q3 Q4

3. Scatter Plot (산점도)

투자금 vs 매출 성장률 원이 클수록 직원 수가 많아요. 오른쪽으로 갈수록 투자금이 많고, 위로 갈수록 성장률이 높아요.
성장률 (%)
100% 75% 50% 25% 0%
10억 50억 100억 200억
투자금 (억원)
일반 기업
유니콘 기업
원 크기 = 직원 수

4. Bubble Chart (버블 차트)

시장 분석 (X: 점유율, Y: 성장률, 크기: 매출) 원이 클수록 매출이 커요. X위치, Y위치, 원 크기로 3가지 데이터를 동시에 보여줘요.
C사 A사 B사
A사: 점유율 50%, 성장률 높음
B사: 점유율 80%, 성장률 중간
C사: 점유율 20%, 성장률 낮음

5. Radar Chart (방사형 차트)

A사 역량 분석 (5점 만점) 파란 영역이 바깥쪽에 가까울수록 점수가 높아요. 여러 항목을 한눈에 비교할 때 좋아요.
기술력 (4.5) 마케팅 (3.5) 영업 (3.0) 재무 (3.0) 인력 (4.0)

6. 점수 분포 범위

그룹별 시험 점수 분포 막대가 점수 범위를 보여줘요. 가운데 점이 평균이에요. 넓을수록 점수 차이가 커요.
A반
55점 평균 78점 95점
B반
65점 평균 82점 90점
C반
50점 평균 72점 98점
0점 25점 50점 75점 100점

7. Word Cloud (워드 클라우드)

2025년 IT 트렌드 키워드 (빈도순) 글자가 클수록 자주 언급된 키워드예요. 단어 빈도나 중요도를 크기로 표현해요.
AI GPT 에이전트 자율주행 반도체 로봇 양자컴퓨팅 메타버스 블록체인

8. Sunburst (선버스트)

사업부별 매출 비중 각 조각을 클릭하면 상세 정보가 나와요. 계층 구조의 비율을 보여주는 원형 차트예요.
IT 유통 금융 제조
IT (25%)
유통 (25%)
금융 (25%)
제조 (25%)

9. Stream Graph (스트림 그래프)

연도별 기술 투자 흐름 (단위: 조원) 띠의 두께가 투자 규모예요. 호버하면 해당 분야가 강조돼요.
2020 2021 2022 2023 2024
AI/ML
클라우드
보안

10. Chord Diagram (코드 다이어그램)

부서간 협업 빈도 외곽 호의 색상이 각 부서예요. 가운데 연결선이 두꺼울수록 협업이 많아요.
개발팀 디자인팀 마케팅팀 영업팀
개발팀 (우상단)
디자인팀 (우하단)
마케팅팀 (좌하단)
영업팀 (좌상단)

11. Arc Diagram (아크 다이어그램)

시스템 간 데이터 흐름 호가 높을수록 데이터 양이 많아요. 노드 간의 연결을 호(arc)로 표현해요.
DB 서버 API 서버 웹 서버
파란선: DB↔API 통신
초록선: API↔웹 통신
연한선: DB↔웹 직접 통신 (드묾)

12. Dendrogram (덴드로그램) → 고객 분류 트리

고객 세그먼트 분류 위에서 아래로 고객을 세분화해요. 각 노드를 클릭하면 펼치거나 접을 수 있어요.
  • 👥 전체 고객 (10,000명)
    • ✅ 활성 고객 (6,000명)
      • ⭐ VIP (500명) - 월 10만원+
      • 👤 일반 (5,500명) - 월 1~10만원
    • ⏸️ 비활성 고객 (4,000명)
      • 😴 휴면 (2,500명) - 3개월 미접속
      • 🚪 이탈 (1,500명) - 6개월+ 미접속
💡 세그먼트별 마케팅 전략
• VIP: 전용 혜택, 우선 서비스
• 일반: 등급 업그레이드 유도
• 휴면: 재활성화 쿠폰 발송
• 이탈: 윈백 캠페인 대상

13. Parallel Coordinates (평행 좌표) → 제품 비교표

제품 A (균형형) 85점 평균 점수 가격 90 · 품질 70 · 속도 80 · 안정성 50
제품 B (품질 특화) 80점 평균 점수 가격 70 · 품질 95 · 속도 30 · 안정성 85
제품 C (저가형) 55점 평균 점수 가격 30 · 품질 50 · 속도 70 · 안정성 25
제품별 항목 점수 비교 (100점 만점) 막대가 길수록 점수가 높아요. 각 제품의 강점/약점을 한눈에 비교해요.
🔵 가격 경쟁력
A
90
B
70
C
30
🟢 품질
A
70
B
95
C
50
🟠 속도
A
80
B
30
C
70
🟣 안정성
A
50
B
85
C
25

14. Violin Plot (바이올린 플롯)

반별 수학 점수 분포 바이올린 모양이 넓은 부분에 학생이 많아요. 데이터 분포의 모양을 보여주는 통계 차트예요.
A반 (평균 75점)
B반 (평균 75점)

테스트 완료! 모든 SVG 차트에 ⓘ 툴팁이 추가되었어요. 제목 옆 ? 버튼을 클릭하면 차트 설명을 볼 수 있어요.