Visualización de datos en diseño web: 12 ejemplos impresionantes
Datos, datos, en todas partes. ¿Pero qué haces con eso? Hoy, hemos recopilado 12 ejemplos asombrosos de visualizaciones de datos en el diseño de sitios web para impulsar su pensamiento sobre cómo trabajar con datos.
Vivimos en una época en la que la capacidad de mostrar datos de formas nuevas e interesantes puede ser un gran activo como diseñador.
Ya sea que tenga una colección masiva de números o solo información que desee mostrar, este estilo de diseño puede ser una gran herramienta en su kit.
Explore los elementos de Envato
1. Historia de la NFL
Con décadas de datos que abarcan 32 equipos, hay mucha información disponible sobre los juegos en la NFL. FiveThirtyEight lo resumió en una serie de gráficos interactivos que puede ver por equipo para ver los flujos y reflujos de la historia del fútbol.
Lo mejor de esta visualización de datos es que es súper simple. Las líneas muestran victorias y derrotas. Pero con clics y desplazamientos, los datos cobran vida: puede obtener puntajes, fechas y registros para cada juego superpuesto en un mapa de los promedios para toda la liga. (Para que pueda ver si su equipo está adelante o detrás de la manada).
2. Selfiecity
Los selfies son más que un divertido conjunto de fotos. Selfiecity utiliza visualizaciones de medios enriquecidos para reunir miles de fotos para encontrar información demográfica sobre las personas que las toman.
Lo bueno de este conjunto de datos es que, si bien es todo visual: miles de fotos, puede comenzar a ver patrones, como el estilo de selfie que las personas toman en diferentes lugares, ya sea que las mujeres o los hombres tomen más fotos y las edades de los selfies. tomadores Si bien hay algunas estadísticas y números aquí, estos datos se trazan utilizando fotos en una cuadrícula gigante.
3. El vocabulario más grande en Hip Hop
Este proyecto de ThePudding muestra que los datos no siempre tienen que estar numerados. Analiza la cantidad de palabras únicas utilizadas en las letras de hip hop y traza los vocabularios más grandes por la cantidad de palabras con imágenes del artista.
Así es como funciona: “Compara la cantidad de palabras únicas utilizadas por algunos de los artistas más famosos del hip hop (es decir, un ejemplo de una visión cuantitativa del lirismo, una vez propuesta por Tahir Hemphill). Usé las primeras 35, 000 letras de cada artista. De esta forma, artistas prolíficos, como Jay-Z, pueden compararse con artistas más nuevos, como Drake ".
El diseño simple en blanco y negro de la tabla trazada es visualmente interesante y hace que sea fácil ver qué artistas están por delante del grupo. (O puede usar las herramientas más interactivas y buscar artistas específicos). También puede ordenar por época, siendo la década de 2000 la más robusta líricamente.
4. Revisión del año de Shopify
Dale sabor a un conjunto de datos anuales con un sitio web basado en hacer que todo sea visual. La revisión 2016 de Shopify es una recopilación de datos de informes anuales en un paquete fácil de leer.
El sitio se desplaza en bloques de página con hechos e información en todo momento. La visualización del estilo de la línea de tiempo se desplaza más profundamente en enlaces con gráficos y otros cuadros numéricos. Este sitio muestra que incluso con muchos números, puedes crear algo sorprendente y moderno.
5. Rutinas diarias de personas creativas famosas
No te dejes engañar por la barra de pensamiento o los gráficos de líneas son aburridos. Este sorprendente conjunto de líneas muestra datos interesantes que muestran cómo algunas creativas bastante famosas pasaron sus días. (Y hay mucha comida y tiempo libre allí).
Lo que hace que esta visualización de datos funcione es el color. Cada línea significa algo. Cada color contrasta marcadamente con los colores que lo rodean para que cada información sea fácil de ver y comprender.
6. Cayendo a través de la brecha
Esta visualización interactiva de datos de la BBC es brillante. Un conjunto de cambios de puntos animados en la acción de desplazamiento muestra información compleja de un vistazo.
Las animaciones y la idea detrás de esta infografía interactiva están bien planificadas y ejecutadas.
7. Cada eclipse solar total que ocurre
Esta visualización de datos combina un poco de magia, animación y datos científicos geniales para proporcionar información personalizada sobre cuándo (y si) puede ver un eclipse solar.
Comienza con su año de nacimiento para un informe personalizado. Aquí está el mío (tenga en cuenta que la extracción de datos es de 2017): “Si nació en 1980, tiene (o tendrá) 37 años este año. Si vives hasta los 100 años, habrá 43 eclipses solares totales más en todo el mundo en tu vida. Muchos estarán en América del Sur. Uno solo se eclipsará sobre el agua ".
Los datos se expanden aún más en explicaciones de cómo funciona un eclipse y rutas para el evento 2017.
8. Mapa del viento
¿Dónde sopla el viento?
Este mapa muestra las velocidades del viento y los promedios de los Estados Unidos en tiempo real. Los datos meteorológicos se transfieren a un simple mapa en blanco y negro que muestra patrones de viento en movimiento en todo el país. (Tengo que admitir que solo ver la animación es bastante adictivo ... y relajante).
9. Cómo cada miembro llegó al Congreso
El mapeo de datos es una experiencia exhaustiva y altamente informativa. Este mapa de datos interactivo muestra el camino de cada congresista y congresista en los EE. UU.
Puede realizar un seguimiento de la educación, el empleo y otras experiencias políticas. (Es sorprendente la cantidad de caminos similares que hay). Sumérgete más en los datos observando los caminos individuales de los políticos.
10. Las mayores violaciones y piratas informáticos del mundo
Si está buscando datos que se vean bien, Information is Beautiful es un buen lugar para comenzar. Este gráfico circular traza violaciones de datos de 30, 000 registros o más desde 2008 hasta el presente.
Los tamaños de los círculos representan la magnitud de la infracción y es fácil ver dónde pudo haber quedado atrapada su información en un hack de datos. Pase el cursor sobre cualquier círculo para obtener más información sobre la brecha. El diseño del estilo de la línea de tiempo también muestra algo más: el gran aumento de las infracciones anualmente.
11. ¿Por qué su teléfono inteligente le está causando el síndrome de "cuello de texto"?
Algunas de las mejores visualizaciones de datos tejen hechos y una historia para proporcionar una imagen más completa de la información. Ese es el caso con esta guía de "cuello de texto".
Pequeñas gráficas de datos, usando hechos y números, se mezclan con datos animados que muestran cambios de postura para mostrar (no decir) exactamente lo que está sucediendo en este fenómeno que comenzó con números de casos de "cuello de texto". Es una excelente manera de explicar algo visualmente que de otra manera no tendría mucho sentido.
12. Guía ilustrada de 2, 339 muertes en 'Juego de tronos'
Utilice ilustraciones para hacer una visualización de datos atractiva también. The Washington Post documentó cada muerte en el popular programa "Game of Thrones", con una guía ilustrada.
Las ilustraciones y la codificación de íconos muestran muertes en un vistazo con acciones de clic que entran en más detalles. Además, todo está organizado por temporada (y ubicación y tipo de personaje si está interesado). Para demostrar que esto es más que divertido, existe una metodología completa de cómo funciona y qué "cuenta" como una muerte.
Conclusión
El uso de visualizaciones de datos está prácticamente en todas partes. Vivimos en una era basada en datos, donde las personas se sienten atraídas por la información y el conocimiento.
Poder hervir grandes cantidades de datos en un diseño utilizable es una habilidad valiosa que puede ayudarlo en varios proyectos. Y si aún no se le ha pedido que haga esto, es probable que lo haga pronto.
