Un objeto JSON se convierte en un gráfico en vivo

Flujos de Sankey

data.links contiene origen, destino y valor. Los nodos se deducen de los enlaces. data.nodes puede aportar identificadores, etiquetas y orden de entrada. Los pesos son positivos o null; los enlaces duplicados se suman. Los ciclos y enlaces a sí mismos producen errores con las rutas de las filas.

{
  "type": "sankey",
  "data": {
    "links": [
      {
        "source": "Income",
        "target": "Budget",
        "value": 120
      },
      {
        "source": "Budget",
        "target": "Spending",
        "value": 100
      }
    ]
  }
}

La altura del nodo usa el mayor valor entre entradas y salidas. La descripción emergente explica las diferencias sin inventar enlaces. Se permiten 50 nodos, 100 enlaces y ocho etapas. Si llegas al límite, agrupa tú los flujos pequeños en «Otros».

options.flowColor: source (predeterminado) o stage. options.flowOrder: minimize (predeterminado) o input. options.showValues es true por defecto. Los nombres siguen visibles al ocultar valores. En pantallas estrechas, el gráfico se desplaza dentro de su marco y muestra debajo una tabla de enlaces plegada. Abre el creador de Sankey.

Ridgeline: observaciones agrupadas

Usa data.groups con id, label y observations por grupo. Los valores pueden ser negativos; null significa ausente. El uso local admite 12 grupos y 2000 observaciones. El renderizado alojado mantiene el límite de puntos del plan.

{
  "type": "ridgeline",
  "data": {
    "groups": [
      {
        "id": "monday",
        "label": "Monday",
        "observations": [
          12,
          15,
          16,
          19,
          24
        ]
      }
    ]
  },
  "options": {
    "bandwidth": 2
  }
}

La estimación de densidad de núcleo gaussiano usa un ancho de banda común de Silverman a partir de las desviaciones dentro de los grupos. Un options.bandwidth positivo lo sustituye. El rango X común abarca el mínimo y el máximo más cuatro anchos de banda a cada lado. Menos de cinco observaciones conocidas o valores constantes se muestran como puntos. Los grupos vacíos muestran No data. Las observaciones null permanecen en la tabla y se excluyen de la densidad.

Las alturas comparten escala de densidad. options.ridgeScale: "own" escala cada grupo según su máximo y muestra un aviso. options.sortByMedian: true ordena por mediana, con los vacíos al final. El cursor, la fijación y las flechas muestran n, mediana y el 50 % central. Abre el creador de ridgeline.

Diagrama de caja: observaciones agrupadas

El diagrama de caja usa los mismos data.groups que ridgeline: id, label y observations por grupo. Localmente admite 12 grupos y 2000 observaciones. El renderizado alojado mantiene el límite de puntos del plan. null significa ausente, nunca 0. Un grupo sin valores conocidos sigue visible y muestra No data.

{
  "type": "boxplot",
  "data": {
    "groups": [
      {
        "id": "p1",
        "label": "Period 1",
        "observations": [
          62,
          68,
          71,
          74,
          75
        ]
      }
    ]
  },
  "options": {
    "whiskers": "tukey"
  }
}

options.whiskers: tukey (predeterminado) llega a los valores extremos dentro de 1,5 veces el IQR por debajo o encima de la caja; los restantes son círculos atípicos. minmax llega al mínimo y máximo, sin atípicos. options.quartiles: linear (predeterminado, CUARTIL.INC de Excel) o halves (mediana de cada mitad, como TI-84). Ambos dan la misma mediana. options.showPoints: true muestra cada valor; false oculta los puntos. Sin configurarlo, aparecen si todos los grupos tienen como máximo 50 valores conocidos. options.sortByMedian: true ordena por mediana y deja los vacíos al final.

El cursor, la fijación y las flechas muestran n, mediana, mitad central, bigotes y atípicos. La tabla accesible contiene el resumen de cinco números de cada grupo. Abre el creador de diagramas de caja.

Dispersión X-Y: puntos en dos ejes numéricos

xy lee data.points: un { "x", "y", "label"?, "group"? } por fila, con títulos opcionales data.xTitle y data.yTitle de 1 a 60 caracteres. X e Y son números finitos o null. null significa ausente, nunca 0: no se dibuja el punto y la fuente indica cuántos puntos no tienen datos. Etiquetas y grupos tienen 1–120 caracteres. Asigna un grupo a todos los puntos o a ninguno. Localmente admite 2000 puntos y 12 grupos. El renderizado alojado mantiene el límite de puntos del plan.

{
  "type": "xy",
  "data": {
    "xTitle": "Hours studied",
    "yTitle": "Test score",
    "points": [
      {
        "x": 6.5,
        "y": 91,
        "label": "Maya"
      },
      {
        "x": 2,
        "y": 63,
        "label": "Jack"
      },
      {
        "x": 9,
        "y": 90,
        "label": "Olive"
      }
    ]
  },
  "options": {
    "bestFit": true
  }
}

