Versión: 0.0.3-alpha

Gráficos

Compila y renderiza visualizaciones interactivas de Vega-Lite en la consola, combinando constructores de alto nivel para una rápida exploración de datos con definiciones de gráficos declarativas personalizadas.

El servicio Graph conecta Expression Lab con el runtime de Vega-Lite en el lado del cliente. Transforma payloads JSON y arrays estructurados del lenguaje en gráficos reactivos, ofreciendo tanto constructores listos para usar para visualizaciones comunes como acceso directo al compilador nativo de Vega-Lite.

Acceso al compilador de Vega-Lite: Compila especificaciones declarativas personalizadas mediante Graph.render().
Constructores de gráficos listos para usar: Genera visualizaciones completas en una sola llamada, incluyendo gráficos de barras, líneas, áreas, dispersión, mapas de calor, histogramas y cronogramas.
Mapeo geográfico sin conexión: Genera mapas coropléticos utilizando datasets TopoJSON integrados del mundo y de Estados Unidos sin peticiones de red externas ni problemas de CSP, con resolución integrada para códigos ISO de país y abreviaturas de estados de EE. UU.
Ajuste responsivo al contenedor: Escala las dimensiones del gráfico para adaptarse al panel de la consola (width: "container").

Cómo funcionan los gráficos

Cada método de Graph incluye validación, valores por defecto bien calibrados y renderizado gestionado:

Entradas flexibles: Admite objetos literales, arrays asociativos o cadenas JSON sin procesar.
Valores por defecto integrados: Inyecta el $schema de Vega-Lite y el ancho responsivo (width: "container") si se omiten.
Límites de ejecución: Cada gráfico generado cuenta para los límites de ejecución y tiempos de espera (timeouts) de la expresión.
Ejecución interactiva y por lotes (batch): Renderiza visualizaciones en vivo en la consola interactiva, o las acumula durante rutinas por lotes hasta que se muestran mediante show[...].

Visualizaciones en scripts

Es posible generar gráficos junto a consultas de base de datos o rutinas de procesamiento de datos dentro de bloques prog[...]:

prog[
  set['details', Database.table_details('posts')],
  show[
      Graph.bars(var['details']['indexes'], {
        x: 'Key_name',
        y: 'Cardinality',
        horizontal: true,
        title: 'Posts Table Index Cardinality',
        color_value: Graph.COLOR_BLUE
      })
  ]
]

Constantes y tokens visuales

La clase Graph proporciona constantes visuales para colores, paletas y capas geográficas TopoJSON. Al acceder a ellas mediante la sintaxis de scripting, las constantes de clase se resuelven como propiedades de la instancia del objeto Graph (como Graph.COLOR_BLUE o Graph.SCHEME_VIRIDIS).

Esquema y dimensiones del contenedor

Constante	Valor	Descripción
`DEFAULT_SCHEMA`	`'https://vega.github.io/schema/vega-lite/v6.json'`	Definición de esquema por defecto inyectada cuando se omite `$schema`.
`DEFAULT_WIDTH`	`'container'`	Indica al contenedor de la visualización que se expanda a lo largo del ancho disponible del viewport.

Recursos geográficos TopoJSON

Constante	Valor	Descripción
`COUNTRIES`	`'countries-110m.json'`	Dataset TopoJSON integrado de países del mundo (resolución 1:110m).
`LAND`	`'land-110m.json'`	Dataset TopoJSON integrado para los límites de masas continentales (resolución 1:110m).
`USA_STATES`	`'states-10m.json'`	Dataset TopoJSON integrado para entidades de Estados Unidos (resolución 1:10m).

Paleta de colores

Constante	Valor hexadecimal	Uso semántico
`COLOR_BLUE`	`'#3858e9'`	Acento primario para marcas por defecto en visualizaciones de una sola serie.
`COLOR_RED`	`'#e53935'`	Umbrales de error, límites de advertencia e indicadores críticos.
`COLOR_GREEN`	`'#43a047'`	Métricas positivas, estados de éxito e indicadores de crecimiento.
`COLOR_PURPLE`	`'#8e24aa'`	Acentos categóricos y distribuciones secundarias.
`COLOR_ORANGE`	`'#fb8c00'`	Umbrales de advertencia moderada y resaltado de avisos.
`COLOR_CYAN`	`'#00acc1'`	Series continuas neutrales y métricas de red.
`COLOR_GRAY`	`'#78909c'`	Líneas base de referencia, marcadores de fondo y pistas inactivas.
`COLOR_DARK`	`'#263238'`	Marcadores de alto contraste y trazos de contorno oscuros.

