Una biblioteca de gráficos para científicos de datos que se basa en D3 y stack.gl

Introducción

Plotly es una empresa informática con sede en Montreal, Quebec, que desarrolla herramientas de análisis y visualización de datos en línea. Proporciona herramientas de gráficos, análisis y estadísticas en línea para individuos y bibliotecas de gráficos científicos y de colaboración para Python, R , MATLAB, Perl, Julia, Arduino y REST. Las herramientas de Plotly también se pueden usar para diseñar gráficos interactivos con Jupyter Notebook.

Plotly es también el nombre del producto. Plotly.js es una biblioteca de gráficos que se basa en D3 y stack.gl , que son componentes modulares de WebGL. Es una biblioteca de gráficos declarativos de alto nivel y se entrega con más de 40 tipos de gráficos, incluidos mapas 3D, estadísticos, científicos, financieros y SVG. Además de la biblioteca de JavaScript, Plotly también impulsa plotly.py y plotly.R . Los gráficos plotly son ampliamente adoptados por la comunidad de ciencia de datos/IA, como MLflow , demostración de Point-E en Hugging Face .

Echemos un vistazo a cómo funciona Plotly.

Configurar Plotly.js en Create React App

Usamos la aplicación Create React como base para explorar plotly.js. El siguiente comando crea un proyecto React:

% yarn create react-app react-plotly
% cd react-plotly

% yarn add plotly.js react-plotly.js

"dependencies": {
  "plotly.js": "^2.17.0",
  "react-plotly.js": "^2.6.0"
}

El gráfico de barras

Un gráfico de barras presenta datos categóricos con barras rectangulares con alturas o longitudes proporcionales a los valores que representan. Las barras se pueden trazar vertical u horizontalmente. Un gráfico de barras verticales a veces se denomina gráfico de columnas.

En Plotly , una serie se llama datos, que se compone de una matriz de trazas. Cada objeto de seguimiento se compone de type, x, yy otra información.

• xestablece las xcoordenadas, que son una matriz de la progresión secuencial de valores. El valor predeterminado es una secuencia que comienza desde 0, con un incremento de 1.
• yestablece las ycoordenadas, que es una matriz de valores en cada punto de y.
• El tipo de gráfico de barras es 'bar'.

• En las líneas 3 a 7, crea un objeto de diseño, con title, widthy height.
• En las líneas 9 a 18, crea una matriz de datos compuesta por dos objetos de seguimiento. Ambos rastros se definen como un tipo de 'bar', junto con yvalores.
• En la línea 21, se crea el gráfico de barras.

Podemos cambiar una de las barras a la orientación horizontal con este código:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
  },
];

Las orientaciones mixtas son solo para demostración. Probablemente, los casos de uso reales tienen todas las barras en la misma orientación.

Establezca ambas barras en la orientación horizontal usando el siguiente código:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
    orientation: 'h',
  },
];

El gráfico de dispersión

Un gráfico de líneas conecta una serie de puntos de datos mediante una línea y un gráfico de dispersión muestra una colección de puntos. En Plotly, tanto los gráficos de líneas como los de dispersión tienen el tipo de 'scatter'. Se utiliza modepara determinar el modo de dibujo:

• 'lines': Dibuja un gráfico de líneas.
• 'markers': Dibuja un gráfico de dispersión.
• 'text': Muestra un texto.
• 'none': No muestra nada.

Aquí está el modificado src/App.js:

• En las líneas 3 a 7, crea un objeto de diseño, con title, widthy height.
• En las líneas 9 a 20, crea una matriz de datos compuesta por dos objetos de seguimiento. Ambos rastros se definen como tipo de 'scatter', junto con yvalores. La primera traza se establece modeen 'lines', y la segunda se establece modeen 'markers'.
• En la línea 23, se crea el gráfico de dispersión.

Aquí está el modificado src/App.jsque usa modos combinados.

• En las líneas 3 a 7, crea un objeto de diseño, con title, widthy height.
• En las líneas 9 a 28, crea una matriz de datos compuesta por dos objetos de seguimiento.
  – En las líneas 10 a 14, el primer trazo establece el modo en 'lines+markers'.
  – En las líneas 15 a 26, los segundos trazos establecen el modo en 'markers+lines'. Además, se establece marker.coloren 'green', marker.sizeen 12, line.coloren 'red'y line.widthen 3.
• En la línea 31, se crea el gráfico de dispersión.

