Graphic Walker

(opens in a new tab)
(opens in a new tab)
(opens in a new tab)
Graphic Walker는 드래그 앤 드롭을 통해 데이터를 인터랙티브 시각화로 변환하는 오픈소스 Tableau 대안입니다. 가벼운 임베더블 React 컴포넌트로 동작하며, 무거운 BI 플랫폼이 필요하지 않습니다.
주요 기능
- 드래그 앤 드롭 탐색 -- 필드를 시각적 인코딩 채널(행, 열, 색상, 크기, 모양, 투명도)에 드래그하여 시각화를 구축합니다
- 그래픽 문법 -- vega-lite (opens in a new tab) 기반으로 막대, 선, 영역, 산점도, 히트맵, 박스 플롯, 지리적 차트를 지원합니다
- 다양한 컴포넌트 -- 전체 탐색을 위한
GraphicWalker, 읽기 전용 차트 표시를 위한GraphicRenderer, 임베딩을 위한PureRenderer, 데이터 테이블을 위한TableWalker - 클라이언트 또는 서버 연산 -- 기본적으로 WebWorker에서 연산을 실행하거나, 대규모 데이터셋의 경우 서버에 위임합니다
- 테마 -- 내장 테마(vega, g2, streamlit), 다크 모드 지원 및 완전히 커스터마이즈 가능한 UI 색상
- 지리적 시각화 -- GeoJSON/TopoJSON을 지원하는 단계구분도 및 포인트 맵
- 차트 내보내기 -- ref API를 통해 차트를 SVG 또는 PNG로 내보내기
- i18n -- 영어, 중국어, 일본어 내장 지원 및 커스텀 번역 지원
- React 없이도 가능 -- 모든 웹 프레임워크를 위한 Vanilla JS 임베딩 함수 제공
빠른 시작
npm install @kanaries/graphic-walkerimport { GraphicWalker } from '@kanaries/graphic-walker';
const fields = [
{ fid: 'date', name: 'Date', semanticType: 'temporal', analyticType: 'dimension' },
{ fid: 'category', name: 'Category', semanticType: 'nominal', analyticType: 'dimension' },
{ fid: 'sales', name: 'Sales', semanticType: 'quantitative', analyticType: 'measure' },
];
function App() {
return <GraphicWalker data={data} fields={fields} />;
}전체 안내는 시작하기 가이드를 참조하세요.
문서
| 섹션 | 설명 |
|---|---|
| 시작하기 | 설치, 기본 사용법 및 필드 구성 |
| API 참조 | 모든 컴포넌트의 완전한 props 문서 |
| 가이드 | 차트 유형, 테마, 연산, 지리적 시각화 등 |
| 튜토리얼 | 특정 차트 유형을 만드는 단계별 튜토리얼 |
| FAQ | 자주 묻는 질문 및 문제 해결 |
온라인 플레이그라운드
설치 없이 Graphic Walker를 체험해 보세요: Graphic Walker 온라인 (opens in a new tab)
라이선스
Graphic Walker는 Apache-2.0 라이선스 (opens in a new tab)로 배포됩니다.