Esquemas continuos y categóricos

Constante	Identificador	Tipo de color	Descripción
`SCHEME_BLUES`	`'blues'`	Secuencial	Gradiente de un solo tono que varía de azul claro a azul oscuro.
`SCHEME_REDS`	`'reds'`	Secuencial	Gradiente de un solo tono que varía de rojo claro a rojo intenso.
`SCHEME_GREENS`	`'greens'`	Secuencial	Gradiente de un solo tono que varía de verde claro a verde bosque.
`SCHEME_PURPLES`	`'purples'`	Secuencial	Gradiente de un solo tono que varía de lavanda a morado intenso.
`SCHEME_ORANGES`	`'oranges'`	Secuencial	Gradiente de un solo tono que varía de melocotón a naranja oscuro.
`SCHEME_VIRIDIS`	`'viridis'`	Perceptual	Gradiente uniforme de múltiples tonos (morado a verde azulado y amarillo).
`SCHEME_INFERNO`	`'inferno'`	Perceptual	Gradiente térmico de alto contraste (negro a rojo y amarillo).
`SCHEME_MAGMA`	`'magma'`	Perceptual	Gradiente térmico de múltiples tonos (violeta oscuro a rosa y blanco).
`SCHEME_CATEGORY10`	`'category10'`	Discreto	Diez tonos categóricos distintivos para dimensiones nominales.
`SCHEME_TABLEAU10`	`'tableau10'`	Discreto	Diez tonos equilibrados para líneas multiserie, sectores y grupos.

Puente de especificación de bajo nivel

Graph.render()

Renderiza un payload con una especificación arbitraria de Vega-Lite v6 directamente en el panel de visualización de la consola.

Graph.render(
  array|object|string:payload,
  string:title = 'Graph'
): void

Parámetros

payload (array|object|string, requerido): Un array asociativo, objeto literal o cadena JSON válida que contiene la especificación completa de Vega-Lite.
title (string, opcional): Etiqueta de cabecera para la pestaña de salida. Por defecto es 'Graph'. Si se omite, prevalece el título declarado dentro de la especificación (payload.title o payload.description).

Normalización y comportamiento de errores

Entrada en cadena (string): Se procesa mediante parsing con json_decode(). Lanza \InvalidArgumentException si la cadena está vacía o contiene una sintaxis JSON malformada.
Entrada en objeto: Se convierte recursivamente en un array asociativo para aislar el motor de referencias inesperadas del host.
Entrada en array: Se valida para garantizar que el payload raíz sea un mapa asociativo y no una lista secuencial indexada.
Inyección por defecto: Si se omiten, $schema recibe DEFAULT_SCHEMA y width recibe DEFAULT_WIDTH.

Ejemplo

Graph.render({
  '$schema': 'https://vega.github.io/schema/vega-lite/v6.json',
  title: 'Almacenamiento por tipo de recurso',
  data: {
    values: [
      { asset: 'Imágenes', megabytes: 340 },
      { asset: 'Vídeos', megabytes: 820 },
      { asset: 'Documentos', megabytes: 110 }
    ]
  },
  mark: { type: 'bar', color: Graph.COLOR_BLUE },
  encoding: {
    x: { field: 'asset', type: 'nominal', axis: { title: 'Categoría de recurso' } },
    y: { field: 'megabytes', type: 'quantitative', axis: { title: 'Tamaño (MB)' } }
  }
}, 'Desglose de almacenamiento')

Constructores de gráficos de alto nivel

Graph.bars()

Compila y renderiza un gráfico de barras a partir de colecciones tabulares o diccionarios asociativos clave-valor.

Graph.bars(
  mixed:data,
  array:options = []
): void

Parámetros

