Sixtyfold Charts

Sixtyfold Charts는 평범한 DOM 또는 SVG 렌더링으로는 다루기 힘든 대규모 데이터셋을 위한 TypeScript이자 Canvas2D 차트 라이브러리입니다. 브라우저 차트는 지원되는 경우 UI 스레드에서 준비와 렌더링을 분리하기 위해 Web Worker를 사용하며, 필요 시 동일한 렌더러가 메인 스레드로 폴백됩니다.

다중 시리즈 선, 스텝, 범위, 포인트, 막대 및 스택 영역에는 @sixtyfold/line을 사용하세요. OHLCV 캔들, 거래량, 지표, 볼륨 프로파일, 가격선 및 이벤트 마커에는 @sixtyfold/stock을 사용하세요.

브라우저 차트 런타임은 타사 종속성이 없습니다: Core, Line, Stock은 Sixtyfold 패키지에만 의존합니다. 프레임워크 어댑터는 호스트 애플리케이션에 이미 존재하는 프레임워크를 재사용하며, 선택적 MCP 개발자 도구는 별도로 실행되어 차트 번들에 포함되지 않습니다.

여기서 시작하세요

필요한 패키지만 설치하세요.
라인 차트 또는 스톡 차트를 빌드하세요.
바닐라 TypeScript 또는 프레임워크 어댑터를 선택하세요.
프로덕션 데이터를 로드하기 전에 타입된 배열 소유권 계약를 읽으세요.

모든 브라우저 통합은 동일한 수명 주기를 가집니다:

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(data);

// When the view is permanently removed:
chart.destroy();

상세도(LOD)

LOD는 **상세도(level of detail)**를 의미합니다. 이는 차트가 더 큰 데이터셋을 화면 크기에 맞춰 자동으로 표현한 것으로, 선 차트는 중요한 극값과 간격을 유지하고 주식 차트는 캔들을 유효한 OHLCV 기간으로 결합합니다. 확대하면 더 세분화된 데이터가 표시됩니다.

같은 원리는 3D 게임에서 익숙합니다: 화면이 모든 폴리곤을 보여줄 수 없으므로 먼 객체에는 더 단순한 모델을 사용하고 카메라가 가까워지면 상세도를 높입니다. 차트에서는 카메라 거리 대신 표시 범위가 이를 대체합니다—개요는 수백만 개의 구별 불가능한 샘플 대신 경계로 요약을 그리고, 확대하면 더 세밀한 데이터를 복원합니다. 기본 설정은 대부분의 애플리케이션에 적합합니다.

자세히 보기

표시 설정을 변경하기 전에 성능 가이드 및 라이브 상세도 보정을 사용하세요.
Worker와 메인 스레드 렌더링 중에서 선택하거나 서버 사이드 렌더링으로 정적 출력물을 생성하세요.
코딩 에이전트가 설치된 정확한 API를 필요로 할 때 로컬 Model Context Protocol(MCP) 서버에 연결하세요.
정확한 옵션, 메서드 또는 데이터 유형이 필요할 때 Line API 또는 Stock API를 여세요.
차트가 빈 화면이거나 느리거나 크기가 잘못되었거나 리소스를 해제하지 않을 때는 문제 해결부터 시작하세요.

프로젝트 계보

Sixtyfold Charts는 전작인 99ff00/react-charty]을 개발하며 얻은 교훈에서 발전했습니다. Sixtyfold은 이름만 바뀐 릴리스가 아니라 새로운 아키텍처이자 제품입니다.

연구적 기초

Sixtyfold의 렌더러와 LOD 시스템은 원본 TypeScript 구현입니다. 다음 출판물들이 설계에 영향을 주었으며, 링크는 코드 계보나 소속 또는 보증이 아니라 그 계보를 인정하기 위한 것입니다.

직접적인 영향

M4: 시각화 지향 시계열 데이터 집계 — Uwe Jugel, Zbigniew Jerzak, Gregor Hackenbroich, Volker Markl, PVLDB (2014). 디스플레이 축척 간격 내에서 사용되는 정렬된 첫/최소/최대/마지막 요약에 영향을 주었습니다.
OM3: 대화형 점진적 시계열 시각화를 위한 정렬된 다중 수준 최소-최대 표현 — Yunhai Wang 외, PACM (2023). 보이는 임의 범위 쿼리를 모든 원본 점을 재스캔하지 않고 답하기 위해 계층 사용에 영향을 주었습니다. Sixtyfold은 OM3의 데이터베이스 표현이나 점진적 프로토콜을 채택하지 않습니다.
선형 차트 시각화를 위한 데이터 포인트 선택: 방법론적 평가 및 근거 기반 지침 — Jonas Van Der Donckt, Jeroen Van Der Donckt, Michael Rademaker, Sofie Van Hoecke (2023). 패닝, 확대/축소, 스트리밍 중 시각적 안정성에 대한 평가는 Sixtyfold의 고정 앵커화된 양자화된 표현 그리드에 영향을 주었습니다.

검토한 대안

Downsampling Time Series for Visual Representation — Sveinn Steinarsson, University of Iceland (2013). 설계 과정에서 평가된 Largest-Triangle-Three-Buckets 계열을 소개합니다. Sixtyfold는 LTTB를 구현하지 않으며; 프로덕션 라인 LOD는 극값을 보존하는 계층적 구간 요약을 사용합니다.

이 인용문들은 연구적 영향만을 설명합니다. Sixtyfold는 재현하지 않습니다 논문 텍스트, 도표, 또는 참조 구현을. 출판물 및 코드 라이선스는 Sixtyfold 라이선스와 별도로 유지됩니다.