La visualización de datos es una habilidad imprescindible hoy en día, con datos en constante crecimiento y la necesidad de analizarlos y presentarlos. Definitivamente encontrará gráficos de datos, ya sea que esté en la industria de la tecnología o no y, por lo tanto, es una buena idea aprender a crear visualizaciones.
Aquí te mostraré que crear gráficos no es muy difícil y que, con las herramientas adecuadas, puedes comenzar a crear visualizaciones interactivas e interesantes en poco tiempo y esfuerzo.
En este tutorial paso a paso, demostraré cómo representar los valores del PIB de varios países durante los últimos 15 años en un hermoso gráfico de superficie interactivo en 3D utilizando una biblioteca JavaScript para visualización de datos.
El diagrama de superficie parece bastante complejo, pero les mostraré lo sencillo que es crear uno convincente y completamente funcional.
¿Qué es un gráfico de superficie 3D?
Un gráfico de superficie 3D traza tres dimensiones de datos en los ejes x, y y z, siendo dos de las variables independientes (que se muestran a lo largo de los ejes horizontales) y una dependiente de las otras dos (que se muestran en el eje vertical).
En este tutorial, trazaré países y años como variables independientes y valores del PIB como variable dependiente.
Bibliotecas de gráficos JavaScript
Actualmente hay muchas buenas Bibliotecas de gráficos JS, todos ellos con algunos pros y contras. Puede elegir cuál usar según sus requisitos específicos y la mejor parte es que el proceso de creación de visualizaciones es muy similar para todas las bibliotecas. Por lo tanto, puede comenzar a aprender con cualquiera de las bibliotecas y ampliar sus conocimientos a otra biblioteca también.
Para este tutorial, voy a utilizar el Cualquier gráfico Biblioteca de gráficos JavaScript que probablemente sea una buena opción para principiantes. Tiene toneladas de ejemplos junto con una extensa documentación Eso es realmente útil al empezar.
Además, AnyChart es bastante fácil de usar y flexible, con muchas opciones de personalización. Y lo que es especialmente importante para muchos: es gratuito para uso personal, educativo y otros usos no comerciales.
Creación de un gráfico de superficie 3D básico utilizando una biblioteca JS
Por supuesto, es una ventaja si tienes conocimientos previos de HTML, CSS y JavaScript. Pero no se sienta abrumado incluso si es un completo principiante. Lo guiaré a través de cada línea del código y, una vez que comprenda lo que está sucediendo, debería resultar más fácil de entender.
Hay cuatro pasos generales para crear un gráfico de superficie 3D o básicamente cualquier gráfico con una biblioteca JS y, como se mencionó anteriormente, estos pasos siguen siendo los mismos independientemente de la biblioteca que utilice.
- Cree una página HTML para mostrar su gráfico.
- Incluya los archivos JavaScript necesarios.
- Prepara y conecta tus datos.
- Escriba el código JS para el gráfico.
Paso 1: crea una página HTML básica
El paso inicial es tener una página HTML en blanco que contendrá el gráfico. Agregaré un elemento de bloque con una identificación única a la página. Usaré la identificación para hacer referencia al
Ahora especificaré la altura y el ancho de
Aquí, estoy usando AnyChart, por lo que necesito agregar los scripts correspondientes para el gráfico de superficie desde su CDN (Content Delivery Network), que es básicamente donde se pueden encontrar todos los scripts.
Entonces, incluiré AnyChart Centro y Superficie módulos para este gráfico.
Sólo para recordarle, incluya todos estos archivos de script en la sección
de su página HTML.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Surface Chart</title>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-surface.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-data-adapter.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the code for the JS Surface Chart will come here
</script>
</body>
</html>
Paso 3: incluye los datos
Los datos que decidí visualizar en un gráfico de superficie 3D provienen del sitio web de datos abiertos del Banco Mundial que me brinda los datos del PIB (basado en PPA) de todos los países en un archivo CSV.
Es más fácil crear un gráfico si los datos están en el formato que espera el gráfico y cómo desea mostrar los datos. Así que preprocesé los datos en consecuencia. Puedes revisar mi archivo de datos JSON. aquí.
Para cargar los datos del archivo JSON, agregaré el Módulo adaptador de datos de AnyChart y utilizar el cargar archivo Json método dentro de la etiqueta
Los tres pasos preparatorios ya están hechos, ¡así que prepárate para escribir código!
Paso 4: escriba el código para dibujar el gráfico
Lo primero que haré es asegurarme de que todo el código se ejecute solo después de que la página esté completamente cargada. Para hacer eso, incluiré el código completo dentro de la función anychart.onDocumentReady().
Luego, trabajaré con los datos que se cargan desde el archivo JSON. Aunque ya he preprocesado los datos, necesitaré procesarlos más para trazar el gráfico de superficie 3D. Básicamente, crearé una matriz que contenga los datos de los ejes y de acuerdo con la secuencia de los datos de los ejes.
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile( 'https://gist.githubusercontent.com/shacheeswadia/b0d6b34a1910359e0e1a8fc0c84019a6/raw/4ab92ca6361f1bc9875d2854e2e1271bc991f86b/surfaceAreaData.json',
function (data) {
// processing of the data
var result = [];
for (var x = 0; x < data.x.length; x++) {
for (var y = 0; y < data.y.length; y++) {
result.push([x, data.y.sort()[y], data.z[x][y]]);
}
}
}
);
});
Ahora, crearé el gráfico de superficie y estableceré los marcadores según la matriz de datos que acabo de crear.
A continuación, necesitaré configurar las etiquetas del eje x a partir de los datos cargados porque la matriz que creé contiene solo una secuencia y no los nombres de los países. También especificaré el máximo para la escala.
// create surface chart
var chart = anychart.surface();
// enable markers and set data for them
chart.markers().enabled(true).data(result);
// set x axis labels format
chart
.xAxis()
.labels()
.format(function () {
return data.x[Math.round(this.value)];
});.
// set x axis scale maximum
chart.xScale().maximum(data.x.length - 1);
Ahora le daré un título a mi gráfico y un poco de relleno en todos los lados. Por último, haré referencia al
// set chart paddings
chart.padding(25, 50, 75, 50);
// set chart title
chart.title('GDP per capita (PPP) in 2006-2020, in USD');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
¡Voilá! ¡Un trazado de superficie 3D funcional básico está listo!
Puede echar un vistazo a esta versión básica de un gráfico de superficie 3D de JavaScript en CódigoPen o consulte el código aquí mismo.
Personalización del gráfico de superficie JS
Una de las mejores partes de usar cualquier biblioteca de gráficos JS es que necesita escribir una cantidad mínima de código para implementar una versión funcional del gráfico. Además, la mayoría de las bibliotecas ofrecen opciones para personalizar el gráfico y hacerlo más personalizado e informativo.
Déjame mostrarte cómo mejorar el gráfico de superficie JS 3D para hacerlo más intuitivo y estéticamente mejor:
Paso 1: mejorar la apariencia de todos los ejes
Podrían parecer pequeños cambios, pero esto es lo que voy a hacer primero. Modificar la apariencia de los ejes hace que el gráfico se vea claramente mejor y más fácil de leer.
Modificar la configuración básica de los ejes.
Para enfatizar el efecto 3D del gráfico de superficie, rotaré los ejes y 15 y 45 grados respectivamente. Esto se puede hacer de forma muy sencilla utilizando la función de rotación incorporada.
Ahora estableceré el máximo y el mínimo del eje y como año inicial y final para que el trazado se vea más nítido.
// set y and z axes rotation chart.rotationY(15); chart.rotationZ(45); // set y scale minimum/maximum chart.yScale().minimum(2006); chart.yScale().maximum(2020);
Ahora habilitaré los ticks menores y los ejes para mostrar más ticks y, en consecuencia, más etiquetas. Para lograr uniformidad en los ticks, estableceré el intervalo en un valor fijo para los ejes y.
// enable x and y axes minor ticks chart.xAxis().minorTicks().enabled(true); chart.xAxis().minorLabels().enabled(true); chart.yAxis().minorTicks().enabled(true); chart.yAxis().minorLabels().enabled(true); // set scales ticks intervals chart.yScale().ticks().interval(8); chart.zScale().ticks().interval(40000);
Modificar las etiquetas de los ejes.
Para evitar la superposición con la etiqueta del eje, ocultaré la última etiqueta del eje.
A continuación, reduciré el tamaño de fuente de las etiquetas y etiquetas menores (etiquetas de los ticks menores) de todos los ejes.
// hide the last label in y axis chart.yAxis().drawLastLabel(false); // set x, y and z axes labels font size chart.xAxis().labels().fontSize(10); chart.xAxis().minorLabels().fontSize(10); chart.yAxis().labels().fontSize(10); chart.yAxis().minorLabels().fontSize(10); chart.zAxis().labels().fontSize(10);
Finalmente, en la modificación de la etiqueta, rotaré las etiquetas de los ejes y las etiquetas menores a 90 grados para una apariencia más limpia.
También necesitaré configurar las etiquetas del eje menor con los datos cargados de manera similar a lo que hice anteriormente para las etiquetas normales del eje x.
// set x axis labels rotation
chart.xAxis().labels().rotation(90);
chart.xAxis().minorLabels().rotation(90);
chart
.xAxis()
.minorLabels()
.format(function () {
return data.x[Math.round(this.value)];
});
Modificar el trazo de los ejes
De forma predeterminada, el gráfico de superficie utiliza tres colores diferentes para indicar los 3 ejes diferentes. Pero no necesito eso para mi representación, así que cambiaré el trazo de todos los ejes junto con las marcas a un color gris claro.
// set x, y and z axes stroke settings
chart.xAxis().stroke(null);
chart.xAxis().ticks().stroke("1 lightgray");
chart.xAxis().minorTicks().stroke("1 lightgray");
chart.yAxis().stroke(null);
chart.yAxis().ticks().stroke("1 lightgray");
chart.yAxis().minorTicks().stroke("1 lightgray");
chart.zAxis().stroke(null);
chart.zAxis().ticks().stroke("1 lightgray");
chart.zAxis().minorTicks().stroke("1 lightgray");
Mira aquí cómo luce esta versión con todo el embellecimiento de los ejes, y puedes jugar con ella en CódigoPen.
Paso 2: agrega una paleta de colores
Una forma segura de realzar el atractivo de su gráfico es agregar una paleta de colores basada en los datos que está mostrando. Es un proceso bastante sencillo en el que primero crearé una escala de colores lineal con los colores que quiero y luego estableceré esa escala de colores para el gráfico.
Además de agregar los colores, también agregaré una leyenda que mostrará qué color indica qué rango de valores, y esto se puede hacer en una sola línea de código.
// Create color scale
var customColorScale = anychart.scales.linearColor();
customColorScale.colors([
'#ffdd0e',
'#BCA600',
'#76A100',
'#1b8366',
'#007561'
]);
// Set color scale
chart.colorScale(customColorScale);
// enable and configure color range
chart.colorRange().enabled(true).orientation('right');
Paso 3: mejorar la información sobre herramientas
Cuando muestra más datos, siempre es una buena idea tener información sobre herramientas útil. La información sobre herramientas predeterminada no es realmente informativa, por lo que la personalizaré para mostrar los valores de los tres parámetros de cada punto trazado: país, año y cifra del PIB.
// tooltip settings
chart
.tooltip()
.useHtml(true)
.titleFormat(function () {
return data.x[this.x];
})
.format(function () {
return "Year: " + this.y + "<br>" + "GDP:$ " + this.z.toFixed(2);
});
¿No crees que esta sencilla información sobre herramientas añade mucho más valor al gráfico? Vea lo genial y personalizado que se ve ahora el gráfico de superficie 3D basado en JavaScript y puede encontrar el código completo en CódigoPen.
Conclusión
¿No es sorprendente cómo se puede construir con tanta facilidad un trazado de superficie en 3D tan emocionante y de aspecto complicado? Con las bibliotecas de JavaScript, puede crear rápidamente un gráfico operativo simple y luego agregar tantas funciones como desee para modificar su visualización.
Hay muchos tipos diferentes de visualización de datos disponibles en los distintos gráficos JS bibliotecas y puede consultar las opciones de tipo de gráfico disponibles en Cualquier gráficoPor ejemplo.
Por favor, haga cualquier pregunta, dé sugerencias o simplemente salude. El cielo es el límite para mejorar el PIB de cada país, así como para crear excelentes visualizaciones, ¡así que comience a crear gráficos interesantes y esclarecedores con este conjunto de habilidades recién aprendido!
