Pedir acceso

Para desarrolladores · powered by visx

Xarts SDK

Un spec, dos salidas. Las 354 piezas de la galería son componentes React construidos sobre visx. El motor compone un SVG para el documento; tu aplicación monta el componente cuando necesita interacción.

Entrega privada · ESM y TypeScript

El paquete, fuera del repositorio.

1.0.0
npm install ./visx-render-1.0.0.tgz react@18.3.1 react-dom@18.3.1

El fichero se entrega de forma privada; este comando no descarga Xarts de un registro público. Compatibilidad declarada: Node ^22.12.0 || ^24.0.0 y React >=18.3.1 <20. Integración comprobada con Node 22 y React 18, y con Node 24 y React 19, en Chromium, Firefox y WebKit.

Para TypeScript: npm install --save-dev typescript @types/react@18 @types/react-dom@18. Tu aplicación mantiene una sola versión de React y sus tipos.

Comprobaciones e identidad de esta entrega

SVG para un documento

import { getPreset, renderComposition } from 'visx-render/node';
import { writeFile } from 'node:fs/promises';

const spec = await getPreset('bar');
spec.document.header.title = 'A supera a B';
spec.document.header.subtitle = 'Comparación de dos categorías';
spec.document.footer = { source: 'Datos del proyecto' };
delete spec.orthogonal.referenceAxisGlyph; // Eje completo para estos valores.
spec.data.rows = [
  { Company: 'A', Value: 90, Budget: 85 },
  { Company: 'B', Value: 80, Budget: 85 },
];
spec.presentation.fonts = 'embed';
spec.output.filename = 'comparacion';

const { svg, warnings } = await renderComposition(spec);
await writeFile('comparacion.svg', svg);
console.log(warnings);

Ejecuta este ejemplo como fichero .mjs o dentro de un paquete con "type": "module". La API devuelve el SVG en memoria y sus avisos; tu aplicación decide dónde guardarlo. No necesita Vite ni un DOM para renderizar en Node.

React para un producto

import { useEffect, useState } from 'react';
import { getPreset } from 'visx-render/catalog';
import { Chart, prepareComposition, type PreparedCompositionResult } from 'visx-render/react';

export function Comparison() {
  const [result, setResult] = useState<PreparedCompositionResult | null>(null);
  const [error, setError] = useState<Error | null>(null);
  useEffect(() => {
    let active = true;
    getPreset('bar').then(prepareComposition)
      .then(value => { if (active) setResult(value); })
      .catch(error => { if (active) setError(error instanceof Error ? error : new Error(String(error))); });
    return () => { active = false; };
  }, []);
  if (error) return <p role="alert">{error.message}</p>;
  if (!result) return <p role="status">Cargando gráfico…</p>;
  return <Chart prepared={result.interactive} />;
}

El componente dibuja el gráfico. Ajusta presentation.dimensions antes de preparar la spec y sirve las fuentes de visx-render/fonts en /fonts; la interactividad disponible depende de la pieza.

También desde la terminal

npx visx-render spec.json --out ./output

Para varios estados, prepara y renderiza cada spec nativa desde tu aplicación. El paquete no incluye el servidor HTTP, el MCP ni los comandos de desarrollo del repositorio.

Geografía incluida

El territorio también se declara.

18 composiciones geográficas con datos explícitos. Las geometrías y medidas forman parte de la spec; se renderizan en tu entorno.

Una capacidad de cada pieza

Cada familia define su estructura de datos. Descarga la spec de la ficha para consultar sus coordenadas, regiones y medidas.

AI adoption is a two-speed map
Muestra mundial del catálogo · Abrir ficha
Ver mapas en el catálogo

Una tasa, no un total disfrazado

Ejemplo independiente de la muestra de la galería: tres porcentajes sintéticos de España. El sufijo etiqueta 12 como 12 %, sin convertirlo. Las demás regiones quedan sin dato.

import { getPreset, renderComposition } from 'visx-render/node';
import { writeFile } from 'node:fs/promises';

const spec = await getPreset('choropleth');
spec.document.header.title = 'Comparación territorial';
// data contiene las regiones y medidas del mapa.
// Sustituye sus geometrías y valores con el mismo contrato.
spec.presentation.fonts = 'embed';
const { svg } = await renderComposition(spec);
await writeFile('mapa.svg', svg);

