Skip to content
GRAPHIC WALKER
Graphic Walker

Graphic Walker

Graphic Walker Overview

License (opens in a new tab) npm version (opens in a new tab) build status (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-walker
import { 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)로 배포됩니다.