Design web & mobile

Data-Play | Colorizon

Data-quoi ?

Réunis autour de la ville de Namur, il nous a été demandé de créer une visualisation de données. Plusieurs choix s’offraient à nous : nous concentrer sur les bâtiments, les zones ou les routes. Puisque Monsieur Delfosse avait commencé à taguer les routes avec des catégories spécifiques, nous avons eu l’idée d’utiliser une partie de son travail.

L’idée a été trouvée dès les premiers jours : recréer la carte de Namur selon les catégories (tags) avec des couleurs différentes, le tout avec un effet néon, et offrir quelques informations supplémentaires concernant le nom des rues.

Mais encore ?

C’est bien beau d’avoir l’idée… Maintenant il faut la réaliser ! Et il faut bien avouer que les débuts ont été assez chaotiques. Nous avons obtenu la carte de Namur en SVG de la part de Monsieur Thérasse, mais fallait-il encore trouver comment l’utiliser.

D’autant qu’il nous a fallu dompter le JavaScript… Et nous n’étions pas du tout à l’aise avec l’idée. Qui plus est, avec notre idée, il nous a fallu compléter le fichier CSV de Monsieur Delfosse pour avoir les tags de l’ensemble des rues. Et faire encore d’autres recherches pour obtenir le texte mis dans la box, le lien et les images. Pfiou !

Fichier CSV.

Ca donne envie, pas vrai ? Combien de lignes déjà… ? 1759. Rien que ça. Et je vous épargne une jolie capture d’écran du json complété pour les dix premières rues de chaque catégorie. (Nous avions 9 catégories en tout).

Une fois ces étapes ennuyeuses passées, nous passons à la réalisation… Et au JS ! Commençons déjà à grincer des dents.

La réalisation.

Le JavaScript, ce n’est pas si dur que ça… Mais avec le SVG en plus ? Disons que ça n’a pas été une partie de plaisir pendant les neuf jours de workshop. Et les boucles dans les boucles… L’horreur ! Néanmoins, nous sommes parvenus à le rendre docile et à faire ce que nous prévoyions… Ou presque. Tenter l’effet glow sur le SVG nous a semblé trop compliqué, c’est pourquoi nous sommes restés sur l’idée des couleurs saturées.

Mais tout ça n’a pas été vain. En effet, le résultat obtenu correspond tout à fait à l’idée de départ que nous en avions !

Exemple de la carte finalisée.

Vous aurez également l’occasion de connaître le nombre de routes totales que nous avons répertorié et le nombre de routes en fonction des catégories avec de jolis pictogrammes.

Nous espérons tous les quatre que vous apprécierez le résultat de notre workshop autant que nous avons apprécié (au final !) le faire. Ca a été extrêmement laborieux mais très instructif sur beaucoup de points. Et nous sommes vraiment fiers de voir que nous pouvons réaliser quelque chose de semblable à ce que nous avions imaginé sur le papier.

     Projet au hasard