Visualisation des données dans la conception Web: 12 exemples étonnants
Des données, des données, partout. Mais qu'en faites-vous? Aujourd'hui, nous avons collecté 12 exemples étonnants de visualisations de données dans la conception de sites Web pour relancer votre réflexion sur la façon de travailler avec les données.
Nous vivons à une époque où la capacité de présenter des données de manière nouvelle et intéressante peut être un énorme atout en tant que concepteur.
Que vous ayez une énorme collection de chiffres ou simplement des informations que vous souhaitez mettre en valeur, ce style de conception peut être un excellent outil dans votre kit.
Explorez Envato Elements
1. Histoire de la NFL
Avec des décennies de données couvrant 32 équipes, de nombreuses informations sont disponibles sur les matchs dans la NFL. FiveThirtyEight a tout résumé dans une série de graphiques interactifs que vous pouvez visualiser par équipe pour voir les flux et reflux de l'histoire du football.
La meilleure chose à propos de cette visualisation de données est qu'elle est super simple. Les lignes indiquent les victoires et les pertes. Mais avec des clics et des survols, les données prennent vie: vous pouvez obtenir des scores, des dates et des records pour chaque match superposés sur une carte des moyennes pour toute la ligue. (Vous pouvez donc voir si votre équipe est devant ou derrière le peloton.)
2. Selfiecity
Les selfies sont plus qu'une simple série de photos amusantes. Selfiecity utilise des visualisations rich media pour assembler des milliers de photos afin de trouver des informations démographiques sur les personnes qui les prennent.
Ce qui est cool avec cet ensemble de données, c'est que bien que tout soit visuel - des milliers de photos - vous pouvez commencer à voir des modèles, tels que le style de selfie que les gens prennent à différents endroits, que les femmes ou les hommes prennent plus de photos et l'âge du selfie - preneurs. Bien qu'il y ait quelques statistiques et chiffres ici, ces données sont tracées à l'aide de photos dans une grille géante.
3. Le plus grand vocabulaire du hip-hop
Ce projet de ThePudding montre que les données ne doivent pas toujours être numérotées. Il analyse le nombre de mots uniques utilisés dans les paroles de hip hop et trace les plus grands vocabulaires par le nombre de mots avec des images de l'artiste.
Voici comment cela fonctionne: «Il compare le nombre de mots uniques utilisés par certains des artistes les plus célèbres du hip hop (c'est-à-dire, un exemple d'une vision quantitative du lyrisme, une fois proposé par Tahir Hemphill). J'ai utilisé les 35 000 premières paroles de chaque artiste. De cette façon, des artistes prolifiques, comme Jay-Z, peuvent être comparés à des artistes plus récents, comme Drake. »
La conception simple en noir et blanc du graphique est visuellement intéressante et permet de voir facilement quels artistes sont en avance sur le peloton. (Ou vous pouvez utiliser les outils plus interactifs et rechercher des artistes spécifiques.) Vous pouvez également trier par époque, les années 2000 étant les plus solides sur le plan lyrique.
4. Bilan de l'année Shopify
Pimentez un ensemble de données annuelles avec un site Web ancré dans le rendu visuel. La revue 2016 de Shopify est une collection de données de rapport annuel dans un package facile à lire.
Le site défile en blocs de type page avec des faits et des informations partout. La visualisation de style chronologique défile plus profondément dans les liens avec les graphiques et autres graphiques numériques. Ce site montre que même avec beaucoup de chiffres, vous pouvez créer quelque chose d'étourdissant et de tendance.
5. Routines quotidiennes de personnes créatives célèbres
Ne vous laissez pas berner en pensant que les graphiques à barres ou à courbes sont ennuyeux. Cet incroyable ensemble de lignes montre des données intéressantes qui montrent comment une créatrice assez célèbre a passé ses journées. (Et il y a beaucoup de nourriture et de temps libre là-dedans.)
Ce qui fait que cette visualisation de données fonctionne, c'est la couleur. Chaque ligne signifie quelque chose. Chaque couleur contraste fortement avec les couleurs qui l'entourent, de sorte que chaque élément d'information est facile à voir et à comprendre.
6. Falling Through the Gap
Cette visualisation interactive des données de la BBC est brillante. Un ensemble de changements de points animés sur l'action de défilement affiche des informations complexes en un coup d'œil.
Les animations et l'idée derrière cette infographie interactive sont bien planifiées et exécutées.
7. Chaque éclipse solaire totale se produit
Cette visualisation de données mélange un peu de magie, d'animation et de données scientifiques pour fournir des informations personnalisées sur quand (et si) vous pouvez voir une éclipse solaire.
Cela commence par votre année de naissance pour un rapport personnalisé. Voici le mien (notez que les données proviennent de 2017): «Si vous êtes né en 1980, vous avez (ou aurez) 37 ans cette année. Si vous vivez jusqu'à 100 ans, il y aura 43 éclipses solaires totales de plus dans le monde au cours de votre vie. Beaucoup seront au-dessus de l'Amérique du Sud. On n'éclipsera que sur l'eau. »
Les données se développent davantage en expliquant le fonctionnement d'une éclipse et les chemins de l'événement 2017.
8. Carte des vents
Où souffle le vent?
Cette carte montre les vitesses et les moyennes du vent pour les États-Unis en temps réel. Les données météorologiques sont portées sur une simple carte en noir et blanc, qui montre les modèles de vent en mouvement à travers le pays. (Je dois admettre que regarder l'animation est assez addictif… et apaisant.)
9. Comment chaque membre est arrivé au Congrès
La cartographie des données est une expérience exhaustive et très informative. Cette carte de données interactive montre le chemin de chaque membre du Congrès et membre du Congrès aux États-Unis
Vous pouvez suivre l'éducation, les emplois et toute autre expérience politique. (Il est assez étonnant de voir combien de chemins similaires existent.) Plongez plus profondément dans les données en regardant et en parcourant les chemins individuels des politiciens.
10. Les plus grandes violations et hacks de données au monde
Si vous recherchez des données qui ont fière allure, l'information est belle est un bon point de départ. Ce diagramme circulaire trace les violations de données de 30 000 enregistrements ou plus de 2008 à aujourd'hui.
La taille des cercles représente l'ampleur d'une violation et il est facile de voir où vos informations ont pu se retrouver dans un piratage de données. Survolez n'importe quel cercle pour en savoir plus sur la brèche. La conception du style de la chronologie montre également autre chose - l'augmentation pure et simple des violations chaque année.
11. Pourquoi votre smartphone vous cause-t-il le syndrome du «cou de texte»
Certaines des meilleures visualisations de données tissent des faits et une histoire pour fournir une image plus complète des informations. C'est le cas avec ce guide sur le «texte du cou».
De petits tracés de données - en utilisant des faits et des chiffres - se mélangent à des données animées qui montrent les changements de posture pour montrer (pas dire) exactement ce qui se passe dans ce phénomène qui a commencé avec un certain nombre de cas de «cou de texte». C'est un excellent moyen d'expliquer visuellement quelque chose qui pourrait ne pas avoir beaucoup de sens autrement.
12. Guide illustré de 2 339 décès dans «Game of Thrones»
Utilisez également des illustrations pour créer une visualisation de données intéressante. Le Washington Post a documenté chaque mort dans l'émission populaire, «Game of Thrones», avec un guide illustré.
Les illustrations et le codage des icônes montrent les décès en un coup d'œil avec des actions de clic qui entrent dans plus de détails. De plus, tout est organisé par saison (et emplacement et type de personnage si vous êtes intéressé). Pour prouver que c'est plus qu'un simple plaisir, il existe une méthodologie complète pour savoir comment cela fonctionne et ce qui «compte» comme un décès.
Conclusion
L'utilisation des visualisations de données est pratiquement partout. Nous vivons à une époque axée sur les données, où les gens sont attirés par l'information et le savoir.
Être capable de faire bouillir de grandes quantités de données dans une conception utilisable est une compétence précieuse qui peut vous aider dans un certain nombre de projets. Et si on ne vous a pas encore demandé de le faire, il est probable que vous le serez bientôt.
