Sixtyfold Charts

Sixtyfold Charts es una biblioteca de gráficos TypeScript y Canvas2D para conjuntos de datos demasiado grandes para el renderizado ordinario en DOM o SVG. Los gráficos en navegador usan un Web Worker cuando está disponible para que la preparación y el renderizado no afecten al hilo de interfaz; el mismo renderizador recurre al main thread cuando es necesario.

Use @sixtyfold/line para líneas multifserie, pasos, rangos, puntos, barras y áreas apiladas. Use @sixtyfold/stock para velas OHLCV, volumen, indicadores, perfiles de volumen, líneas de precio y marcadores de eventos.

El runtime de gráficos en navegador no tiene dependencias de terceros: Core, Line y Stock dependen solo de paquetes de Sixtyfold. Los adaptadores de framework reutilizan el framework ya presente en la aplicación anfitriona, mientras que la herramienta de desarrollo MCP opcional se ejecuta por separado y nunca entra en los bundles de los gráficos.

Empieza aquí

1. Instala solo los paquetes que necesites.
2. Construye un gráfico de líneas o un gráfico bursátil.
3. Elige vanilla TypeScript o un adaptador de framework.
4. Lee el contrato de propiedad de typed-array antes de cargar datos de producción.

Cada integración en navegador tiene el mismo ciclo de vida:

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

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

Level of detail (LOD)

LOD significa level of detail. Es la representación automática en pantalla de un conjunto de datos mayor: los gráficos de líneas conservan los extremos y las discontinuidades importantes, mientras que los gráficos de bolsa combinan velas en periodos OHLCV válidos. Aparece más detalle a medida que haces zoom.

El mismo principio es familiar en los juegos 3D: los objetos lejanos usan modelos más simples porque la pantalla no puede mostrar cada polígono, y ganan detalle cuando la cámara se acerca. En un gráfico, el rango visible reemplaza la distancia de la cámara: una vista general dibuja un resumen acotado en vez de millones de muestras indistinguibles y luego restaura datos más finos al acercar. Los valores predeterminados sirven para la mayoría de aplicaciones.

Ir más lejos

• Usa la guía de rendimiento y la calibración en vivo del nivel de detalle antes de cambiar ajustes de presentación.
• Elige entre renderizado en worker y en el hilo principal, o produce una salida estática con renderizado del lado del servidor.
• Conecta el servidor local Model Context Protocol (MCP) cuando un agente de codificación necesite la API exacta instalada.
• Abre la API de Line o la API de Stock cuando necesites una opción, método o tipo de dato exacto.
• Empieza con resolución de problemas cuando un gráfico esté en blanco, lento, con tamaño incorrecto o reteniendo recursos.

Línea de proyecto

Sixtyfold Charts creció a partir de lecciones aprendidas al construir 99ff00/react-charty, su predecesor. Sixtyfold es una arquitectura y producto nuevos en lugar de una versión renombrada.

Fundamentos de investigación

El renderizador y el sistema LOD de Sixtyfold son implementaciones originales TypeScript. Las siguientes publicaciones informaron el diseño; los enlaces reconocen esa filiación, no una ascendencia de código, afiliación o respaldo.

Influencias directas

• M4: A Visualization-Oriented Time Series Data Aggregation — Uwe Jugel, Zbigniew Jerzak, Gregor Hackenbroich y Volker Markl, PVLDB (2014). Informó el resumen ordenado first/minimum/maximum/last usado dentro de intervalos a escala de visualización.
• OM3: An Ordered Multi-level Min-Max Representation for Interactive Progressive Visualization of Time Series — Yunhai Wang et al., PACM (2023). Informó el uso de una jerarquía para responder consultas de rango visible arbitrario sin volver a escanear cada punto fuente visible. Sixtyfold no adopta la representación de base de datos ni el protocolo progresivo de OM3.
• Data Point Selection for Line Chart Visualization: Methodological Assessment and Evidence-Based Guidelines — Jonas Van Der Donckt, Jeroen Van Der Donckt, Michael Rademaker y Sofie Van Hoecke (2023). Su evaluación de la estabilidad visual durante paneo, zoom y streaming informó la cuadrícula de presentación cuantizada y anclada de Sixtyfold.

Alternativa evaluada

• Downsampling Time Series for Visual Representation — Sveinn Steinarsson, University of Iceland (2013). Introdujo la familia Largest-Triangle-Three-Buckets evaluada durante el diseño. Sixtyfold no implementa LTTB; su LOD de línea en producción utiliza resúmenes jerárquicos de intervalo que preservan extremos.

Estas citas describen solo influencias de investigación. Sixtyfold no reproduce texto de artículos, figuras ni implementaciones de referencia. Publicación y código licencias siguen siendo independientes de la licencia de Sixtyfold.