Crea gráficos interactivos con Plotly.js, Parte 3: Gráficos de barras

En nuestro último tutorial, aprendiste a crear gráficos de líneas en Plotly.js. Todos los aspectos de los gráficos de líneas, como los datos que se van a trazar y la forma o el color de la línea que conecta los puntos trazados, pueden controlarse mediante un conjunto de atributos. Plotly.js permite crear gráficos de barras de forma similar.

En este tutorial, aprenderás cómo crear diferentes tipos de gráficos de barras utilizando Plotly.js. También hablaré de cómo controlar la apariencia de estos gráficos, como el color y el ancho de la barra, utilizando atributos específicos.

Antes de continuar, me gustaría mencionar que también puedes crear algunos gráficos básicos de barras utilizando Chart.js. Si no planeas usar ninguna de las funciones avanzadas de Plotly.js, puedes usar una librería ligera.

Crea tu primer gráfico de barras

Puedes trazar un gráfico de barras en Plotly.js estableciendo el valor del atributo escribir a barra. El resto de las tareas, como la creación de un objeto de rastreo o la provisión de los datos a graficar, son similares al proceso de creación de gráficos de líneas. Aquí está el código que necesitas para crear un gráfico de barras básico en Plotly.

1

var barDiv = document.getElementById('bar-chart');

2

3

var traceA = {

4

  x: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],

5

  y: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],

6

  type: 'bar'

7

};

8

9

var data = [traceA];

10

11

var layout = {

12

  title:'Density of Planets (kg/m3)'

13

};

14

15

Plotly.plot( barDiv, data, layout );

Aquí está el gráfico creado por el código anterior. Los datos de densidad de los planetas se han tomado de Planetary Fact Sheet proporcionada por la NASA.

Crea gráficos de barras apiladas, agrupadas y relativas

Si necesitas representar datos más complejos en forma de gráfico, puedes utilizar el atributo modo de barra disponible en Plotly para hacerlo. Este atributo puede establecerse como apilado, agrupado, superpuesto y relativo. Suele ser útil si quieres trazar múltiples trazos de barras con información relacionada.

El valor de apilado crea gráficos de barras apilados en las que las barras que representan los subgrupos de la entidad se colocan una encima de otra para formar una sola columna. Todas las barras dentro de un subgrupo tienen colores diferentes que muestran la contribución individual de esa sección a la entidad completa. La longitud combinada de las barras apiladas representa el tamaño total de esa entidad.

Aquí hay un código que apila la contribución al PIB de los ocho primeros países. Los datos de composición sectorial del PIB nominal se han tomado de Wikipedia.

1

var barDiv = document.getElementById('bar-chart');

2

3

var primaryGDP = {

4

  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],

5

  y: [215364, 964772, 56764, 27959, 18549, 47277, 391672, 37050],

6

  type: 'bar',

7

  name: 'Agricultural Sector'

8

};

9

10

var secondaryGDP = {

11

  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],

12

  y: [3427876, 4464876, 1300833, 982067, 556477, 455355, 580755, 448305],

13

  type: 'bar',

14

  name: 'Industrial Sector'

15

};

16

17

var tertiaryGDP = {

18

  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],

19

  y: [14303756, 5788633, 3377434, 2484874, 2074864, 1985647, 1280813, 1367145],

20

  type: 'bar',

21

  name: 'Service Sector'

22

};

23

24

var data = [primaryGDP, secondaryGDP, tertiaryGDP];

25

26

var layout = {

27

  title:'Nominal GDP Sector Composition of Top 8 Countries',

28

  barmode: 'stack'

29

};

30

31

Plotly.plot( barDiv, data, layout );

El orden de apilamiento de los subgrupos depende del orden en que los datos fueron pasados a la función.

Si se establece el modo de barra como cubierta, se colocarán las barras individuales en subgrupos unos sobre otros. Aunque este modo puede ser útil para las comparaciones directas, debes tener cuidado con eso porque ocultará las barras más cortas que se pasaron antes en la función gráfico().

El siguiente gráfico se ha creado con el modo de barraconfigurado como cubierta. Ahora puedes comparar fácilmente la contribución al PIB de un solo sector en todos los países. Cabe destacar que todas las barras de un mismo país empiezan ahora desde abajo. Esto hace que algunas observaciones sean muy fáciles de detectar. Por ejemplo, ahora está muy claro el PIB del sector servicios > el PIB del sector industrial > el PIB del sector agrícola en los ocho primeros países.

En la escala actual, es imposible ver adecuadamente la contribución del sector agrícola en el PIB de Alemania, Reino Unido y Francia. La capacidad de Plotly.js para hacer zoom puede resultar muy útil en estos casos. Se puede ampliar todo lo que se quiera, y el gráfico seguirá siendo muy nítido.

En lugar de apilar todas las barras de un subgrupo una encima de otra, también puedes colocarlas juntas para formar un grupo. Tendrás que establecer el modo de barra en grupo para crear gráficos agrupados. Ten en cuenta que proporcionar demasiada información en los gráficos agrupados puede dificultar su lectura.

Puedes controlar el espacio entre barras de diferentes categorías así como las barras dentro de un subgrupo utilizando los atributos espacio de barra y grupo de espacio de barra respectivamente. Hasta ahora, todas las barras se han dibujado para representar las cifras reales del PIB. Sin embargo, puedes utilizar el parámetro norma de barra para dibujar las barras en términos de porcentajes o fracciones. Cuando norma de barra se establece como porcentaje o fracción, se calcula la contribución total de la categoría principal y luego se asigna un porcentaje a las barras individuales en función del valor del subgrupo.