Lo siguiente dataArrayse suma texta modeambos rastros, junto con una matriz de valores de texto. Aquí está el código:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

Funciona, excepto que hay algunas superposiciones entre los marcadores y el texto.

Podemos cambiar las posiciones del texto para evitar superposiciones:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
    textposition: 'top center',
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    textposition: 'bottom center',
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

Hemos visto xy ydimensiones en un gráfico de Plotly, y hay otra dimensión, la dimensión de color, en los gráficos de dispersión. En el siguiente ejemplo, creamos un gráfico con siete trazos de dispersión horizontal con marcadores. Estos marcadores se utilizan para explicar cómo funciona la dimensión del color.

Aquí está nuestro gráfico de objetivos:

Y aquí está el modificado src/App.js:

• En las líneas 10 a 18, trace 0define ylos valores para ser [6, 6, 6, 6, 6, 6](línea 12) y marker.colorpara ser un color simple 'red'(línea 15).

• En las líneas 19 a 28, trace 1define yvalores para ser [5, 5, 5, 5, 5, 5](línea 21) y marker.colorscalepara ser [[0, 'green'], [1, 'blue']](línea 24). colorscalees una matriz que contiene matrices que asignan un valor normalizado a una cadena de color rgb, rgba, hexadecimal, hsl, hsv o con nombre. Como mínimo, se requiere un mapeo para los valores más bajo (0) y más alto (1). colorscaletiene un efecto solo si marker.colorse establece en una matriz numérica (línea 25).

• En las líneas 29 a 39, trace 2define yque los valores sean [4, 4, 4, 4, 4, 4](línea 31). Dado que marker.colorscaleno está definido, colorscalese aplica el valor predeterminado. marker.cmin(línea 35) establece el límite inferior del dominio de color y marker.cmax(línea 36) establece el límite superior del dominio de color. De lo contrario, marker.cminy marker.cmaxse deducirá de marker.color(línea 34).

• En las líneas 40 a 49, trace 3define yque los valores sean [3, 3, 3, 3, 3, 3](línea 42). marker.cmid(línea 46) establece el punto medio del dominio de color escalando marker.cminy/o marker.cmaxsiendo equidistante a este punto.

• En las líneas 50 a 59, trace 4define yque los valores sean [2, 2, 2, 2, 2, 2](línea 52). Además de definir colorscale, podemos usar un nombre de paleta predefinido de la lista: 'Blackbody', 'Bluered', 'Blues', 'Cividis', 'Earth', 'Electric', 'Greens', 'Greys', 'Hot', 'Jet', 'Picnic', 'Portland', 'Rainbow', 'RdBu', 'Reds', 'Viridis', 'YlGnBu'y 'YlOrRd'. Para trace 4, marker.colorscalese establece en 'Greens'(línea 56).

• En las líneas 60 a 69, trace 5define ylos valores para ser [1, 1, 1, 1, 1, 1](línea 62) y marker.colorscalepara ser 'YlOrRd'(amarillo o rojo, línea 66).

• En las líneas 70 a 85, trace 6define yvalores para ser [0, 0, 0, 0, 0, 0](línea 72) y marker.colorscalepara ser 'Jet'(línea 76).

• En las líneas 78–83 de trace 6, colorbarse define con title, orientation, xy y. colorbarse establece con una orientación horizontal (línea 80) para evitar superponer la leyenda. colorbar.xestablece la xposición de la barra de colores, con un número entre o igual a -2 y 3.
  El valor predeterminado es 1,02. colorbar.yestablece la posición y de la barra de color, con un número entre o igual a -2 y 3. El valor predeterminado es 0,5. En trace 6, colorbar.xse establece en 0,48 (línea 81) y colorbar.yse establece en -0,2 (línea 82). La ubicación se ha movido de la parte superior (predeterminada para la orientación horizontal) a la parte inferior, junto a trace 6. Muestra cómo coincide la dimensión de color de los puntos dispersos colorbar.

• En la línea 94, se crea el gráfico de dispersión con siete dimensiones de color.

colorbar: {
  title: 'y = 0',
  orientation: 'v',
}

Al parecer, colorbarse superpone a la leyenda. En lugar de hacer colorbarhorizontal, podemos cambiar la leyenda para que sea horizontal.

Aquí está el modificado src/App.js.

• En las líneas 7 a 9, legendse establece en horizontal.
• colorbarEn las líneas 81–83, se elimina la orientación de . El valor predeterminado es vertical ( 'v').