En React, prepareComposition prepara los datos y la geometría antes de montar Chart. La misma spec sirve para producir el SVG del documento.

Entrega verificable

El paquete detrás de las muestras.

SDK nativo 1.0

Esta web está vinculada a una entrega concreta del SDK. Las comprobaciones siguientes corresponden a ese archivo, no solo al código de desarrollo.

Instalación independiente
El tarball se instala en un proyecto limpio, con dependencias de producción y sin aliases al repositorio.
Tipos públicos
Los ejemplos compilan con TypeScript estricto contra las declaraciones del paquete instalado.
Node y navegador
Se ejecutan el render SVG y los casos de integración React del consumidor de prueba.
Muestras del catálogo
Las 354 specs canónicas reproducen sus SVG publicados con este SDK, tanto en salida normal como de inspección.

Entorno comprobado: Node 22.22.1. Son casos de integración y reproducción de muestras, no una certificación de cualquier dato, tamaño de pantalla o interacción. Las capacidades declaradas de cada pieza se consultan en su ficha.

Versión e identidad de la entrega
Paquete
visx-render-1.0.0.tgz
SHA-256
886f4783748a8d755e2270d6235fcb2b0d42e80af5dbf34ce5e83ac9f9bf8c1a
Compatibilidad declarada
Node ^22.12.0 || ^24.0.0; React >=18.3.1 <20.

El checksum identifica el archivo; no es una firma digital. El paquete se entrega de forma privada. Este registro no incluye el motor ni publica el tarball.

Registro de la entrega · JSON

El contrato

La spec nativa: las claves del contrato

version · familyContrato versionado de la familia nativa; getPreset(id) devuelve una spec completa.
dataFilas, nodos, enlaces o geometrías explícitos según la familia.
encoding · calculationCorrespondencia de campos y reglas del cálculo cuando las declara la familia.
layout · marks · labelsDisposición, marcas y tipografía propias de cada contrato.
document.header · document.footerTítulo, contexto, fuente, notas y descripción alternativa.
presentationtheme, locale, dimensions y fonts: reference, embed u outline.
annotations · interactionAnotaciones e interacción admitidas por la familia elegida.
outputfilename, embedSpec y precisión de la geometría SVG.
provenanceIdentidad del preset de referencia; el render se selecciona por version.

Errores accionables: una columna que no existe, un id de pieza que no está en el catálogo o una regla de cálculo incompatible se rechazan con el motivo. La referencia completa va con la licencia.

Historias

Un exhibit, varios estados

La aplicación prepara varias specs y elige cuál mostrar. En esta muestra, cuatro SVG nativos comparten una escala explícita para conservar la referencia visual. El selector de estados pertenece a la web.

