직접 실행하는 예제

실제 TypePlot 그래프, 해당 코드, 현재 구현 범위를 확인합니다.

선, 산점도, 막대, 히스토그램

아래 그래프는 브라우저에서 빌드된 TypePlot 데이터 API를 실행합니다. 값은 일정한 수식으로 만든 예제이며 실험 측정값이 아닙니다. 직접 실행 페이지에서 매개변수 조절, 이동, 확대와 PNG 저장을 할 수 있습니다.

여러 서브플롯 구성

각 Axes는 범위와 상호작용을 독립적으로 관리합니다. 배열은 행 우선 순서입니다. 2 × 2 구성에서 0번은 왼쪽 위, 3번은 오른쪽 아래입니다.

여러 서브플롯 구성example.ts
const { fig, axes } = subplots(2, 2, { width: 1000, height: 720 });
axes[0].plot([3, 1, 4]);
axes[1].scatter([1, 2, 3], [2, 5, 4]);
axes[2].bar([1, 2, 3], [4, 7, 2]);
axes[3].histogram([1, 2, 2, 3, 3, 3], { bins: 3 });

저장소 예제 실행

Vite 예제는 실제 ?plot 셰이더 가져오기와 데이터 차트를 함께 사용합니다. 독립 실행 예제에는 생성된 스칼라·나선 프로그램이 들어 있습니다. ?backend=webgl2로 대체 백엔드를 명시할 수 있습니다.

저장소 예제 실행Terminal
git clone https://github.com/typeshade/typeplot.git
cd typeplot
git checkout 34812c52ed860cc540f428e01399e19913cef1f8
npm ci
npm run build
npm run dev

현재 지원 범위

데이터 Figure와 함수 그래프 모두 TypeShade로 생성한 WebGPU 또는 WebGL2 셰이더로 그립니다. 이 사이트는 하드웨어 성능을 주장하거나 브라우저 출력을 GPU 벤치마크로 제시하지 않습니다. 암시적 곡면, 메시, 날짜·범주형 축, 전체 matplotlib 호환은 구현하지 않았습니다.

이 문서의 근거실제 런타임과 선언 파일에서 확인한 기능을 설명합니다. 34812c52ed86 ↗