data (mixed, requerido): Array de registros asociativos (como [{ role: 'Editor', count: 12 }]) o un diccionario clave-valor (como { Borrador: 14, Publicado: 89 }).
options (array, opcional): Ajustes de configuración.

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'Bar Chart'`	Título de la visualización y etiqueta de la pestaña.
`x`	`string`	Autodetectado	Campo asignado a las coordenadas horizontales.
`y`	`string`	Autodetectado	Campo asignado a las coordenadas verticales.
`color`	`string`	`null`	Campo del registro utilizado para particionar colores por categoría.
`color_value`	`string`	`Graph.COLOR_BLUE`	Color hexadecimal fijo aplicado a todas las barras cuando se omite `color`.
`horizontal`	`bool`	`false`	Cuando es `true`, invierte los ejes para renderizar barras horizontales.
`sort`	`string\|array`	`null`	Definición de orden personalizado para la dimensión categórica.
`label_angle`	`int`	`-45`	Ángulo de rotación en grados para las etiquetas del eje.
`height`	`int`	`360`	Altura en píxeles del área de visualización.

Ejemplos

Desglose vertical por categorías

Graph.bars([
  { role: 'Administrador', users: 4 },
  { role: 'Editor', users: 12 },
  { role: 'Autor', users: 28 },
  { role: 'Colaborador', users: 45 },
  { role: 'Suscriptor', users: 190 }
], {
  title: 'Usuarios activos por rol',
  color_value: Graph.COLOR_PURPLE
})

Disposición horizontal desde un mapa clave-valor

Graph.bars({
  'Borrador': 14,
  'Pendiente': 6,
  'Privado': 3,
  'Publicado': 89
}, {
  title: 'Inventario de entradas por estado',
  horizontal: true,
  color_value: Graph.COLOR_BLUE
})

Graph.lines()

Renderiza líneas continuas de tendencia y comparaciones temporales multiserie.

Graph.lines(
  mixed:data,
  array:options = []
): void

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'Line Chart'`	Título de la visualización.
`x`	`string`	Autodetectado	Campo asignado a las coordenadas horizontales.
`y`	`string`	Autodetectado	Campo asignado a las coordenadas verticales.
`color`	`string`	`null`	Campo utilizado para la agrupación por color multiserie.
`color_value`	`string`	`Graph.COLOR_BLUE`	Color hexadecimal fijo para series individuales.
`points`	`bool`	`true`	Renderiza marcadores circulares discretos en los vértices a lo largo de las líneas.
`sort`	`string\|array`	`null`	Especificación de ordenación para el eje de coordenadas horizontales.
`label_angle`	`int`	`-45`	Ángulo de rotación en grados para las etiquetas del eje.
`height`	`int`	`360`	Altura en píxeles del área de visualización.

Ejemplo

Graph.lines([
  { month: '2026-01', volume: 1420 },
  { month: '2026-02', volume: 1890 },
  { month: '2026-03', volume: 2400 },
  { month: '2026-04', volume: 2180 },
  { month: '2026-05', volume: 3050 },
  { month: '2026-06', volume: 3820 }
], {
  title: 'Rendimiento mensual de la red',
  color_value: Graph.COLOR_GREEN
})

Graph.pie()

Renderiza sectores de arco proporcionales para análisis de composición, con opción de orificio central para gráficos de dona.

Graph.pie(
  mixed:data,
  array:options = []
): void

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'Pie Chart'` / `'Donut Chart'`	Título de la visualización.
`category`	`string`	Autodetectado	Campo que contiene las etiquetas categóricas de los sectores.
`value`	`string`	Autodetectado	Campo que contiene las magnitudes numéricas de los sectores.
`donut`	`bool`	`false`	Renderiza un orificio central para gráficos de dona cuando es `true`.
`inner_radius`	`int`	`65`	Radio en píxeles del orificio central cuando `donut` está activo.
`scheme`	`string`	`Graph.SCHEME_TABLEAU10`	Paleta de colores de Vega-Lite para los sectores categóricos.
`height`	`int`	`360`	Altura en píxeles del área de visualización.

Ejemplo

Graph.pie([
  { device: 'Móvil', share: 58 },
  { device: 'Escritorio', share: 34 },
  { device: 'Tablet', share: 8 }
], {
  title: 'Distribución de tráfico por tipo de dispositivo',
  donut: true,
  inner_radius: 75
})

Graph.worldmap()

Renderiza un mapa coroplético mundial de dos capas sin conexión proyectado sobre una proyección Equal Earth.

Graph.worldmap(
  mixed:data,
  array:options = []
): void

Resolución automática de códigos de país

El método normaliza identificadores de países a identificadores numéricos de geometría TopoJSON estándar (id):

ISO 3166-1 Alfa-2: 'US', 'ES', 'DE', 'FR', 'JP'. La salida de IPLookup.to_country() enlaza directamente con este método.
ISO 3166-1 Alfa-3: 'USA', 'ESP', 'DEU', 'FRA', 'JPN'.
Nombres estándar de países: 'United States', 'Germany', 'Spain'.
Identificadores numéricos TopoJSON: '840', '724', '276'.

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'World Map'`	Título de la visualización.
`key`	`string`	Autodetectado	Campo que contiene los códigos o nombres de país.
`value`	`string`	Autodetectado	Campo que contiene los valores cuantitativos de calor.
`label`	`string`	`null`	Campo de metadatos opcional incluido en los tooltips al pasar el cursor.
`scheme`	`string`	`Graph.SCHEME_BLUES`	Esquema de color de gradiente secuencial.
`projection`	`string`	`'equalEarth'`	Algoritmo de proyección cartográfica.
`legend_title`	`string`	Nombre del campo	Título personalizado para la leyenda de la escala de color continua.
`height`	`int`	`480`	Altura en píxeles del viewport del mapa.

