AnyChart es un control de gráficos basado en JavaScript (HTML5). Utilice el control AnyChart para crear gráficos y medidores interactivos entre navegadores y plataformas. Los gráficos de AnyChart son utilizados actualmente por muchas grandes empresas conocidas y se pueden utilizar en cuadros de mando, informes, análisis de datos, estadísticas, finanzas y otros campos.
Haga clic para descargar la versión oficial de AnyChart
En la era actual de crecimiento exponencial de los datos, la visualización es una habilidad esencial en la caja de herramientas. Las técnicas populares incluyen gráficos de barras, gráficos de líneas, gráficos circulares y gráficos de burbujas.
Para cualquier desarrollador, especialmente para los que están comenzando, crear gráficos interactivos desde cero utilizando JavaScript puede ser una tarea abrumadora. ¡Es por eso que tenemos una biblioteca de gráficos JS, que hace que sea más fácil y rápido crear visualizaciones perspicaces!
Siga leyendo para aprender cómo crear gráficos de burbujas de JavaScript utilizando una de estas bibliotecas.
Biblioteca de gráficos JavaScript
Hay muchas bibliotecas de JavaScript excelentes disponibles, y cada biblioteca tiene sus propias ventajas y desventajas. Pero la mejor parte es que el proceso de creación de un gráfico utilizando todos los gráficos es casi similar. Por lo tanto, puede aprender a manejar con cualquier persona y luego utilizar cualquier biblioteca que se adapte a los requisitos específicos de su proyecto.
Decidí usar la biblioteca de JavaScript de AnyChart junto con este tutorial para crear gráficos de burbujas. Creo que esta es una buena opción para desarrolladores con habilidades de codificación de nivel principiante a intermedio. AnyChart tiene una gran cantidad de documentación, es muy flexible y tiene una variedad de tipos de gráficos que pueden iniciar su viaje de visualización.
¿Qué es un gráfico de burbujas y qué mostrará?
Sé que está contento de comenzar a crear archivos de visualización, pero antes de comenzar, es importante comprender el tipo de gráfico y por qué es adecuado para lo que queremos mostrar.
Un gráfico de burbujas es esencialmente una combinación de un gráfico de burbujas y un gráfico que dibuja burbujas en un área geográfica. El tamaño de la burbuja indica el valor de una variable específica y la ubicación en el mapa indica la ubicación.
Uno de los eventos más importantes de 2020 son las elecciones presidenciales de Estados Unidos. Por supuesto, conocemos el resultado general. Pero, ¿no sería interesante ver quién gana en qué estado y porcentaje desde un solo punto de vista? ¡Por supuesto que eso creo! Aunque estoy seguro de que muchos de nosotros hemos visto muchos mapas de las elecciones estadounidenses de 2020, ¡crearé mi propio mapa y les mostraré paso a paso!
Usaré un gráfico de burbujas, que dibujará un gráfico de burbujas en cada estado de EE. UU. Los 3 parámetros indicados son los siguientes:
El número de votos en la elección de cada estado, en unidades de tamaño de burbuja.
El ganador de cada estado está representado por el color de la burbuja.
El porcentaje de votos obtenidos por colores opacos.
Como puede ver, el superpoder del gráfico de burbujas es la capacidad de mostrar múltiples parámetros en una sola vista.
Crea un gráfico de burbujas usando JavaScript
Ahora que sabe qué es un gráfico de burbujas y quiere estar seguro de que es el gráfico correcto para representar los resultados de los estados en las elecciones generales de EE. UU., Profundicemos en el proceso.
1. Cree una página HTML básica
El primer paso es crear una página HTML en blanco. Para guardar mi gráfico, agregué un elemento div con una ID única, que se usará para hacer referencia a él en el futuro.
Establecí el ancho y el alto del marcador de posición div al 100% para que el gráfico se muestre en toda la pantalla. Puede mantener estos valores según sus preferencias.
Recuerde que todos los archivos de secuencia de comandos deben incluirse en la sección de la página HTML.
3. Conexión de datos
Existe una gran cantidad de conjuntos de datos para los resultados de las elecciones estadounidenses. Para este gráfico, necesitamos campos específicos, así que tengo que crear el conjunto de datos final combinando datos de múltiples fuentes. Utilicé el conjunto de datos sobre el número de votos en las elecciones estatales en el sitio web de la Biblioteca del Congreso y los datos sobre los ganadores de Associated Press.
La biblioteca AnyChart admite muchos formatos de datos, incluidos CSV, JSON, XML ... Para facilitar esto, preprocesé los datos para incluir los campos relevantes del gráfico, como se muestra a continuación:
código de estado,
latitud,
longitud,
nombre del estado,
electoral votos,
partido de la victoria
Porcentaje de votos ganados
Antes de comenzar a usar los datos, necesitamos agregar 2 archivos de script más a la página HTML. El módulo adaptador de datos maneja la carga de archivos de datos, por eso lo incluimos. Dado que estamos creando un mapa, usaremos otra biblioteca de JavaScript, Proj4js, que convierte coordenadas de puntos de un sistema de coordenadas a otro. En definitiva, se encargará de dibujar burbujas en diversas áreas geográficas.
4. Agrega código para dibujar el gráfico.
Ahora que terminaron los preliminares, es hora de entrar en la parte principal. Lo importante sobre el uso de la biblioteca de gráficos de JavaScript es que la cantidad de código que se debe escribir es realmente pequeña. Lo guiaré a través de las líneas de código para que pueda comprender mejor cómo se dibuja el gráfico de burbujas.
Primero, me aseguraré de que todo el código utilizado para crear el gráfico esté dentro de la función anychart.onDocumentReady (). Esto es para cargar completamente la página antes de realizar cualquier otra operación. A continuación, usamos la función anychart.data.loadJsonFile () para cargar los datos.
Primero creo un mapa, defino algunas configuraciones para él y luego configuro los datos geográficos. También agregué un título al mapa.
anychart.onDocumentReady (function () { anychart.data.loadJsonFile ( 'https://gist.githubusercontent.com/shacheeswadia/70ec3d69e0e7a8bff7917607ea2926e4/raw/c3329fa81e86d9e637503b0429becd17, function
// Creates map chart
var map = anychart.map();
// Define settings for maps regions
map
.unboundRegions()
.enabled(true)
.fill('#E1E1E1')
.stroke('#D2D2D2');
// Set geodata using the script added
map.geoData('anychart.maps.united_states_of_america');
// Set Chart Title
map
.title('2020 US Election Results');
});
});
A continuación, agrego burbujas al mapa. Dado que las burbujas pequeñas no se pueden ver bien y las burbujas grandes causarán una superposición caótica, establezco el tamaño de burbuja mínimo y máximo.
// Establecer la configuración del tamaño mínimo / máximo de la burbuja
map.minBubbleSize ('0.8%'). MaxBubbleSize ('5%');
Ahora, como queremos mostrar los resultados de las elecciones, necesitamos usar el color del partido ganador para representar cada estado El ganador: el Partido Demócrata representa el azul y el Partido Republicano representa el rojo. Para hacer esto, verificamos el ganador en los datos y asignamos el color correspondiente al atributo de relleno.
// Color de relleno basado en los datos del
ganador.forEach (function (d) { if (d.winner == “Demócratas”) { d.fill = “# 019bd8”; } else { d.fill = “# d81c28”; } }); Luego, dibujo una burbuja basada en los datos y establezco el tamaño de la burbuja para reflejar el número de votos electorales en los datos. Activé la información sobre herramientas y las etiquetas predeterminadas del gráfico de burbujas a través de algunos estilos. El paso final es configurar el contenedor para hacer referencia al elemento de bloque HTML agregado previamente y dibujar el gráfico.
Eso es todo, solo use estas pocas líneas de código HTML y JS para preparar un gráfico de burbujas interactivo hermoso y completamente funcional.
Puede consultar esta versión inicial en CodePen [o en Playground]. Para su comodidad, aquí está el código completo:
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.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>
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile(
'https://gist.githubusercontent.com/shacheeswadia/70ec3d69e0e7a8bff7917607ea2926e4/raw/c3329fa81e86d9e637503b042becd17e68d9a718/bubbleMapData.json',
function (data) {
// Creates map chart
var map = anychart.map();
// Define settings for maps regions
map
.unboundRegions()
.enabled(true)
.fill('#E1E1E1')
.stroke('#D2D2D2');
// Set geodata using the script added
map.geoData('anychart.maps.united_states_of_america');
// Set Chart Title
map
.title('2020 US Election Results');
// Set bubble min/max size settings
map.minBubbleSize('0.8%').maxBubbleSize('5%');
// Fill color based on the winner
data.forEach(function(d){
if(d.winner == "Democrats"){
d.fill = "#019bd8";
}else{
d.fill = "#d81c28";
}
});
//Charting the bubbles
var series = map.bubble(
anychart.data.set(data).mapAs({ size: 'electoralvotes' })
);
// Tooltip
series
.tooltip(true)
.stroke('2 #E1E1E1')
.fill('#1976d2')
.selectionMode('none');
// Labels
series
.labels()
.enabled(true)
.anchor('left-center')
.position('right')
.fontSize(11)
.offsetX(5);
// Set container id for the chart
map.container('container');
// Initiates chart drawing
map.draw();
});
});
Gráfico de burbujas personalizado
La biblioteca de gráficos JS generalmente proporciona una serie de opciones de personalización prediseñadas.
El gráfico de burbujas existente ya es excelente, pero podemos ajustarlo con más código para hacerlo más perspicaz, atractivo y mejorar la información que se muestra.
A. Distribución de la opacidad basada en votos
Sin agregar demasiada complejidad, siempre es una buena idea mostrar la máxima información en una vista. Por lo tanto, quiero agregar un nuevo aspecto a la visualización usando la opacidad del color de la burbuja para indicar el porcentaje de votos ganados. Esta será una gran oportunidad para mostrarle cómo usar diferentes bibliotecas de JavaScript en el proceso. Necesitas algunas funciones específicas.
Usaré D3.js (una conocida biblioteca JS de código abierto para gráficos de datos) y la usaré para crear una escala lineal que aceptará el valor del porcentaje de votación en los datos y devolverá el valor de opacidad correspondiente. Para esto, agregué el script D3 necesario y luego agregué el código para hacer zoom. Ajuste los valores de entrada y salida de acuerdo con los datos. Finalmente, agrego el valor de opacidad al atributo de relleno.
// Escala lineal para obtener valores de opacidad
var opacity = d3.scaleLinear ()
.domain ([49, 70])
.range ([0.4, 0.9]);
// Color de relleno basado en ganador y opacidad basado en% de votos ganados
data.forEach (function (d) { var opacityVal = opacity (d.votepercent); opacityVal = opacityVal.toFixed (2); if (d.winner == "Demócratas") { d.fill = "# 019bd8" + opacityVal; } else { d.fill = "# d81c28" + opacityVal; } }); Si no comprende completamente esta parte, no se sienta abrumado . Descubrirá que, aunque está un poco más allá del nivel de los principiantes, sigue siendo útil para muchas personas y no es demasiado complicado.
B. Mejorar la información sobre herramientas
La información sobre herramientas predeterminada solo muestra el nombre del estado, cuya latitud / longitud y valor corresponden al número de votos electorales en cada estado.
Podemos personalizar la información sobre herramientas para mostrar la información que queremos mostrar, más significativa.
Para cada estado, decidí mostrar el nombre del ganador, el número de votos electorales y el porcentaje de votos recibidos por el ganador. Como quiero mostrar varios campos, habilité HTML para la información sobre herramientas, lo que me permite formatear el texto. Luego, agrego toda la información y modifico algunos estilos en formato HTML. Bueno, ahora la información sobre herramientas es como una adición constructiva a la visualización de gráficos de burbujas.
// Habilita HTML para etiquetas
series.tooltip (). UseHtml (true);
// Personalizar la
serie de texto de información sobre herramientas
.tooltip ()
.titleFormat ("
{% nombre} ")
.format ("
Partido ganador: {% ganador}
Votos electorales: {% electoralvotes}
% de votos ganados: {% votepercent}%
”);C. Mejorar la apariencia general del gráfico.
Finalmente, algunas sencillas modificaciones para mejorar el gráfico. Agregué algunos subtítulos con estilo al gráfico y cambié el color de la etiqueta para hacerla más contrastante.
Lo último que quiero ajustar es el color de la burbuja al pasar el cursor sobre ella.
¡Mirar! ¡Tenemos una visualización de gráficos de burbujas fascinante y efectiva basada en JavaScript que puede mostrar datos de resultados electorales de EE. UU. Por estado!
En conclusión
Como puede ver, es muy fácil y emocionante usar bibliotecas de JavaScript para crear visualizaciones de datos interactivas (como gráficos de burbujas). Puede buscar otras bibliotecas de gráficos de JavaScript y encontrar más información sobre ellas.
Espero que este tutorial lo haya hecho interesado en la visualización de datos y lo haya emocionado para comenzar a explorar gráficos de JavaScript. No dude en hacer cualquier pregunta, proporcionar sugerencias o dejar comentarios. En general, ¡no espere para comenzar a crear visualizaciones hermosas y útiles!
Recomendación de productos relacionados:
AnyGantt : una herramienta ideal para crear diagramas de Gantt complejos y enriquecidos
AnyMap: el mapa interactivo es un componente de AnyChart
Solución de gráficos financieros AnyStock-Flash basada en XML / JSON
APS ayuda a mejorar la eficiencia de producción de las empresas, realizar realmente la presentación visual y el control de los planes de producción, responder rápida y eficazmente a los planes de producción en diferentes escenarios, mejorar las capacidades de entrega a tiempo y aumentar la capacidad de producción y la utilización de recursos.