Krypton Solid

Diversión con la física en la visualización de datos

Diversión con la física en la visualización de datos

La visualización de datos va en aumento. Los editores de todo el mundo, tanto los blogueros individuales como las principales publicaciones en línea, se están dando cuenta de que los gráficos, mapas y combinaciones de los dos pueden transmitir un mensaje de manera mucho más eficaz que los números simples. Desde gráficos simples hasta elegantes infografías y complejas animaciones de línea de tiempo, Las visualizaciones de datos están apareciendo en Internet.. Sin embargo, como en cualquier otra área, una vez que todos se suben al tren, distinguirse de la manada se vuelve difícil.

La visualización de datos va en aumento. Los editores de todo el mundo, tanto los blogueros individuales como las principales publicaciones en línea, se están dando cuenta de que los gráficos, mapas y combinaciones de los dos pueden transmitir un mensaje de manera mucho más eficaz que los números simples. Desde gráficos simples hasta elegantes infografías y complejas animaciones de línea de tiempo, Las visualizaciones de datos están apareciendo en Internet.. Sin embargo, como en cualquier otra área, una vez que todos se suben al tren, distinguirse de la manada se vuelve difícil.

Siga leyendo para descubrir cómo un motor de física realmente puede diferenciar sus esfuerzos.

Otras lecturas en SmashingMag:

No es necesario que busque muy lejos ejemplos de visualización de datos. Tome la vista en tiempo real de Google Analytics, que coloca burbujas de varios tamaños sobre un mapa para ilustrar información cuantitativa:

Un mapa de burbujas de muestra (Imagen: Google analitico) (Ver versión grande)

O tome el «Mapa del mundo petrolero”Realizado por New York Times (que, dicho sea de paso, hace muchos bonitas visualizaciones de datos). Ese mapa hace el trabajo, pero apuesto a que la mayoría de ustedes se ha encontrado con mapas más elegantes, en los que las burbujas nunca se superponen para formar un mapa distorsionado y donde las burbujas más grandes empujan a las más pequeñas fuera de lugar, como en el mapa de abajo. también por el New York Times:

Ejemplo de mapa de burbujas.
Otro mapa de burbujas (Imagen: New York Times) (Ver versión grande)

Mapas como este son especialmente buenos cuando relativamente pocos países han asignado valores; después de todo, no todos los países ganan una medalla en los Juegos Olímpicos. Si las burbujas se colocaran directamente sobre sus respectivos países, se superpondrían y el resultado no sería tan agradable a la vista.

Habiendo trabajado en la biblioteca de visualización de datos. amCharts Durante años, siempre busco formas de ayudar a los usuarios a visualizar los datos de formas creativas y estéticamente agradables y que transmitan su mensaje de forma eficaz. Los mapas como los que se analizan en este artículo son sin duda un buen medio para transmitir información geográfica cuantitativa. Siga leyendo para descubrir cómo hacer que esto suceda.

Las funciones predeterminadas de nuestra biblioteca de mapas, JavaScript Maps, le permiten generar un mapa de burbujas estándar con bastante facilidad:

Ver la pluma Mapa con burbujas por amCharts (@amcharts) en CodePen.

El mapa de arriba ya se ve bien y su implementación es muy fácil, pero la superposición sigue siendo un problema. Resolvamos eso.

Podría intentar escribir mi propio script para detectar y resolver colisiones (no es una tarea fácil). Por mi propia experiencia en el desarrollo de juegos, sé que todas las bibliotecas de simulación de física tienen incorporada la detección de colisiones. Usemos una de esas.

Pero, ¿por qué detenerse ahí? Debido a que estamos aprovechando el poder de estas bibliotecas, también podemos usar sus otras funciones. Hagamos que nuestros gráficos se animen con un movimiento realista para un resultado realmente impresionante que sin duda captará la atención del usuario.

Hay disponibles un montón de bibliotecas de física JavaScript listas para usar. He elegido probablemente el más famoso: uno de los puertos JavaScript de Box2D, box2dweb. La idea es sencilla. Tenemos un mapa con burbujas, y tenemos un mundo box2d (invisible para el usuario) del mismo tamaño con las mismas burbujas replicadas en él.