Ejemplo

Graph.worldmap({
  'US': 1940,
  'ES': 820,
  'DE': 1150,
  'BR': 670,
  'JP': 930,
  'AU': 450,
  'CA': 610,
  'FR': 780
}, {
  title: 'Ingesta global de peticiones por origen',
  scheme: Graph.SCHEME_BLUES
})

Graph.usa()

Renderiza un mapa coroplético de dos capas sin conexión de los Estados Unidos utilizando una proyección Albers USA.

Graph.usa(
  mixed:data,
  array:options = []
): void

Resolución de códigos de estado

Normaliza referencias de estados a cadenas FIPS numéricas de 2 dígitos:

Códigos postales: 'CA', 'TX', 'NY', 'FL', 'WA'.
Nombres de estados: 'California', 'Texas', 'New York'.
Identificadores FIPS: '06', '48', '36', 6, 48.

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'US State Map'`	Título de la visualización.
`key`	`string`	Autodetectado	Campo que contiene códigos postales, nombres o identificadores FIPS de estados.
`value`	`string`	Autodetectado	Campo que contiene los valores métricos.
`label`	`string`	`null`	Dimensión adicional opcional mostrada en los tooltips.
`scheme`	`string`	`Graph.SCHEME_BLUES`	Esquema de color secuencial.
`projection`	`string`	`'albersUsa'`	Algoritmo de proyección cartográfica.
`legend_title`	`string`	Nombre del campo	Título personalizado de la leyenda.
`height`	`int`	`450`	Altura en píxeles del viewport.

Ejemplo

Graph.usa({
  'CA': 1420,
  'TX': 980,
  'NY': 1150,
  'FL': 870,
  'IL': 520,
  'WA': 610,
  'CO': 430,
  'MA': 560
}, {
  title: 'Densidad de tráfico en Estados Unidos',
  scheme: Graph.SCHEME_PURPLES
})

Graph.boxplot()

Renderiza gráficos de distribución boxplot mostrando medianas, rangos intercuartílicos (Q1–Q3) y límites mín-máx a través de dimensiones categóricas.

Graph.boxplot(
  mixed:data,
  array:options = []
): void

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'Boxplot'`	Título de la visualización.
`x`	`string`	Autodetectado	Dimensión categórica asignada al eje horizontal.
`y`	`string`	Autodetectado	Métrica cuantitativa asignada al eje vertical.
`color`	`string`	`null`	Dimensión utilizada para codificar colores por subgrupo.
`color_value`	`string`	`Graph.COLOR_BLUE`	Color de relleno para cajas en series individuales.
`label_angle`	`int`	`-45`	Ángulo de rotación en grados para las etiquetas del eje.
`height`	`int`	`360`	Altura en píxeles del área de visualización.

Ejemplo

Graph.boxplot([
  { endpoint: '/api/posts', latency_ms: 42 },
  { endpoint: '/api/posts', latency_ms: 58 },
  { endpoint: '/api/posts', latency_ms: 120 },
  { endpoint: '/api/posts', latency_ms: 68 },
  { endpoint: '/api/posts', latency_ms: 95 },
  { endpoint: '/api/users', latency_ms: 85 },
  { endpoint: '/api/users', latency_ms: 92 },
  { endpoint: '/api/users', latency_ms: 240 },
  { endpoint: '/api/users', latency_ms: 110 },
  { endpoint: '/api/users', latency_ms: 135 }
], {
  title: 'Distribución de latencias por endpoint',
  color_value: Graph.COLOR_BLUE
})

