semiotic

Semiotic은 AI 지원 개발을 위해 설계된 React 데이터 시각화 라이브러리입니다. 광범위한 차트 커버리지와 AI 도구를 결합하여 네트워크 그래프, 스트리밍 데이터, 조정된 뷰를 지원합니다. 이 라이브러리는 구조화된 스키마, 진단, 렌더링 증거를 제공하여 코딩 어시스턴트가 차트 코드를 구현, 검사, 수리할 수 있도록 돕습니다. 주요 기능은 다음과 같습니다: - **네트워크 시각화**: 힘 기반 그래프, Sankey 다이어그램, 코드 다이어그램, 트리 레이아웃, 트리맵, 원 패킹, 궤도 다이어그램을 일관된 prop API를 가진 React 컴포넌트로 제공합니다. - **스트리밍 데이터**: ref 기반 푸시 API를 통해 캔버스에서 60fps로 렌더링되는 실시간 차트로, 모니터링 대시보드를 위한 감쇠, 펄스, 지연 인코딩을 포함합니다. - **일급 주석**: 데이터에 바인딩된 주석 객체로 차트와 함께 이동하며 브라우저, SSR, 내보내기를 통해 렌더링됩니다. - **AI 도구**: 스키마 기반 차트 기능 카탈로그를 위한 `semiotic/ai`, 기계 판독 가능한 prop 스키마를 위한 `ai/schema.json`, MCP 서버 차트 렌더링을 위한 `npx semiotic-mcp`, CLI 검증을 위한 `npx semiotic-ai --doctor`를 포함합니다. - **진단**: 안티패턴 감지 및 숫자 사전 점검을 위한 `diagnoseConfig` 및 `auditData` 함수. - **접근성**: 내장 오류 경계, 개발 모드 검증, ARIA 레이블, 키보드 탐색 가능한 범례, 접근 가능한 데이터 테이블. - **모듈식 임포트**: `semiotic/xy`, `semiotic/geo`, `semiotic/value`, `semiotic/realtime` 같은 하위 경로로 번들 크기를 줄이고 트리 셰이킹을 지원합니다. - **서버 사이드 렌더링**: 정적 SVG 또는 이미지로 차트를 렌더링하는 `semiotic/server`. - **데이터 유틸리티**: 빈닝, 롤업, groupBy, 피벗, Vega-Lite 변환을 위한 `semiotic/data`. - **직렬화**: `toConfig`, `fromConfig`, `toURL`을 통해 차트를 JSON으로 직렬화/역직렬화하여 노트북 및 AI 생성 스펙과의 왕복을 가능하게 합니다. 이 라이브러리는 작은 유틸리티(0.2 KB)에서 전체 차트 API(374 KB)까지 다양한 임포트에 대한 번들 크기 테이블을 포함합니다. 또한 선택적 Matter.js 및 Rapier.js 어댑터를 사용한 물리 기반 차트(GaltonBoardChart)를 제공합니다. Semiotic은 표준 차트 라이브러리를 넘어 시계열, 스트리밍 데이터, 조정된 뷰와 함께 네트워크 그래프가 필요한 프로젝트에 적합합니다.