El ejemplo anterior muestra que la dimensión del color es vibrante y fácil de usar.

Opciones de configuración

Al pasar el cursor sobre la esquina superior derecha de un gráfico, modebaraparece una lista de botones. De izquierda a derecha, es Download, Zoom, Pan, Box Select, Lasso Select, Zoom in, Zoom out, Autoscale, Reset axes, y Plotly Logo.

• Download: Descarga el gráfico a través del navegador. Por defecto descarga un archivo PNG de dimensión 700x450. Aquí está el ejemplo para configurarlo para descargar un archivo SVG llamado 'custom_image'y de la dimensión 800x600.

const configObj = {
  toImageButtonOptions: {
    format: 'svg', // one of png, svg, jpeg, webp
    filename: 'custom_image',
    width: 800,
    height: 600,
    scale: 1, // multiply title/legend/axis/canvas sizes by this factor
  },
};

Si se establece scrollZoomen verdadero, los usuarios pueden acercar y alejar la imagen con la rueda de desplazamiento del mouse.

const configObj = {
  scrollZoom: true,
};

• Box Select: Permite seleccionar parte del gráfico con un recuadro.

• Lasso Select: Permite seleccionar parte del gráfico con un límite libre.

• Zoom in: Hace que la imagen sea más grande y más cercana.

• Zoom out: Hace que la imagen sea más pequeña y más lejana.

• Autoscale: Mira todos los puntos (datos) en el gráfico y cambia el diseño para mostrarlos todos.
• Reset axes: Vuelve a los detalles de diseño especificados para el gráfico, incluso si eso deja algunos puntos fuera.
• Plotly Logo: La información sobre herramientas muestra la versión de Plotly, y al hacer clic en ella va ahttps://plotly.com/.

<Plot layout={layoutObj} data={dataArray} config={configObj} />

• Desactive la capacidad de respuesta de ancho y alto:

const configObj = {
  responsive: false,
};

const configObj = {
  staticPlot: true,
};

const configObj = {
  displayModeBar: true,
};

const configObj = {
  displaylogo: false,
};

const configObj = {
  modeBarButtonsToRemove: ['pan', 'lasso'], // Pan and Lasso are removed
};

const configObj = {
  modeBarButtonsToAdd: [
    'drawline',
    'drawopenpath',
    'drawclosedpath',
    'drawcircle',
    'drawrect',
    'eraseshape',
  ],
};

Accesorios del controlador de eventos

En la sección anterior, presentamos Box Selecty Lasso Select, estas partes seleccionadas del gráfico. ¿Cuál es el caso de uso para eso?

El gráfico que escucha el selectevento puede reaccionar a la selección del usuario.

Aquí está el modificado src/App.js:

• En la línea 10, hace Box selectque sea la acción predeterminada de modebar.
• En las líneas 98 a 101, crea un objeto de configuración, que hace que modebarsiempre esté visible y oculta el logotipo de Plotly en el archivo modebar.
• En las líneas 103 a 105, se crea un controlador de selección para registrar la selectedinformación.
• En la línea 109, el gráfico se crea con accesorios de layout, data, configy onSelected.

En la consola Inspect, selectedse muestra información que se puede utilizar para crear aplicaciones.

Esta es la lista de accesorios para los controladores de eventos: , onAfterExport, onAfterPlot, onAnimated, onAnimatingFrame, onAnimationInterrupted, onAutoSize, onBeforeExport, onBeforeHover, onButtonClicked, onClick, onClickAnnotation, onDeselect, onDoubleClick, onError, onFramework, onHover, onInitialized, onLegendClick, onLegendDoubleClick, onPurge, , onRelayout, onRelayouting, onRestyle, onRedraw, onSelected, onSelecting, onSliderChange, onSliderEnd, onSliderStart, onSunburstClick, onTransitioning, onTransitionInterrupted, y onUnhover.onUpdateonWebGlContextLost

Conclusión

Hemos mostrado cómo funciona plotly.js para gráficos de barras y gráficos de dispersión. Además de las capacidades de gráficos completos, su dimensión de color es vibrante y fácil de usar. Sus modebarbotones son excesivos y potentes. Sin embargo, carece de accesibilidad.

En comparación con Highcharts , los gráficos estadísticos y científicos de Plotly son ampliamente adoptados por la comunidad de ciencia de datos/IA. Daremos ejemplos en los siguientes artículos.

Gracias por leer.

Want to Connect? 

If you are interested, check out my directory of web development articles.