Graph.scatter()

Renderiza gráficos de dispersión y de burbujas para el análisis de correlación multidimensional entre variables cuantitativas.

Graph.scatter(
  mixed:data,
  array:options = []
): void

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'Scatter Plot'`	Título de la visualización.
`x`	`string`	Autodetectado	Campo cuantitativo para coordenadas horizontales.
`y`	`string`	Autodetectado	Campo cuantitativo para coordenadas verticales.
`color`	`string`	`null`	Campo para agrupación de color discreta o código de color hexadecimal fijo.
`size`	`string\|int\|float`	`null`	Campo mapeado al área del punto o tamaño fijo del marcador en píxeles cuadrados.
`opacity`	`float`	`0.7`	Opacidad de relleno del marcador entre `0.0` y `1.0`.
`zero`	`bool`	`false`	Cuando es `false`, escala los ejes a la extensión de los datos en lugar de forzar una línea base en cero.
`label_angle`	`int`	`-45`	Ángulo de rotación en grados para las etiquetas del eje.
`height`	`int`	`360`	Altura en píxeles del área de visualización.

Ejemplo

Graph.scatter([
  { queries: 6,   duration_ms: 18,  rows: 85,    status: 'ok' },
  { queries: 12,  duration_ms: 28,  rows: 240,   status: 'ok' },
  { queries: 16,  duration_ms: 35,  rows: 410,   status: 'ok' },
  { queries: 22,  duration_ms: 52,  rows: 620,   status: 'ok' },
  { queries: 32,  duration_ms: 70,  rows: 880,   status: 'ok' },
  { queries: 45,  duration_ms: 135, rows: 2800,  status: 'warning' },
  { queries: 58,  duration_ms: 145, rows: 3100,  status: 'warning' },
  { queries: 72,  duration_ms: 230, rows: 6800,  status: 'warning' },
  { queries: 90,  duration_ms: 360, rows: 12500, status: 'critical' },
  { queries: 116, duration_ms: 560, rows: 31000, status: 'critical' }
], {
  title: 'Consultas de base de datos frente a duración de ejecución',
  x: 'queries',
  y: 'duration_ms',
  color: 'status',
  size: 'rows',
  opacity: 0.75,
  zero: false
})

Graph.heatmap()

Renderiza un mapa de calor en cuadrícula bidimensional mapeando coordenadas categóricas u ordinales a valores de intensidad de color.

Graph.heatmap(
  mixed:data,
  array:options = []
): void

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'Heatmap'`	Título de la visualización.
`x`	`string`	Autodetectado	Campo asignado a las celdas de columnas horizontales.
`y`	`string`	Autodetectado	Campo asignado a las celdas de filas verticales.
`value`	`string`	Autodetectado	Métrica asignada a la intensidad del color de la celda.
`scheme`	`string`	`Graph.SCHEME_BLUES`	Paleta de colores secuencial para el mapa de calor.
`stroke`	`string`	`'#ffffff'`	Color de la línea de separación de la cuadrícula.
`legend_title`	`string`	Nombre del campo	Título personalizado de la leyenda.
`label_angle`	`int`	`-45`	Ángulo de rotación en grados para las etiquetas del eje.
`height`	`int`	`360`	Altura en píxeles del área de visualización.

Ejemplo

Graph.heatmap([
    { 'day': 'Lun', 'hour': 9,  'events': 50 },
    { 'day': 'Lun', 'hour': 10, 'events': 320 },
    { 'day': 'Lun', 'hour': 11, 'events': 25 },
    { 'day': 'Lun', 'hour': 12, 'events': 250 },
    { 'day': 'Lun', 'hour': 13, 'events': 195 },
    { 'day': 'Lun', 'hour': 14, 'events': 331 },
    { 'day': 'Lun', 'hour': 15, 'events': 80 },
    { 'day': 'Mar', 'hour': 9,  'events': 190 },
    { 'day': 'Mar', 'hour': 10, 'events': 78 },
    { 'day': 'Mar', 'hour': 11, 'events': 22 },
    { 'day': 'Mar', 'hour': 12, 'events': 25 },
    { 'day': 'Mar', 'hour': 13, 'events': 250 },
    { 'day': 'Mar', 'hour': 14, 'events': 410 },
    { 'day': 'Mar', 'hour': 15, 'events': 295 },
    { 'day': 'Mié', 'hour': 9,  'events': 190 },
    { 'day': 'Mié', 'hour': 10, 'events': 46 },
    { 'day': 'Mié', 'hour': 11, 'events': 101 },
    { 'day': 'Mié', 'hour': 12, 'events': 610 },
    { 'day': 'Mié', 'hour': 13, 'events': 710 },
    { 'day': 'Mié', 'hour': 14, 'events': 155 },
    { 'day': 'Mié', 'hour': 15, 'events': 25 }
], {
    'title': 'Eventos del sistema por día y hora',
    'x': 'hour',
    'y': 'day',
    'value': 'events',
    'height': 180,
    'scheme': Graph.SCHEME_PURPLES
})