options.bestFit: true dibuja una recta de mínimos cuadrados por grupo con al menos tres puntos y dos valores X distintos, con ecuación, r y R². Para un grupo aparecen en una esquina. Para varios, r aparece en la leyenda si cabe y siempre en la descripción de la recta. options.fromZero: true incluye 0 en ambos ejes. options.format formatea Y y options.xFormat formatea X con la misma sintaxis (percent, currency:XXX o affix:["before","after"]).

El cursor, la fijación y las flechas muestran cada punto y su predicción. La recta indica n, ecuación, r y R². La tabla accesible contiene todos los puntos y, con la recta activa, pendiente, intersección, r y R² por grupo. Abre el creador de dispersión.

Streamgraph: capas de un flujo cambiante

Usa etiquetas temporales y series normales, como en líneas o columnas apiladas. Streamgraph admite 1–6 capas y 2–100 periodos. Los valores deben ser finitos y no negativos. null es un error; para datos ausentes, usa líneas.

La base de silueta es la mitad negativa del total de cada momento. Las capas siguen el orden de entrada. Las curvas suaves interpolan grosores no negativos y límites compartidos; los valores son exactos en cada momento. options.curve: "linear" usa límites rectos. No hay eje Y numérico. El cursor y las flechas muestran valores y proporciones exactos por momento. Los nombres aparecen dentro si caben; si no, en la leyenda.

La leyenda no permite ocultar capas, pues dejaría huecos engañosos. Los cambios de valores animan las bandas; el cambio a líneas o columnas apiladas usa un fundido. Abre el creador de streamgraph.

Bump: posiciones a lo largo del tiempo

Usa data.labels para los periodos y una serie con nombre por entidad. Define options.rankMode expresamente: values calcula posiciones de competición (1, 2, 2, 4); ranks acepta posiciones enteras positivas. El primer puesto queda arriba. Una observación null interrumpe la línea.

En modo de valores, rankDirection: "descending" coloca primero los mayores (predeterminado); ascending, los menores. showRanks es false por defecto; true muestra posiciones en los puntos. topN (1–12) puede limitar las posiciones visibles sin inventarlas al salir o volver una entidad. Los valores deben ser finitos y no negativos. Usa 1–12 entidades y 3–24 periodos con nombres únicos de hasta 120 caracteres. Los errores indican el campo y cómo corregirlo.

{
  "type": "bump",
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mar"
    ],
    "series": [
      {
        "name": "Atlas",
        "values": [
          40,
          30,
          45
        ]
      },
      {
        "name": "Birch",
        "values": [
          35,
          42,
          45
        ]
      }
    ]
  },
  "options": {
    "rankMode": "values",
    "rankDirection": "descending"
  }
}

El cursor destaca una entidad. Las flechas izquierda y derecha recorren periodos; arriba y abajo, posiciones de un momento. Clic o Enter fija un punto; Mayús añade una comparación. La tabla accesible conserva cada momento, posición y valor original. PNG, SVG, API de renderizado e inserciones usan la misma escena. Edita los datos en el creador de bump charts. El gráfico de líneas muestra los huecos de valores; el gráfico de pendiente sirve para dos periodos.

Treemap y sunburst: grupos y elementos

Treemap y sunburst leen data.nodes. Los grupos tienen identificador y etiqueta. Los elementos indican su grupo con parentId y un valor positivo finito o null si falta. Los totales se calculan a partir de los elementos. Se admiten 6 grupos y 36 elementos en dos niveles, con identificadores únicos. Padres ausentes, ciclos, más niveles, grupos vacíos, ceros y negativos generan errores con la ruta del nodo y la corrección.

{
  "type": "treemap",
  "title": "City budget",
  "data": {
    "nodes": [
      {
        "id": "spaces",
        "label": "Public spaces"
      },
      {
        "id": "parks",
        "parentId": "spaces",
        "label": "Parks",
        "value": 32
      },
      {
        "id": "libraries",
        "parentId": "spaces",
        "label": "Libraries",
        "value": 18
      }
    ]
  },
  "options": {
    "showValues": true,
    "precision": 0,
    "variant": "auto"
  }
}

Abre un grupo con clic, toque o Enter. All, Escape o Retroceso vuelve al total. Este estado no se guarda en la especificación. Los elementos ausentes o de menos de un píxel permanecen en la tabla y las descripciones de teclado. options.showValues: false oculta valores; los nombres aparecen si caben. Formato, precisión, tema y variante siguen las reglas habituales. Sunburst usa los mismos nodos: cambia type a sunburst. El anillo interior muestra grupos; el exterior, elementos; el centro, la suma. Las etiquetas aparecen si caben. Edita un treemap o crea un sunburst.