8 Visualización gráfica
En la siguiente sección nos ocupamos del aspecto más visual en el análisis de datos. Los gráficos son hoy en día uno de los elementos más potentes sobre los que descansa la analítica de datos (Kuan 2015) . En muchos casos es el único instrumento utilizado para comunicar los resultados de una investigación. Nuestra elección para ilustrar esta parte del documento es el uso del paquete highcharter . Este paquete es un wrapper del software highcharts y ha sido desarrollado para ser utilizado en R. Highcharts es un librería de JavaScript muy conocida y una de las más utilizadas en el desarrollo de páginas web. En esta sección vamos a enseñarte como aprovechar toda la potencia visual de los gráficos, utilizando como vehículo de propulsión el paquete highcharter desarrollado por (Kunst 2020).
8.1 Paquete highcharter, introducción
El paquete highcharter es un contenedor o wrapper para la biblioteca Highcharts que incluye funciones de acceso directo para trazar objetos gráficos de R. Es una biblioteca de gráficos que ofrece numerosos tipos de gráficos con una sintaxis de configuración muy simple y repetitiva. Suponemos que ya estás acostumbrado a trabajar con R, por lo que no te resultará complicado seguir los pasos aquí indicados.
Este documento fundamentalmente se ha dedicado a trabajar con tablas cruzadas, ese elemento que tanta productividad produce y que tan claras deja las visualizaciones; sin embargo la mayoría de librerías de gráficos trabajan con dataframe , por lo que deberemos hacer una simplificación de la tabla para trabajar con ella de forma adecuada. No sería necesario, pero como digo te ayudará a ver con otros ojos la simplicidad de highcharter . Comenzaremos trabajando con la base de la librería y en el desarrollo de la sección indicaremos como trabajar con tablas cruzadas.
Lo primero que debemos saber, es que hay unos nombres de campo (por defecto) que pueden existir en el dataframe , y cuya presencia facilita enormemente el trabajo con los gráficos. Mira esta tabla de datos. En esta tabla son muy importantes los nombres de los campos, porque su existencia hace que, sin apenas código, el gráfico ya visualiza de acuerdo a nuestra necesidad.
| x | y | z | low | high | value | name | color | from | to | weight |
|---|---|---|---|---|---|---|---|---|---|---|
| 0 | 1.6 | -34.0 | -6.0 | 9.2 | 1 | lemon | #d35400 | lemon | olive | 1 |
| 1 | 11.0 | -23.0 | 6.7 | 15.3 | 10 | nut | #2980b9 | lemon | guava | 1 |
| 2 | 20.4 | 6.8 | 2.8 | 38.0 | 19 | olive | #2ecc71 | lemon | fig | 1 |
| 3 | 22.1 | 32.3 | 19.4 | 24.8 | 21 | guava | #f1c40f | nut | olive | 1 |
| 4 | 15.4 | 27.7 | 12.1 | 18.7 | 14 | fig | #2c3e50 | olive | pear | 2 |
| 5 | 7.4 | 3.2 | -11.8 | 26.6 | 6 | pear | #7f8c8d | guava | pear | 2 |
A saber …
x, que contiene la secuencia de datosy, que contiene el dato que habitualmente representaremos en el eje de las Y (ordenadas)z, dimensiona el valor de y cuando se quieren usar tres dimensiones de representaciónlow, valor más bajo para la categoríahigh, valor más alto para la categoríavalue, valor de la categoríaname, que contiene lo nombres o textos de las categorías; suele ser lo que queremos que aparezca en el eje de las X (abscisas)color, código del color en hexadecimal que modificará el color por defecto de la serie (puede ser también el nombre del color)from, importante en gráficos especiales de tipo organización o donde hay una relación ‘desde’to, igual al anterior, importante en gráficos especiales de tipo organización o donde hay una relación ‘hasta’weight, utilizado en algunos gráficos a los que nos referiremos después.
Debemos saber que highcharter nos permite utilizar dos tipos diferentes de funciones que a continuación explicamos, aunque nos centramos en la primera de ellas. La segunda es una forma de acortar la primera.
highchart()hchart()
8.1.1 Función principal
highchart(); esta función crea un gráfico highcharts usando un widget. El widget creado se puede representar en páginas HTML generadas a partir de R Markdown y con características de interactividad. Si estás familiarizado con el paquete ggplot2 , es una función similar a ggplot() del paquete donde se define un objeto ggplot base sobre el cual se pueden agregar más capas geométricas. De manera similar, una vez que se define la función highchart() , se pueden agregar más elementos highcharts encima de ella, como si fueran capas superpuestas.
8.1.2 Otra forma más rápida
Por otro lado, hchart () es una función genérica para dibujar diferentes gráficos sobre la marcha. El gráfico resultante es un objeto highchart , por lo que puede seguir modificando con la API implícita. Si estás familiarizado con ggplot2 , esta función es similar a qplot() . Comencemos nuestro viaje de visualización interactiva con los diseño más sencillos.
8.2 Mi primer gráfico
Para trabajar con los gráficos, utilizaremos la anterior tabla de datos, muy sencilla, propuesta por el autor del paquete, que además contiene los nombres de campo estandarizados que nos van a ayudar a de forma muy sencilla a generar nuestras visualizaciones.
8.3 Gráfico de barras
Un diagrama de barras (o columnas) muestra la relación entre una variable numérica (y) y una categórica (name). Cada entidad de la variable categórica se representa como una barra. El tamaño de la barra representa su valor numérico. A veces se describe como una forma aburrida de visualizar información. Sin embargo, probablemente sea la forma más eficaz de mostrar este tipo de datos.
Vamos a mostrar las dos formas de hacer este gráfico y entenderás la información que te aportábamos en la descripción anterior de las funciones posibles para hacer un gráfico.
require(highcharter) # solicitamos la carga de highcharter si no lo está ya
df1 <-
select(df, name, y, color) # seleccionamos las columnas name e y, por un motivo que más adelante explicamos
highchart() %>%
hc_chart(type = 'bar') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.1: Gráfico inicial de barras
¿Por qué hemos seleccionado estos tres campos? Ya hemos hablado de la importancia del nombre de los campos en highcharter. El gráfico de barras que es un estándar, es transformado a un gráfico de barras low-high si se localizan estos nombres de campo, low y high en el dataframe de trabajo, y el dataframe original df los tenía. Por tanto si repetimos este gráfico, pero con el dataframe original con esos dos campos, veremos que variación se produce.
highchart() %>%
hc_chart(type = 'bar') %>%
hc_xAxis(categories = df$name) %>%
hc_add_series(df) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.2: Gráfico de barras de tabla original
La barra no se traza completa sino que se traza con origen en el valor más bajo ( low ), y con final en el valor más alto ( high ). Sin embargo si acercas el ratón a una barra, verás que el valor listado se corresponde con el campo y del dataframe .
Vamos a realizar unas pequeñas variaciones muy habituales en los gráficos.
8.3.1 Cambiar el nombre de la serie de datos
La primera modificación sería añadir el nombre de la serie al gráfico …
highchart() %>%
hc_chart(type = 'bar') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits') %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.3: Gráfico de barras, adición nombre serie
Podemos observar, como en ángulo inferior derecho de la ventana del gráfico aparece la palabrafruitsque hemos escrito como nombre del conjunto de datos, que en realidad es una única serie.
8.3.2 Añadir créditos al gráfico
Añadir un pie de gráfico con créditos del creador del mismo.
highchart() %>%
hc_chart(type = 'bar') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits') %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.4: Gráfico de barras, adición de créditos
Ver ángulo inferior derecho, justo debajo del nombre de la serie. Posibilidad de hacer clic y llegar hasta la URL indicada.
8.3.3 Añadir el valor del dato al elemento (datalabels)
highchart() %>%
hc_chart(type = 'bar') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits', dataLabels = list(enabled = TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.5: Gráfico de barras, adición de valores
8.3.4 Guardar y exportar el gráfico
En ocasiones es necesario dar la oportunidad al usuario del gráfico de poder guardarlo como imagen o guardarlo como tabla de EXCEL o fichero de texto separado por ‘,’ (CSV).
highchart() %>%
hc_chart(type = 'bar') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits', dataLabels = list(enabled = TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.6: Gráfico de barras, adición de exportación
8.3.5 API de Highcharts, toda la potencia de los gráficos
La pregunta que ahora nos deberíamos estar haciendo es… ¿como puedo yo saber que debo usar hc_credits() , o hc_exporting() o dataLabels(list=()) ?
Para eso tenemos lo que se llama la API de la librería de gráficos. Ahora entenderemos mejor el apartado de presentación cuando decíamos que highcharter es unwrapperde la librería Highcharts . Si visitamos el sitio web de la api de highcharts podemos ver que todas las opciones que se pueden usar en los gráficos están documentadas. Si a ello añadimos el sitio demo de esta marca podemos ver todo lo que se puede hacer. Te recomiendo la lectura del post de Danton Noriega acerca de como usar la API para saber construir nuestros gráficos de Highchart en R, en especial la parte en la que refiere a este punto que estamos hablando (Highcharts API and highcharter functions). Tras la lectura de ese post te darás cuenta de que en tus manos de analista de datos, tienes un auténtico cañón de magníficas visualizaciones. Pero vayamos poco a poco y continuemos con nuestros ejemplos de gráficos.
8.4 Gráfico de columna
Es un gráfico idéntico al anterior, pero con la barra vertical en lugar de horizontal. Mantenemos la última vista básica con los elementos añadidos de exportación, créditos y mostrado de valores de aquí en adelante.
highchart() %>%
hc_chart(type = 'column') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits', dataLabels = list(enabled = TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.7: gráfico de columnas
Obsérvese que en el gráfico, lo único que hemos hecho ha sido modificar el tipo de gráfico de bar a column . Añadamos ahora perspectiva al gráfico, incluyendo la lista de opciones de 3D.
highchart() %>%
hc_chart(type = 'column',
options3d = list(
enabled = TRUE,
beta = 45,
alpha = 15
)) %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits', dataLabels = list(enabled = TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.8: Gráfico de columnas 3D
8.4.1 Variación de columna a pirámide
Y si lo presentamos en forma de pirámide …
highchart() %>%
hc_chart(type = 'columnpyramid') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1,
name = 'Fruits',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE)
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.9: Gráfico de columnas con pirámides
8.4.2 Variación de columna a lollipop
Y si lo presentamos en forma de lollipop, debemos variar al dataframe al completo, porque este gráfico muy parecido a la variación de rango, requiere del low-high.
highchart() %>%
hc_chart(type = 'dumbbell') %>%
hc_xAxis(categories = df$name) %>%
hc_add_series(
df,
name = 'Fruits',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE)
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.10: Gráfico lollipop o dumbbell
O también …
highchart() %>%
hc_chart(type = 'dumbbell', inverted = TRUE) %>%
hc_xAxis(categories = df$name) %>%
hc_add_series(
df,
name = 'Fruits',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE)
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.11: Gráfico lollipop invertido
8.4.3 Gráficos polares
Existe otra forma de visualizar el gráfico que nos va a gustar mucho, porque se ve en pocas ocasiones.
highchart() %>%
hc_chart(type = 'bar', polar = TRUE) %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits', dataLabels = list(enabled = TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.12: Gráfico de barras, circular -polar-
Nótese que se ha añadido el modificador polar=TRUE Una buena vista, espectacular pero poco efectiva. Desde el propio script, sin embargo se puede añadir una mínima opción que mejoraría esta salida.
highchart() %>%
hc_chart(type = 'bar', polar = TRUE) %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits', dataLabels = list(enabled = TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_pane(endAngle = 270) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.13: Gráfico de barras circular con fijación de ángulo de parada
Esta nueva función hc_pane() hace que el círculo termine en el ángulo 270 (de 360), de forma que las etiquetas se leen mejor. Pero no es una visualización fácil, visualmente atractiva, pero difícil de leer e intepretar.
8.5 Diagramas de secciones
8.5.1 Tarta o pie chart
Si hay algún gráfico tan o más famoso que el de barras o el de columnas, ese es el gráfico de tarta.
df$sliced <- c(0, 1, 0, 0, 1, 0)
#añadimos el campo sliced
highchart() %>%
hc_title(text = 'Fruits pie') %>%
hc_subtitle(text = 'My favourite fruits') %>%
hc_chart(type = 'pie',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_add_series(df, name = 'Fruits', showInLegend = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.14: Gráfico de tarta y adición de secciones separadas
df <- select(df,-sliced)
#eliminamos el campo slicedAdemás de haberle añadido un título y un subtítulo este gráfico presenta un nuevo elemento fundamental: el modificador showInLegend=TRUE que nos permite mostrar una leyenda con las diferentes frutas y sus colores. Además, en el script hemos comenzado por añadir un nuevo campo a la tabla df, denominado sliced que ya puedes ver su efecto, separa del centro (desgaja) una sección de la tarta. En este caso ha sucedido para la fruta en segundo lugar (nut) y para la que está en quinto lugar (fig).
8.5.2 Anillo o doughnut
Y si queremos convertir este gráfico en un anillo o doughnut utilizaremos el modificador innerSize='75%' en la función hc_add_series() . Este modificador traza un círculo desde el baricentro del diagrama hasta el porcentaje indicado dejando espacio central en blanco. El gráfico puede tomar diferente aspecto según ese porcentaje indicado.
highchart() %>%
hc_title(text = 'Fruits pie') %>%
hc_subtitle(text = 'My favourite fruits') %>%
hc_chart(type = 'pie',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_add_series(df,
name = 'Fruits',
showInLegend = TRUE,
innerSize = '75%') %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.15: Gráfico de doughnut
o también, cambiando el radio inferior de vaciado …
highchart() %>%
hc_title(text = 'Fruits pie') %>%
hc_subtitle(text = 'My favourite fruits') %>%
hc_chart(type = 'pie',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_add_series(df,
name = 'Fruits',
showInLegend = TRUE,
innerSize = '33%') %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.16: Gráfico dedoughnut, adelgazado
8.5.3 Funnel
Una variante para gráficos de un único campo es el funnel.
highchart() %>%
hc_chart(type = 'funnel',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_yAxis(visible = TRUE) %>%
hc_tooltip(outside = TRUE, enabled = TRUE) %>%
hc_add_series(
df,
name = 'Frutas',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE),
colorByPoint = TRUE
) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.17: Gráfico de funnel
8.5.4 Pirámide
Una nueva variante para un gráfico de una sola variable. el tipo pyramid.
highchart() %>%
hc_chart(type = 'pyramid',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_yAxis(visible = TRUE) %>%
hc_tooltip(outside = TRUE, enabled = TRUE) %>%
hc_add_series(
df,
name = 'Frutas',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE),
colorByPoint = TRUE
) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.18: Gráfico de pirámide
8.6 Gráfico de línea
Un nuevo pero tradicional modelo, el gráfico de línea. Vamos a aprovechar para no ser demasiado repetitivos para añadir una nueva serie de valores; recordemos la tabla de datos inicial.
knitr::kable(df)| x | y | z | low | high | value | name | color | from | to | weight |
|---|---|---|---|---|---|---|---|---|---|---|
| 0 | 1.6 | -34.0 | -6.0 | 9.2 | 1 | lemon | #d35400 | lemon | olive | 1 |
| 1 | 11.0 | -23.0 | 6.7 | 15.3 | 10 | nut | #2980b9 | lemon | guava | 1 |
| 2 | 20.4 | 6.8 | 2.8 | 38.0 | 19 | olive | #2ecc71 | lemon | fig | 1 |
| 3 | 22.1 | 32.3 | 19.4 | 24.8 | 21 | guava | #f1c40f | nut | olive | 1 |
| 4 | 15.4 | 27.7 | 12.1 | 18.7 | 14 | fig | #2c3e50 | olive | pear | 2 |
| 5 | 7.4 | 3.2 | -11.8 | 26.6 | 6 | pear | #7f8c8d | guava | pear | 2 |
Vamos a utilizar z, como si fuera una nueva serie de valores. Es decir como si quisiéramos representar en el diagrama dos conjuntos de valores. Primero lo mostramos como hasta ahora, con una sola serie…
df1 <-
select(df, name, y, z, color) # seleccionamos las columnas name, y y z
highchart() %>%
hc_chart(type = 'line') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits', dataLabels = list(enabled = TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Para ahora añadir la nueva serie. Nótese la variación en el modificador hc_add_series() donde ahora hay dos líneas, como si de dos capas se tratara.
highchart() %>%
hc_chart(type = 'line') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1, name = 'Fruits - serie 1', dataLabels = list(enabled =
TRUE)) %>%
hc_add_series(df1$z, name = 'Fruits - serie 2', dataLabels = list(enabled =
TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.19: Gráfico de línea multi serie (1)
Quisiera hacer notar que simplemente hemos añadido una nueva serie que se contiene en la columna denominada z de df1 (df1$z) y no hemos modificado la anterior serie que por defecto era el campo y . Creo que sería mucho más limpio y ordenado el escribir este mismo gráfico así.
highchart() %>%
hc_chart(type = 'line') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1$y, name = 'Fruits - serie 1', dataLabels = list(enabled =
TRUE)) %>% # minimo cambio identificador
hc_add_series(df1$z, name = 'Fruits - serie 2', dataLabels = list(enabled =
TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.20: Gráfico de línea multi serie (2)
De este modo, identificamos que es cada una de las series y y z , obteniendo idéntico resultado pero quedando más clara la sintaxis de cada una de las series introducidas.
8.6.0.1 Suavizado de la línea
En muchas ocasiones es interesante suavizar la línea. Para ello highcharts tiene un modificador del tipo de gráfico denominado spline .
highchart() %>%
hc_chart(type = 'spline') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1$y, name = 'Fruits - serie 1', dataLabels = list(enabled =
TRUE)) %>%
hc_add_series(df1$z, name = 'Fruits - serie 2', dataLabels = list(enabled =
TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.21: Gráfico de línea suavizado
Nótese el suavizado de la curva.
Y ha llegado un momento de hacer algo no habitual, pero que sí puede darte ideas de futuro.
highchart() %>%
hc_chart(type = 'line') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1$y, name = 'Fruits - serie 1', dataLabels = list(enabled =
TRUE)) %>%
hc_add_series(
df1$z,
type = 'column',
name = 'Fruits - serie 2',
dataLabels = list(enabled = TRUE)
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.22: Gráfico combinado línea y columna
Sencillo, ¿verdad? Hemos combinado línea con columna (no todas las combinaciones son posibles). Además como z tenía valores negativos, las barras negativas se muestran muy claramente. ¿Y si polarizamos este gráfico?
highchart() %>%
hc_chart(type = 'line', polar = TRUE) %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1$y, name = 'Fruits - serie 1', dataLabels = list(enabled =
TRUE)) %>%
hc_add_series(
df1$z,
type = 'column',
name = 'Fruits - serie 2',
dataLabels = list(enabled = TRUE)
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.23: Gráfico combinado polarizado
¡Nada mal! aunque es posible que no combinando el tipo de representación en las series, la visualización sea más clara, en lo que se denomina gráfico spider que es muy utilizado para las baterías o tablas de ítems en nuestras encuestas. Y ya puestos, añadimos un toque de color a nuestro gráfico. Analiza tú mismo los modificadores que cambian.
highchart() %>%
hc_chart(type = 'line',
polar = TRUE,
backgroundColor = '#E2E2E2') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Fruits - serie 1',
dataLabels = list(enabled = TRUE),
color = '#eb6909'
) %>%
hc_add_series(
df1$z,
name = 'Fruits - serie 2',
dataLabels = list(enabled = TRUE),
color = 'teal'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.24: Gráfico de tela de araña
8.7 Gráficos de columnas o barras con apilamiento
Volvamos la vista un poco atrás, y ahora que tenemos dos series, vamos a jugar un poco más el gráfico o más específicamente con las columnas (o barras). Vamos a realizar los apilamientos (no se pueden hacer lógicamente con los gráficos de tarta).
Recuperamos nuestro gráfico de columnas, pero lo hacemos ahora con las dos series, pero ahora, para que los dos valores (y,z) sean positivos, vamos a trabajar con el campo denominado y y el campo denominado value .
df1 <-
select(df, name, y, z, value, color) # seleccionamos las columnas name, y y value
highchart() %>%
hc_chart(type = 'column') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Año 1900',
dataLabels = list(enabled = TRUE),
color = '#EB6909'
) %>%
hc_add_series(
df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE),
color = '#C2C2C2'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.25: Gráfico de columnas apiladas
Nótese que hemos añadido una novedad y es la asignación a la serie del color que nos gusta para ella, mediante el modificador color en la opción hc_add_series() . Procedamos con el apilamiento.
highchart() %>%
hc_chart(type = 'column') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Año 1900',
dataLabels = list(enabled = TRUE),
color = '#EB6909',
stacking = 'normal'
) %>%
hc_add_series(
df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE),
color = '#C2C2C2',
stacking = 'normal'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.26: Gráfico de columnas apiladas, adición de color
Nótese que en ambas series, se ha introducido el modificador stacking='normal' que ocasiona ese ajuste en las series. Podemos combinar series con apilamiento y series sin apilamiento (agrupaciones de categorías para verlas conjuntamente).
highchart() %>%
hc_chart(type = 'column') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Año 1900',
dataLabels = list(enabled = TRUE),
color = '#EB6909',
stacking = 'normal'
) %>%
hc_add_series(
df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE),
color = '#C2C2C2',
stacking = 'normal'
) %>%
hc_add_series(
df1$z,
name = 'Año 2020',
dataLabels = list(enabled = TRUE),
color = '#020202'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.27: Gráfico columnas combinando apilamiento y normal
Y por último, el apilamiento puede ser normal o puede ser percent donde la representación (que no el valor mostrado) se calcula en base 100. Nótese que todas las columnas son igual de altas y nótese que nuevamente z se mantiene sin apilamiento.
highchart() %>%
hc_chart(type = 'column') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Año 1900',
dataLabels = list(enabled = TRUE),
color = '#EB6909',
stacking = 'percent'
) %>%
hc_add_series(
df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE),
color = '#C2C2C2',
stacking = 'percent'
) %>%
hc_add_series(
df1$z,
name = 'Año 2020',
dataLabels = list(enabled = TRUE),
color = '#020202'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.28: Gráfico de columnas combinando apilamiento porcentual
Por último, apilemos todas, cambiando a barras …
highchart() %>%
hc_chart(type = 'bar') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Año 1900',
dataLabels = list(enabled = TRUE),
color = '#EB6909',
stacking = 'percent'
) %>%
hc_add_series(
df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE),
color = '#C2C2C2',
stacking = 'percent'
) %>%
hc_add_series(
df1$z,
name = 'Año 2020',
dataLabels = list(enabled = TRUE),
color = '#020202',
stacking = 'percent'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.29: Gráfico de barras con apilamiento porcentual
Y pongamos el gráfico en estilo polar .
highchart() %>%
hc_chart(type = 'column', polar = 'TRUE') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Año 1900',
dataLabels = list(enabled = TRUE),
color = '#EB6909',
stacking = 'percent'
) %>%
hc_add_series(
df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE),
color = '#C2C2C2',
stacking = 'percent'
) %>%
hc_add_series(
df1$z,
name = 'Año 2020',
dataLabels = list(enabled = TRUE),
color = '#020202',
stacking = 'percent'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.30: Gráfico de columnas apiladas porcentual
8.8 Gráfico de área
Volvamos a nuestras dos series ( y , value ) para presentar ahora una nueva visualización, el gráfico de área . Esta es una variación del gráfico de línea donde se dibujan éstas pero con la superficie bajo las líneas con el color indicado, mostrándose de esta forma.
highchart() %>%
hc_chart(type = 'area') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Año 1900',
dataLabels = list(enabled = TRUE),
color = '#EB6909'
) %>%
hc_add_series(
df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE),
color = '#C2C2C2'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.31: Gráfico de área
Nótese la superposición de una y otra. Normalmente ese gráfico se usa para representar mediciones en las que una siempre está por encima de la otra (como aquí sucede), pero siempre pensando que las áreas de intersección van a combinar el color.
Podemos también apilar los valores directos.
highchart() %>%
hc_chart(type = 'area') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Año 1900',
dataLabels = list(enabled = TRUE),
color = '#EB6909',
stacking = 'normal'
) %>%
hc_add_series(
df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE),
color = '#C2C2C2',
stacking = 'normal'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.32: Gráfico de área apilado
O mostrar las áreas con base 100.
highchart() %>%
hc_chart(type = 'area') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(
df1$y,
name = 'Año 1900',
dataLabels = list(enabled = TRUE),
color = '#EB6909',
stacking = 'percent'
) %>%
hc_add_series(
df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE),
color = '#C2C2C2',
stacking = 'percent'
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.33: Gráfico de área apilado porcentual
8.9 Gráfico de puntos o scatterplot
Variación de los anteriores vamos a presentar sus dos versiones. La versión llamemos natural sería representar los puntos (igual que en el gráfico de línea) pero sin dibujar el trazo que los une.
highchart() %>%
hc_chart(type = 'scatter') %>%
hc_xAxis(categories = df1$name) %>%
hc_add_series(df1$y, name = 'Año 1900', dataLabels = list(enabled = TRUE)) %>%
hc_add_series(df1$value,
name = 'Año 2000',
dataLabels = list(enabled = TRUE)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.34: Gráfico de puntos, scatter
Sin embargo, cuando se piensa en un scatterplot, lo que se piensa es en un diagrama de dispersión o mapa cartesiano donde se presentan los puntos con sus coordenadas en x y también en y . Un diagrama de dispersión muestra la relación entre 2 variables numéricas. Para cada punto de datos, el valor de su primera variable se representa en el eje X, el segundo en el eje Y. Como no disponemos datos para un buen scatterplot, vamos a construirnos un banco de datos (aleatorio) y trabajamos con él.
#==================== construcción del _dataframe_
set.seed(311265) # para que la aleatoriedad sea siempre la misma, fijamos su semilla de aleatorización
dfextra <-
data.frame(
mat = sample(1:100, 400, replace = TRUE),
# un valor de un campo X, por ejemplo puntuación en habilidad en matemáticas
bio = sample(1:100, 400, replace = TRUE),
# un valor de un campo y, por ejemplo puntuación en habilidad en biología
glob = sample(50:100, 400, replace = TRUE),
# un valor z de peso global de adecuación al puesto
grp = sample(1:3, 400, replace = TRUE) # grupo de pertenencia (tres grupos, 1, 2 y 3)
)
#================== mostramos extracto del data frame
knitr::kable(head(dfextra)) %>% # mostramos breve extracto de la tabla creada
kable_styling(
bootstrap_options = c('striped', 'hover', 'condensed', 'responsive'),
full_width = F
) | mat | bio | glob | grp |
|---|---|---|---|
| 72 | 80 | 76 | 3 |
| 6 | 49 | 85 | 3 |
| 76 | 47 | 55 | 2 |
| 50 | 42 | 98 | 2 |
| 65 | 77 | 69 | 2 |
| 34 | 8 | 97 | 3 |
Y vamos con el gráfico …
hchart(dfextra, 'scatter', hcaes(x = mat, y = bio, group = grp)) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.35: Scatterplot
Puedes observar que para este tipo de gráfico hemos optado por la forma acotada; esto es debido a que la forma de ofrecerle los datos es más simple, sin embargo podemos seguir añadiendo elementos al mismo del mismo modo que lo hacíamos con el uso de la función highchart() . La agrupación por colores es debida al modificador de grupo group=grp en la función hcaes() . Si no lo ponemos, simplemente el color sería único.
hchart(dfextra, 'scatter', hcaes(x = mat, y = bio)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.36: Scatterplot
Una última variación al scatterplot sería convertirlo en un bubble scatterplot. Un diagrama de burbujas es un diagrama de dispersión donde se agrega una tercera dimensión: el valor de una variable numérica adicional se representa mediante el tamaño de los puntos. Necesita 3 variables numéricas como entrada: una está representada por el eje X, una por el eje Y y otra por el tamaño del punto. Más vale un imagen que mil palabras.
hchart(dfextra, 'scatter', hcaes(
x = mat,
y = bio,
z = glob,
group = grp
)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.37: Bubble scatterplot
8.10 Histograma o gráfico de densidad
También en este caso vamos a recurrir a la forma simple. Un histograma solo toma como entrada una variable numérica. La variable se divide en varios cortes y el número de observaciones por corte se representa mediante la altura de la barra. Es posible representar la distribución de varias variables en el mismo eje utilizando esta técnica. Sigamos utilizando nuestro nuevo dataframe dfextra .
hchart(dfextra$mat, color = 'teal', name = 'Matemáticas') %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.38: Histograma
Este gráfico puede fácilmente reconvertirse a la función de densidad. Una gráfica de densidad muestra la distribución de una variable numérica. Solo toma variables numéricas como entrada y está muy cerca de un histograma. Puede usarse exactamente en las mismas condiciones.
hchart(density(dfextra$mat), color = 'teal', name = 'Matemáticas') %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.39: Gráfico de densidad
8.11 Gráficos indicadores
Estos gráfico están caracterizados en su mayor parte por presentar un único valor numérico en una imagen muy simplificada. Su mayor exponente es el denominado gauge que estamos acostumbrados a ver en multitud de páginas web de tipo dashboard. Se caracterizan por tener datos que se proporcionan de forma externa al dataframe de donde se representa la información. Veamos algunos ejemplos.
8.11.1 Gauge
Un gráfico de indicador (o gráfico de velocímetro) combina un gráfico de anillo y un gráfico circular en un solo gráfico. Muestra el valor deseado al que se le presupone un valor mínimo y un máximo. Es muy típico para representar por ejemplo el NPS y presentarlo con secciones tipo semáforo. En nuestro script y con afán de ir probando nuevas cosas, crearemos primero lo que se denominan las secciones del semáforo (3 o n) y luego haremos el gráfico. Representemos el campo value de nuestras frutas, comenzando por la oliva (fila 3) . Presentamos el script de forma más extendida para ir apreciando y comentando alguno de sus detalles
col_stops <-
data.frame(
q = c(0.25, 0.50, 0.75),
# se establecen las secciones de valor en término porcentual
c = c('#CD5C5C', '#F0E68C', '#3CB371'),
# se establecen los colores que tomará cada sección
stringsAsFactors = FALSE
)
stops <-
list_parse2(col_stops) # se crea una lista con este _dataframe_ que hemos creado, pues highcharts lo necesita así.
highchart() %>%
hc_chart(type = 'solidgauge') %>%
hc_pane(
startAngle = -90,
# determina el ángulo donde comienza
endAngle = 90,
# determina el ángulo donde acaba
background = list(
outerRadius = '100%',
# 'vaciamos' el hueco del círculo que hemos dibujado
innerRadius = '60%',
# 'vaciamos' el hueco del círculo que hemos dibujado
shape = 'arc'
)
) %>%
hc_tooltip(enabled = FALSE) %>%
hc_yAxis(
stops = stops,
# le aplicamos la lista de secciones colo (semáforo)
lineWidth = 0,
minorTickWidth = 0,
tickAmount = 2,
min = 0,
max = 100,
labels = list(y = 25) # baja las etiquetas 0 y 100 de límites para que no sitúen sobre el gráfico
) %>%
hc_add_series(
data = df$high[3],
# le indicamos que capturamos el valor desde _dataframe_ 'df', del campo 'high', y la fila '3'
dataLabels = list(
borderWidth = 0,
useHTML = TRUE,
style = list(fontSize = '60px')
)
) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.40: Gauge o indicador
Prueba si lo deseas a ir cambiando el valor de df$high[3] a cualquier valor entre 0 y 10 y observarás el cambio de color.
col_stops <-
data.frame(
q = c(0.25, 0.50, 0.75),
c = c('#CD5C5C', '#F0E68C', '#3CB371'),
stringsAsFactors = FALSE
)
stops <- list_parse2(col_stops)
highchart() %>%
hc_chart(type = 'solidgauge') %>%
hc_pane(
startAngle = -90,
endAngle = 90,
background = list(
outerRadius = '100%',
innerRadius = '60%',
shape = 'arc'
)
) %>%
hc_tooltip(enabled = FALSE) %>%
hc_yAxis(
stops = stops,
lineWidth = 0,
minorTickWidth = 0,
tickAmount = 2,
min = 0,
max = 100,
labels = list(y = 25)
) %>%
hc_add_series(data = 65,
dataLabels = list(
borderWidth = 0,
useHTML = TRUE,
style = list(fontSize = '60px')
)) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.41: Gauge
8.11.2 Bullet
Otra forma de representar valores unitario pero que tienen un objetivo definido y que pueden haber superado ese objetivo es el gráfico denominado bullet. vamos a imaginar que en nuestro dataframe , el campo yes el valor alcanzado, y el campo value es el objetivo.
bandas <-
list(
list(from = 0, to = 10, color = '#ddd'),
list(from = 10, to = 20, color = '#bbb'),
list(from = 20, to = 25, color = '#888')
)
hchart(
df1,
'bullet',
hcaes(x = name, y = y, target = value),
color = 'teal',
targetOptions = list(color = 'black')
) %>%
hc_chart(inverted = TRUE) %>%
hc_yAxis(
min = 0,
max = 25,
gridLineWidth = 0,
plotBands = bandas
) %>%
hc_xAxis(gridLineWidth = 15, gridLineColor = 'white') %>%
hc_plotOptions(series = list(
pointPadding = 0.25,
pointWidth = 15,
borderWidth = 0,
targetOptions = list(width = '200%')
)) %>%
hc_size(height = 300) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.42: Bullet o indicador lineal
Nótese que en el gráfico la barra vertical perpendicular a cada barra horizontal, que es el target se toma de los propios datos. Es un gráfico que también se ve mucho en losdashboard_, al igual que el anterior.
8.12 Gráfico de caja o boxplot
No lo hemos olvidado, el gráfico más típico en estadística junto con los histogramas, el denominado boxplot o diagrama de caja o diagrama de Box-Whiskers. Un diagrama de caja ofrece un buen resumen de una o varias variables numéricas. La línea que divide el cuadro en 2 partes representa la mediana de los datos. El final del cuadro muestra los cuartiles superior e inferior. Las líneas extremas muestran el valor más alto y más bajo excluyendo los valores atípicos. Nótese que es usada una función de tranformación de los datos del campo value para obtener los valores adecuados para el gráfico. Del mismo modo, nótese que la función de adición de las series, se ve mínimamente modificada ya que va a recibir una lista de valores por cada campos de trabajo. Usamos hc_add_series_list() .
dfboxplot1 <-
data_to_boxplot(df,
value,
add_outliers = TRUE,
name = 'value',
color = 'teal')
highchart() %>%
hc_chart(type = 'boxplot') %>%
hc_add_series_list(dfboxplot1) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.43: Boxplot
Añadir más series sólo implica repetir el proceso, lo que permite la compración.
dfboxplot1 <-
data_to_boxplot(df,
value,
add_outliers = TRUE,
name = 'value',
color = 'teal')
dfboxplot2 <-
data_to_boxplot(df,
high,
add_outliers = TRUE,
name = 'high',
color = 'red')
dfboxplot3 <-
data_to_boxplot(df,
low,
add_outliers = TRUE,
name = 'low',
color = 'orange')
highchart() %>%
hc_chart(type = 'boxplot') %>%
hc_add_series_list(dfboxplot1) %>%
hc_add_series_list(dfboxplot2) %>%
hc_add_series_list(dfboxplot3) %>%
hc_credits(enabled = TRUE,
text = 'InvestigaOnline.com',
href = 'https://www.investigaonline.com') %>%
hc_exporting(enabled = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.44: Boxplot con series
8.13 Gráfico de barras de error
A menudo tenemos necesidad de incluir un gráfico denominado de barras de error. Este gráfico toma los valores de low-high (que podrían ser lo límites de confianza de un intervalo) y los representa en forma gráfica, quedando de esta forma.
highchart() %>%
hc_chart(type = 'errorbar',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_yAxis(visible = TRUE) %>%
hc_tooltip(outside = TRUE, enabled = TRUE) %>%
hc_add_series(
df,
name = 'Límites de confianza',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE)
) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.45: Gráfico de barras error
Si además de los límites de la medición, quisiéramos añadir el punto de valor, el resultado sería éste.
highchart() %>%
hc_chart(type = 'errorbar',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_yAxis(visible = TRUE) %>%
hc_tooltip(outside = TRUE, enabled = TRUE) %>%
hc_add_series(
df,
name = 'Límites de confianza',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE)
) %>%
hc_add_series(
df,
type = 'scatter',
name = 'Valor',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE, x = 15, y = 5)
) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.46: Gráfico de barras error con punto
Probando nuevas cosas, hemos movido la etiqueta del valor hacia la derecha (x=15) y hacia abajo (y=5) . Eso hace que no se solape con el punto señalado en el gráfico.
8.14 Gráficos de transiciones
En nuestro trabajo en mucho casos debemos a veces plantear gráficos en los que se trata de graficar relaciones de objetos con fuente y destino. Aunque nuestro banco de datos es muy simple, hemos creado campos con el nombre de weight , from y to para que nos permitan hacer este tipo de gráficos que tienen dos versiones diferentes: el diagrama de Sankey y el diagrama de rueda de dependencia. Veamos ambos.
8.14.1 Diagrama de Sankey
El diagrama de Sankey es un tipo específico de diagrama de flujo, en el que la anchura de las linea de relación entre dos puntos denominados from y to que se muestra proporcional a la cantidad de flujo transferido (weight, que podría ser frecuencia de emparejamiento).
highchart() %>%
hc_chart(type = 'sankey',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_yAxis(visible = TRUE) %>%
hc_tooltip(outside = TRUE, enabled = TRUE) %>%
hc_add_series(
df,
name = 'Nombre de la serie',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE),
colorByPoint = TRUE
) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.47: Gráfico de Sankey
De esta forma se muestra que las relaciones más fuertes se producen entre aceituna y pera o entre guava y pera.
8.14.2 Diagrama de rueda
Otra forma de ver el mismo gráfico, pero en forma circular. Las mismas necesidades de campos weight , from y to .
highchart() %>%
hc_chart(type = 'dependencywheel',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_yAxis(visible = TRUE) %>%
hc_tooltip(outside = TRUE, enabled = TRUE) %>%
hc_add_series(
df,
name = 'Nombre de la serie',
showInLegend = FALSE,
dataLabels = list(enabled = TRUE),
colorByPoint = TRUE
) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.48: Gráfico de rueda
8.14.3 Diagrama streamgraph
Un streamgraph es un tipo de gráfico de áreas apiladas. Muestra la evolución de un valor numérico (eje Y) después de otro valor numérico (eje X). Esta evolución está representada por varios grupos, todos con un color distinto. Al contrario que en un área apilada, no hay esquinas: los bordes están redondeados, lo que da esta agradable impresión de flujo. Además, las áreas generalmente se desplazan alrededor de un eje central, lo que da como resultado una forma fluida y orgánica.
Usaremos los valores y , z y value para crear tres series.
highchart() %>%
hc_chart(type = 'streamgraph',
polar = FALSE,
inverted = FALSE) %>%
hc_xAxis(categories = df$name) %>%
hc_yAxis(visible = TRUE) %>%
hc_tooltip(outside = TRUE, enabled = TRUE) %>%
hc_add_series(
df$y,
name = 'y',
showInLegend = FALSE,
dataLabels = list(enabled = FALSE),
color = 'silver'
) %>%
hc_add_series(
df$z,
name = 'z',
showInLegend = FALSE,
dataLabels = list(enabled = FALSE),
color = 'teal'
) %>%
hc_add_series(
df$value ,
name = 'value',
showInLegend = FALSE,
dataLabels = list(enabled = FALSE),
color = 'orange'
) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.49: Streamgraph
8.14.4 Diagrama de redes
Para finalizar como homenaje a mis compañeros en TESI, quiero poner este gráfico muy de moda en la actualidad para representar transiciones, flujos o relaciones más complejas. Como es obvio, recogemos los datos de forma externa (ocultamos el código de carga) y presentamos los mismos en la imagen. El gráfico muestra nuestras relaciones de proyecto y unidades de negocio de modo interno.
#edges contiene las relaciones mientras que names contiene los elementos
g <- graph_from_data_frame(edges, directed = TRUE, vertices = names)
hchart(g,
layout = layout_with_fr,
dataLabels = list(enabled = TRUE, format = '{point.name}')) %>%
hc_title(text = 'TESI', useHTML = TRUE) %>%
hc_tooltip(useHTML = TRUE) %>%
hc_plotOptions(series = list(animation = FALSE))Figura 8.50: Diagrama network, redes de influencia
8.15 Conclusión
Hemos presentado de forma muy breve y simplificada cómo podemos aprovechar toda la potencia de highcharts en nuestros scripts. Lo importante es practicar y practicar. Hay muchísmas más posibilidades e ideas para tus visualizaciones en Highcharts.com. No dejes tampoco de leer el post de Danton Noriega acerca de como usar la API para saber construir los gráficos highchart en R mediante highcharteR Del mismo modo, no dejes de acudir al sitio web de Joshua Kunst, creador y mantenedor del paquete junto con otros colaboradores que permiten llevar adelante este excelente proyecto.