Graph.histogram()

Particiona mediciones cuantitativas continuas en intervalos (bins) discretos y calcula recuentos de distribución.

Graph.histogram(
  mixed:data,
  array:options = []
): void

Modos de entrada

Array escalar numérico: Lista de números enteros o de coma flotante directos (como tiempos de ejecución o latencias de consultas).
Registros tabulares: Objetos que contienen una columna numérica objetivo como métrica.

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'Histogram'`	Título de la visualización.
`field`	`string`	Autodetectado	Campo numérico para particionar en intervalos (bins).
`bins`	`int`	`20`	Cantidad máxima objetivo de intervalos (bins).
`maxbins`	`int`	`null`	Límite superior para el recuento de intervalos (bins) generados.
`step`	`float`	`null`	Ancho de intervalo fijo para los pasos de los intervalos (bins).
`color`	`string`	`Graph.COLOR_BLUE`	Partición de color categórica o código de color fijo.
`label_angle`	`int`	`-45`	Ángulo de rotación en grados para las etiquetas del eje.
`height`	`int`	`360`	Altura en píxeles del área de visualización.

Ejemplo

Graph.histogram([
  12.4, 15.1, 18.3, 19.0, 21.2, 22.8, 23.1, 28.5, 34.2, 45.0,
  18.1, 21.9, 23.4, 25.0, 27.2, 31.8, 35.1, 38.5, 42.2, 49.0
], {
  title: 'Distribución de duración de consultas (ms)',
  bins: 8,
  color: Graph.COLOR_CYAN
})

Graph.area()

Renderiza gráficos de áreas rellenas para el seguimiento de volumen acumulado, métricas de infraestructura apiladas multiserie, streamgraphs y proporciones normalizadas al 100%.

Graph.area(
  mixed:data,
  array:options = []
): void

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'Area Chart'`	Título de la visualización.
`x`	`string`	Autodetectado	Campo asignado a las coordenadas horizontales.
`y`	`string`	Autodetectado	Campo asignado a las coordenadas verticales.
`color`	`string`	`null`	Campo utilizado para la agrupación por color multiserie.
`color_value`	`string`	`Graph.COLOR_BLUE`	Color hexadecimal fijo para series individuales.
`stream`	`bool`	`false`	Centra el apilado vertical en torno a la línea base media para formar un streamgraph.
`normalize`	`bool`	`false`	Escala el apilado a proporciones relativas al 100%.
`curve`	`string`	`'monotone'`	Modo de interpolación de ruta (`'monotone'`, `'basis'`, `'linear'`).
`opacity`	`float`	`0.6`	Opacidad de relleno entre `0.0` y `1.0`.
`label_angle`	`int`	`-45`	Ángulo de rotación en grados para las etiquetas del eje.
`height`	`int`	`360`	Altura en píxeles del área de visualización.

Ejemplo

Graph.area([
  { date: '2026-09-01', traffic_gb: 320, tier: 'Caché CDN' },
  { date: '2026-09-01', traffic_gb: 180, tier: 'Servidor de aplicaciones' },
  { date: '2026-09-02', traffic_gb: 410, tier: 'Caché CDN' },
  { date: '2026-09-02', traffic_gb: 240, tier: 'Servidor de aplicaciones' },
  { date: '2026-09-03', traffic_gb: 490, tier: 'Caché CDN' },
  { date: '2026-09-03', traffic_gb: 290, tier: 'Servidor de aplicaciones' },
  { date: '2026-09-04', traffic_gb: 380, tier: 'Caché CDN' },
  { date: '2026-09-04', traffic_gb: 220, tier: 'Servidor de aplicaciones' }
], {
  title: 'Volumen de salida de red por capa',
  x: 'date',
  y: 'traffic_gb',
  color: 'tier'
})