Usaremos el mundo box2d (invisible) para simular el movimiento y la interacción de las burbujas (como la detección de colisiones y otras cosas), para monitorear las posiciones de las burbujas y modificar dinámicamente esas posiciones en el mapa. No entraré en detalles técnicos, puede ver el código fuente si lo desea. Para evitar que las burbujas caigan, simplemente ajustamos la gravedad a 0. Y aquí está el resultado:

Ver la pluma Burbujas en lugar de países + Gravedad por amCharts (@amcharts) en CodePen.

Genial, ¿no es así? Ahora, estoy pensando en cambiar el tamaño de algunas burbujas en tiempo de ejecución y dejar que las otras burbujas se muevan en consecuencia. Para hacer eso, tenemos que escalar la burbuja del mundo box2d y la burbuja del mapa juntas y simplemente observar lo que sucede. Después de algunas pruebas, veo que esto podría funcionar aumentando el tamaño de las burbujas, pero no reduciéndolas; las burbujas que se desplazan antes de que otras burbujas grandes se reduzcan de tamaño no regresan:

Ver la pluma Burbujas en lugar de países + cambiar tamaño por amCharts (@amcharts) en CodePen.

Necesitamos una solución más compleja. Después de experimentar un poco, llegué a esto:

  1. Crea un objeto estático en el medio de cada país que permanezca siempre en su sitio.
  2. Haga de este objeto un «sensor», para que otros objetos no choquen con él.
  3. Cree una unión entre el sensor fijo y la burbuja, y ajuste las propiedades de esta unión para permitir cierto movimiento, pero sin dejar de ser atraído por la posición del sensor.

Eso funciona muy bien:

Ver la pluma Burbujas en lugar de países + redimensionamiento de trabajo por amCharts (@amcharts) en CodePen.

Solo para mostrar lo que se puede hacer con un motor de física, a continuación se muestra otra demostración que hicimos, un mapa del consumo mundial de café. Antes de que pregunte, inventamos completamente los datos.

Nuestro enfoque técnico para este mapa es el mismo que el de la última demostración anterior. La única diferencia es que las burbujas inicialmente no se unen a sus ubicaciones de destino, sino que se colocan en el medio de la imagen, justo encima de la cafetera. La taza de café está formada por tres rectángulos en box2d. Si quita el comentario de todas las líneas sobre «dibujo de depuración» (dos lugares en la fuente de JavaScript y en el elemento de lienzo en HTML), podría obtener una vista de dibujo de depuración de box2d (muy útil cuando se hace un trabajo como este):

Depurar wireframes para motor de física.
Un wireframe para depurar la física en nuestro tablero imaginario (Ver versión grande)

Impresionante, ¿no es así? Y son solo unas 500 líneas de código (sin contar los datos).

Ver la pluma Mapa + Física + Café por amCharts (@amcharts) en CodePen.

Conclusión

Los motores de física no son solo para juegos y simulaciones especializadas. Nos permiten agregar efectos asombrosos y, con solo unas pocas líneas de código, resolver problemas de geometría que, de otro modo, nos hubieran llevado semanas, si no meses, para construir por nuestra cuenta.

Nos hemos centrado aquí en el motor box2d, que es robusto y potente, pero puede volverse un poco lento en dispositivos más lentos. Hay muchos motores disponibles. Le animamos a que pruebe algunos para ver cuál encaja mejor con usted o cuál se adapta mejor a la tarea en cuestión. Si solo necesita resolver un problema de superposición, por ejemplo, entonces una opción liviana podría funcionar igual de bien, y con una huella mucho más pequeña y una sobrecarga de procesamiento mucho menor.

Prácticamente no hay límite para lo que puede hacer con la física de las visualizaciones de datos. Cree gráficos de columnas y haga que caigan como fichas de dominó, o haga que los gráficos circulares rueden, reboten y más. Puede hacer que los objetos en gráficos y mapas rueden, giren, reboten, cambien de forma y se transformen de manera que capten la atención del espectador mucho más rápidamente que las versiones estáticas o incluso interactivas normales.

Encontrará más ejemplos sofisticados y herramientas para la visualización de datos en el amCharts sitio web.

Deja un comentario