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

 

 

 

  • Design System Planning and Process, with Nathan Curtis
  • Behavioral Design Workshop, with Susan and Guthrie Weinschenk

  • Índice
    1. Conclusión
      1. Otras lecturas

    Desde gráficos simples hasta infografías sofisticadas y animaciones de líneas de tiempo complejas, las visualizaciones de datos están apareciendo en Internet. Sin embargo, como en cualquier otro ámbito, una vez que todos se suben al tren, distinguirse del resto se vuelve difícil. Prácticamente no hay límite para lo que puede hacer con la física de las visualizaciones de datos. Crea gráficos de columnas y haz que caigan como fichas de dominó, o haz que los gráficos circulares giren, reboten y más. Puede hacer que los objetos en gráficos y mapas rueden, giren, reboten, cambien de forma y se transformen de maneras que capten la atención del espectador mucho más rápidamente que las versiones estáticas o incluso interactivas.

     

    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 ambos pueden transmitir un mensaje de manera mucho más efectiva que los simples números. Desde gráficos simples hasta infografías sofisticadas y animaciones de líneas de tiempo complejas, las visualizaciones de datos están apareciendo en todo Internet . Sin embargo, como en cualquier otro ámbito, una vez que todos se suben al tren, distinguirse del resto se vuelve difícil.

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

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

    O tomemos el “ Mapa del mundo petrolero ” elaborado por el New York Times (que, por cierto, ofrece muchas visualizaciones de datos interesantes ). Ese mapa hace el trabajo, pero apuesto a que la mayoría de ustedes se han encontrado con mapas más sofisticados, en los que las burbujas nunca se superponen para formar un mapa distorsionado y donde las burbujas más grandes desplazan a las más pequeñas fuera de lugar, como en el mapa a continuación. también por el New York Times:

    Mapas como este son especialmente buenos cuando relativamente pocos países tienen valores asignados; 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.

     

    Después de haber trabajado en la biblioteca de visualización de datos amCharts durante años, siempre estoy buscando formas de ayudar a los usuarios a visualizar datos de manera creativa y estéticamente agradable y que transmitan eficazmente su mensaje. Mapas como los que se analizan en este artículo son sin duda un buen medio para transmitir información geográfica cuantitativa. Continúe leyendo para descubrir cómo hacer que esto suceda.

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

    Vea el Pen Map con burbujas de 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í? Dado que estamos aprovechando el poder de estas bibliotecas, también podemos utilizar sus otras funciones. Hagamos que nuestros gráficos se animen con movimientos realistas para obtener un resultado realmente impresionante que sin duda captará la atención del usuario.

    Hay disponibles un montón de bibliotecas de física de JavaScript listas para usar. Elegí 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 (que se hace invisible para el usuario) del mismo tamaño con las mismas burbujas replicadas en él. Juegos borrados de la play store

    Usaremos el mundo (invisible) box2d 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; puedes ver el código fuente si lo deseas. Para evitar que las burbujas caigan, simplemente configuramos la gravedad en 0. Y aquí está el resultado:

    Vea Pen Bubbles en lugar de países + Gravity de amCharts ( @amcharts ) en CodePen .

    Genial, ¿no? 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 reduzcan su tamaño no regresan:

    Vea las burbujas del lápiz en lugar de los países + cambie el tamaño mediante 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 siempre permanezca en su posición.
    2. Haga de este objeto un “sensor” para que otros objetos no colisionen con él.
    3. Cree una unión entre el sensor fijo y la burbuja, y ajuste las propiedades de esta unión para permitir algo de movimiento pero siempre siendo atraído por la posición del sensor.

    Eso funciona muy bien:

     

    Vea Pen Bubbles en lugar de países + cambio de tamaño funcional mediante amCharts ( @amcharts ) en CodePen .

    Sólo 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 preguntes, inventamos completamente los datos.

    Nuestro enfoque técnico para este mapa es bastante similar al de la última demostración anterior. La única diferencia es que inicialmente las burbujas no están unidas a sus lugares previstos, sino que se colocan en el centro de la imagen, justo encima de la cafetera. La taza de café se compone de tres rectángulos en el cuadro 2d. Si descomentas 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ías obtener una vista de depuración-dibujo de box2d (muy útil al hacer un trabajo como este):

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

    Vea Pen Map+Physics+Coffee de amCharts ( @amcharts ) en CodePen .

    Conclusión

    Los motores de física no son sólo para juegos y simulaciones especializadas. Nos permiten agregar efectos sorprendentes y, con solo unas pocas líneas de código, resolver problemas de geometría que de otro modo nos habrían llevado semanas, si no meses, 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 recomendamos que pruebe algunos para ver cuál encaja con usted o 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 un espacio mucho más pequeño 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. Crea gráficos de columnas y haz que caigan como fichas de dominó, o haz que los gráficos circulares giren, reboten y más. Puede hacer que los objetos en gráficos y mapas rueden, giren, reboten, cambien de forma y se transformen de maneras que capten la atención del espectador mucho más rápidamente que las versiones estáticas o incluso interactivas.

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

    Otras lecturas

    • Lo que se debe y no se debe hacer en el diseño infográfico
    • Visualizaciones de datos e infografías
    • Visualización de datos: enfoques modernos
    • Diseño de gráficos circulares flexibles y mantenibles con CSS y SVG

    (rb, il, al, mrn)Explora más en

    • Codificación
    • Visualización de datos
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

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

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

    Design System Planning and Process, with Nathan Curtis Behavioral Design Workshop, with Susan and Guthrie Weinschenk Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-diversion-con-la-fisica-en-la-visualizacion-de-datos-864-0.jpg

    2024-05-20

     

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

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20