Graph.timeline()

Renderiza barras de intervalo horizontales de línea de tiempo estilo Gantt para perfiles de ejecución, rastreo de peticiones y eventos programados.

Graph.timeline(
  mixed:data,
  array:options = []
): void

Diccionario de opciones

Clave	Tipo	Por defecto	Descripción
`title`	`string`	`'Timeline'`	Título de la visualización.
`task`	`string`	Autodetectado	Campo que contiene el nombre de la tarea o identificador de carril (eje vertical).
`start`	`string`	Autodetectado	Campo que contiene la marca de tiempo de inicio o el desplazamiento numérico en milisegundos.
`end`	`string`	Autodetectado	Campo que contiene la marca de tiempo de finalización o el desplazamiento de término.
`color`	`string`	`Graph.COLOR_BLUE`	Campo para codificación de color por categoría, o código de color fijo.
`label_angle`	`int`	`-45`	Ángulo de rotación en grados para las etiquetas del eje.
`height`	`int`	Autocalculado	Altura en píxeles del área de visualización.

Ejemplo

Graph.timeline([
  { task: 'Autenticación y sesión', start: 0,   end: 35 },
  { task: 'Pipeline de consultas a la base de datos',  start: 25,  end: 95 },
  { task: 'Búsqueda en caché de objetos',      start: 40,  end: 75 },
  { task: 'Renderizado de plantilla',       start: 90,  end: 180 },
  { task: 'Vaciado del buffer de salida',      start: 175, end: 210 }
], {
  title: 'Desglose de ejecución del ciclo de vida de la petición',
  color: Graph.COLOR_BLUE
})

Cómo funcionan los gráficos​

Visualizaciones en scripts​

Constantes y tokens visuales​

Esquema y dimensiones del contenedor​

Recursos geográficos TopoJSON​

Paleta de colores​

Esquemas continuos y categóricos​

Puente de especificación de bajo nivel​

Graph.render()​

Parámetros​

Normalización y comportamiento de errores​

Ejemplo​

Constructores de gráficos de alto nivel​

Graph.bars()​

Parámetros​

Diccionario de opciones​

Ejemplos​

Desglose vertical por categorías​

Disposición horizontal desde un mapa clave-valor​

Graph.lines()​

Diccionario de opciones​

Ejemplo​

Graph.pie()​

Diccionario de opciones​

Ejemplo​

Graph.worldmap()​

Resolución automática de códigos de país​

Diccionario de opciones​

Ejemplo​

Graph.usa()​

Resolución de códigos de estado​

Diccionario de opciones​

Ejemplo​

Graph.boxplot()​

Diccionario de opciones​

Ejemplo​

Graph.scatter()​

Diccionario de opciones​

Ejemplo​

Graph.heatmap()​

Diccionario de opciones​

Ejemplo​

Graph.histogram()​

Modos de entrada​

Diccionario de opciones​

Ejemplo​

Graph.area()​

Diccionario de opciones​

Ejemplo​

Graph.timeline()​

Diccionario de opciones​

Ejemplo​

Cómo funcionan los gráficos

Visualizaciones en scripts

Constantes y tokens visuales

Esquema y dimensiones del contenedor

Recursos geográficos TopoJSON

Paleta de colores

Esquemas continuos y categóricos

Puente de especificación de bajo nivel

Graph.render()

Parámetros

Normalización y comportamiento de errores

Ejemplo

Constructores de gráficos de alto nivel

Graph.bars()

Parámetros

Diccionario de opciones

Ejemplos

Desglose vertical por categorías

Disposición horizontal desde un mapa clave-valor

Graph.lines()

Diccionario de opciones

Ejemplo

Graph.pie()

Diccionario de opciones

Ejemplo

Graph.worldmap()

Resolución automática de códigos de país

Diccionario de opciones

Ejemplo

Graph.usa()

Resolución de códigos de estado

Diccionario de opciones

Ejemplo

Graph.boxplot()

Diccionario de opciones

Ejemplo

Graph.scatter()

Diccionario de opciones

Ejemplo

Graph.heatmap()

Diccionario de opciones

Ejemplo

Graph.histogram()

Modos de entrada

Diccionario de opciones

Ejemplo

Graph.area()

Diccionario de opciones

Ejemplo

Graph.timeline()

Diccionario de opciones

Ejemplo