Design web & mobile

Bubble Map – Explore differently

DATA VISUALISATION WORKSHOP

C’est parti: 4 étudiants, un peu plus d’une semaine, un fichier de données JSON, les bases sont posées, l’objectif étant d’utiliser ces valeurs comme on le souhaite pour les faire découvrir à des utilisateurs. Encore débutant dans l’utilisation de fichiers Json et amateurs en Javascript, ce workshop était un gros challenge pour nous 4.

 

NOTRE PROJET

Les données étaient des noms de routes, de zones, de bâtiments ainsi que leurs positions géographiques. Nous avons choisi de travailler sur la visualisation de Bâtiments, plus spécialement dans la découverte de ceux-ci. Nous voulions à tout prix nous séparer de l’aspect classique de carte. Notre objectif était de trouver un moyen ludique de faire découvrir une ville à un utilisateur et quoi de mieux qu’un jeu d’exploration pour cela.

 

BUBBLE MAP

Nous sommes parti sur l’idée de repérage sans carte, avec comme modèle le jeu « chaud ou froid ». Selon la proximité qu’un utilisateur a avec un bâtiment, celui-ci grossit sur un plan fictif.

Bubble map visu

Chaque point représente un bâtiment. Les couleurs correspondent au type du bâtiment, au clic on peut savoir le nom de celui-ci. Comme ça, on part en exploration !

 

RÉALISATION

Notre projet a été ajusté, à la base, nous voulions prendre en compte la direction des bâtiments, mais nous manquions de temps et nos capacités en Javascript et d3.js n’étaient pas suffisantes, nous avons donc simplifié. De plus, la version finale est un prototype, nous ne prenons pas en compte la position réelle, vous avez simplement un aperçu de ce que ça rendrait. En théorie, vous seriez le point noir.

 

FINALITÉ

L’apprentissage et l’utilisation de d3.js (data driven document) fût complexe. En effet il fallait réapprendre toute une documentation et celui-ci était tellement complet qu’il fallait ré-apprendre tout à 0. Mais nous sommes fiers du rendu final; le fruit d’un travail acharné.

 

     Projet au hasard