Puente de EBITDA de 2024 a 2025: se parte de 12,4 M$, el precio suma 3,1, el coste unitario resta 1,9 y el volumen suma 1,0 hasta cerrar en 14,6 M$.El punto de partida y la metaPuente EBITDA 2024 → 2025 (M$)Elaboración propia — datos ilustrativos (cierre de gestión 2025)Puente a perímetro constante. «Precio» recoge el efecto de la tarifa media sobre el margen; «Coste unitario», el coste directo por unidad vendida; «Volumen», las unidades adicionales valoradas a margen 2024. Datos ilustrativos. IncreaseDecreaseTotal12,4+3,1-1,9+114,6EBITDA 2024{"profile":{"view":"bridge","margin":{"top":64,"right":40,"bottom":96,"left":104},"domain":{"padding":0.08,"mode":"both","nice":true},"axis":{"measuredStepBudget":true,"additionalGap":4,"exportMeasurement":"glyph-advances","labelOverflow":0,"inkPadding":16,"marginMethod":"measured","frame":"rotated","categoryBudget":"auto","rotation":-35},"colors":{"positive":"emerald","negative":"red","total":"blue"},"connector":{"visible":true,"color":"border","width":1,"dash":"3,3"},"format":{"kind":"measured","threshold":1000,"largeSuffix":"K","largeDecimals":0,"largeTrim":true,"axisDecimals":0},"label":{"positiveOffset":8,"negativeOffset":18,"fontWeight":500,"secondaryOffsetPositive":-20,"secondaryOffsetNegative":20,"secondarySize":10,"secondaryDecimals":1,"secondaryParentheses":false,"secondaryColor":"textMuted","showClosingPercent":false,"zeroPercent":"hide"},"legend":{"kind":"svg","wrapper":"normal","height":36,"rightOffset":280,"y":-10,"itemStep":80,"fontSize":11,"swatchSize":10,"swatchRadius":2,"labelGap":4,"items":[{"key":"positive","label":"Increase","color":"emerald"},{"key":"negative","label":"Decrease","color":"red"},{"key":"total","label":"Total","color":"blue"}]}},"version":"xarts.waterfall/1","family":"waterfall","provenance":{"legacyId":"waterfall"},"data":{"unit":"M$","rows":[{"step":"EBITDA 2024","value":12.4,"kind":"opening"},{"step":"Precio","value":3.1,"kind":"delta"},{"step":"Coste unitario","value":-1.9,"kind":"delta"},{"step":"Volumen","value":1,"kind":"delta"},{"step":"EBITDA 2025","value":14.6,"kind":"total"}]},"encoding":{"step":"step","value":"value","kind":"kind"},"calculation":{"type":"bridge","totals":"verify-or-compute","stack":"diverging","tolerance":0},"layout":{"orientation":"vertical","bandPadding":0.25,"domain":[0,18]},"marks":{"colorBy":"sign","colorMap":{},"radius":0,"opacity":0.9},"labels":{"secondary":"none","visible":true,"segments":false,"decimals":0,"divisor":1,"prefix":"","suffix":"","fontSize":11},"axes":{"valueTitle":"","grid":true,"ticks":5},"groups":{"visible":false},"legend":{"visible":true},"summary":{"metric":"none","label":""},"annotations":[{"id":"focus-0","type":"highlight","step":"EBITDA 2024"},{"id":"focus-1","type":"highlight","step":"EBITDA 2025"}],"document":{"exportTextMeasurement":"glyph-advances","header":{"title":"El punto de partida y la meta","subtitle":"Puente EBITDA 2024 → 2025 (M$)"},"footer":{"source":"Elaboración propia — datos ilustrativos (cierre de gestión 2025)","notes":"Puente a perímetro constante. «Precio» recoge el efecto de la tarifa media sobre el margen; «Coste unitario», el coste directo por unidad vendida; «Volumen», las unidades adicionales valoradas a margen 2024. Datos ilustrativos.","alt":"Puente de EBITDA de 2024 a 2025: se parte de 12,4 M$, el precio suma 3,1, el coste unitario resta 1,9 y el volumen suma 1,0 hasta cerrar en 14,6 M$."},"spacing":{"horizontalPadding":32,"topPadding":24,"bottomPadding":24,"minimumTextGap":6}},"output":{"filename":"story-waterfall-puente-ebitda--01-el-hueco","embedSpec":true,"geometryDecimals":2},"presentation":{"theme":"anlak","dimensions":{"width":1200,"height":760},"locale":"es-ES","fonts":"reference","surface":"theme","framePadding":24}}PrecioCoste unitarioVolumenEBITDA 2025051015
Puente de EBITDA · cuatro estados exportados

Fuentes

reference declara las fuentes relativas y una pila de respaldo; embed las incrusta; outline traza el texto convertible y avisa sobre el que queda como texto. Incluye document.footer.alt con el significado del gráfico, especialmente al trazarlo.

Reproducibilidad

Conserva spec, versión, fuentes y entorno. El paquete identifica sus fuentes y dependencias; la galería comprueba cada pareja de spec y SVG. Un hash identifica los bytes de un artefacto, no garantiza por sí solo la igualdad entre entornos.

Badge

xarts · spec → svg · by anlak

un desarrollo de anlak · powered by visx

Licencia OEM: 1.500 € al año, hasta cinco desarrolladores

Entrega privada y un año de versiones; si no renuevas conservas la última versión recibida. El formato de entrega se concreta antes de contratar. La exportación a PowerPoint no entra: es un servicio del studio.

Pedir accesoVer la oferta