Por ejemplo, el sector de los servicios contribuye en un 79,7% al PIB total de Estados Unidos. Esto significa que la barra del sector de los servicios de Estados Unidos se situará en el 79,7. Todos los atributos mencionados en este párrafo se especifican en el objeto de diseño. A continuación se muestra un ejemplo del objeto de diseño que especifica todos estos parámetros.

1

var layout = {

2

  title:'Nominal GDP Sector Composition of Top 8 Countries',

3

  barmode: 'group',

4

  bargap: 0.25,

5

  bargroupgap: 0.1,

6

  barnorm: 'percent'

7

};

El valor final del modo de barra llamado relativo  es útil cuando se traza un grupo de trazos con valores negativos y positivos. En este caso, los valores positivos se dibujan por encima del eje y los negativos por debajo.

Cambiar el color, el ancho, el texto y otros atributos de la barra

Es posible cambiar el color de las barras en un trazo utilizando el atributo de color anidado dentro del parámetro del marcador. El color y la  anchura del contorno de la barra pueden modificarse de forma similar. Estas opciones están anidadas dentro del atributo lineal, que a su vez está anidado dentro de marcador. Cada una de estas opciones pueden suministrarse como un único valor para especificar el color y la anchura de todas las barras de un trazo a la vez o como una matriz para especificar un color o una anchura de diferentes para barras individuales.

Otro atributo importante que puede resultar útil es la base. Te permite especificar la posición donde se dibuja la base de una barra. Puede ser útil en determinadas situaciones en las que se contabilizan valores relativos que deben compensarse para mostrar el resultado correcto.

Se puede proporcionar información adicional sobre una barra o punto específico trazado utilizando el atributo de texto. La posición del texto se puede especificar utilizando adentro, afuera, auto y ninguno. Cuando se utiliza adentro, el texto se posicionará dentro de la barra cerca de su final. El texto mismo puede ser escalado y girado para que se ajuste adecuadamente dentro de la barra. Cuando se utiliza afuera, el texto se colocará fuera de la barra cerca de su final. En este caso, el texto sólo se escalará. Cuando no se ha establecido ningún valor para el atributo desplazar texto, el valor del texto se muestra también dentro de las etiquetas desplazar.

También puedes utilizar diferentes familias de fuentes para el texto que se encuentra dentro y fuera de la barra utilizando los atributos fuente de texto interior y fuente de texto exterior.

A continuación se muestra un ejemplo de uso de todos estos atributos para crear un gráfico que traza la velocidad relativa de diferentes vehículos, con un único vehículo en movimiento como referencia.

1

var barDiv = document.getElementById('bar-chart');

2

var lightGreen = 'rgba(0,255,50,0.6)';

3

var redShade   = 'rgba(255,50,0,0.6)';

4

5

var traceA = {

6

  x: ["Car A", "Car B", "Car C", "Car D", "Car E", "Car F", "Car G", "Car H"],

7

  y: [100, 80, 40, 160, 75, 93, 8, 125],

8

  type: 'bar',

9

  text: ['','','','Overspeeding','','Overspeeding','','Overspeeding'],

10

  textposition: 'inside',

11

  width: 0.8,

12

  base: [-40, 10, 50, -45, 0, 15, 60, -20],

13

  marker: {

14

    color: [lightGreen, lightGreen, lightGreen, redShade, lightGreen, redShade, lightGreen, redShade],

15

    line: {

16

      color: 'black',

17

      width: 1

18

    }

19

  }

20

};

21

22

var data = [traceA];

23

24

var layout = {

25

  title:'Speed of Cars (km/hr)',

26

  yaxis: {

27

    dtick: 15

28

  }

29

};

30

31

Plotly.plot( barDiv, data, layout );

Como puedes ver, he pasado los valores base y de color como una matriz. Cuando los vehículos van en la misma dirección, parece que se mueven más despacio, así que tenemos que añadir la velocidad de nuestro propio vehículo como valor base para obtener la velocidad real.

Cuando los vehículos van en dirección contraria, parece que se mueven rápido, por lo que tenemos que restar la velocidad de nuestro propio vehículo para obtener un resultado preciso. Esto nos permite mostrar información adicional sobre la velocidad de nuestro propio vehículo en el mismo gráfico. El siguiente ejemplo de CodePen muestra el gráfico final trazado por el código anterior.

Conclusión

Este tutorial muestra cómo crear una variedad de gráficos de barras en Plotly.js utilizando el atributo de modo de barra. También has aprendido a personalizar la apariencia de las barras individuales en un gráfico utilizando un conjunto específico de atributos. He tratado de hablar de todos los atributos comúnmente utilizados de los gráficos de barras en el tutorial.

Sin embargo, todavía hay algunos atributos adicionales que puedes leer en la sección de referencia de trazado de barras en Plotly. Algunos atributos que he explicado en el tutorial faltan en la sección de referencia, pero se pueden encontrar en los archivos de la biblioteca si estás interesado en aprender más sobre ellos.

Si tienes alguna pregunta o sugerencia relacionada con este tutorial, no dudes en hacérmelo saber en los comentarios.