Para desarrolladores · powered by visx

xarts SDK 1.0.3

Una 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.3

npm install ./visx-render-1.0.3.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.

Temas y fuentes

Usa applyTheme para aplicar el tema completo a la spec. Elige entre anlak, economist, ocean, midnight, corporate, warm, pastel, vibrant, monochrome; puedes probarlos en el catálogo interactivo.

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

const spec = applyTheme(await getPreset('bar'), 'midnight');
spec.presentation.fonts = 'embed';
const { svg } = await renderComposition(spec);
await writeFile('tema.svg', svg);

En React, el modo reference usa archivos en /fonts/inter. En aplicaciones con una carpeta pública, ejecuta este fichero .mjs desde la raíz del proyecto y publica esa carpeta en la raíz de tu dominio. Conserva los avisos de licencia incluidos junto a las fuentes.

import { cp, mkdir } from 'node:fs/promises';

await mkdir('public/fonts', { recursive: true });
await cp('node_modules/visx-render/fonts/inter', 'public/fonts/inter', { recursive: true });

En Node, embed incluye las fuentes en el propio SVG. Usa reference para servirlas por separado o outline para convertir el texto compatible en trazados; revisa siempre los avisos del render.

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.

AI adoption is a two-speed map — Muestra mundial del catálogo · Abrir ficha

Ver mapas en el catálogo

Tu primer mapa en SVG

Este ejemplo carga el mapa mundial choropleth del catálogo, cambia su título e incrusta las fuentes. Conserva las geometrías y los valores de demostración para que puedas ejecutarlo tal cual.

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.

Explorar las 18 composiciones geográficas

arrowmapEl océano sube deprisa por el oeste y baja despacio por el este
bivariatechoroplethQuien más emite y quien más se expone no son el mismo mapa
cartogramUS Unemployment
choroplethAI adoption is a two-speed map
connectionmapLa red eléctrica europea no es una malla: seis de las quince interconexiones salen del mismo país
dotdensityEl norte alemán está hecho de viento y el sur, de sol
dotdistributionLa oferta hotelera española cabe en una franja costera y dos archipiélagos
flowmapEl contenedor no viaja en línea recta
geo-small-multiplesEl verano europeo no es un gradiente: es el Adriático
geodensityEl riesgo sísmico de Turquía no es una provincia: son dos líneas
globemapCatorce de las dieciocho mayores ciudades del mundo caben en una sola cara del planeta
isochroneEl círculo de 30 minutos promete dos veces y media el territorio al que llega la ambulancia
locator-mapLa planta nueva queda a 41 km del puerto de Valencia, dentro del corredor mediterráneo
piemapEl canal de venta no lo elige el hotel, lo elige el destino
spikemapEl comercio mundial no está repartido por las costas: cabe en un arco
swing-arrow-mapEl carbón se va de las redes maduras y se instala en un arco asiático
symbolmapGlobal City Populations
vectorfieldmapLa exposición al Atlántico manda más que la latitud

Cada familia define su estructura de datos. Abre una ficha y descarga su spec para consultar coordenadas, regiones y medidas.

Entrega verificable

El paquete detrás de las muestras.

SDK nativo 1.0
3 de noviembre de 2026

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.3.tgz
SHA-256: c860b64c3d6e7ae9f4b246f1402338103564c15806e5e97bc3d5c5dda51e664f
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 · family`	Contrato versionado de la familia nativa; getPreset(id) devuelve una spec completa.
`data`	Filas, nodos, enlaces o geometrías explícitos según la familia.
`encoding · calculation`	Correspondencia de campos y reglas del cálculo cuando las declara la familia.
`layout · marks · labels`	Disposición, marcas y tipografía propias de cada contrato.
`document.header · document.footer`	Título, contexto, fuente, notas y descripción alternativa.
`presentation`	theme, locale, dimensions y fonts: reference, embed u outline.
`annotations · interaction`	Anotaciones e interacción admitidas por la familia elegida.
`output`	filename, embedSpec y precisión de la geometría SVG.
`provenance`	Identidad 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 · 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

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. Recibes el paquete instalable, la documentación y sus hashes de verificación. La exportación a PowerPoint no entra: es un servicio del studio.

Pedir acceso Ver la oferta