Après une courte présentation sur le but de ce workshop, nous voilà lâchés par groupes de 4 pour trouver un sujet et des données.
On cherche quelque chose de pas trop complexe, qui serait jouant, sans être trop simpliste. Le temps doit être une donnée du projet. La météo? La pollution au cours du temps? La vente d'ordinateurs vs smartphone? J'ai un nouveau vélo et j'en suis très content, on peut sans doute trouver des données intéressantes relatives au vélo? Des temps de trajet? Les économies? Les bénéfices pour la santé?
Vient ensuite une présentation pour détécter des collisions entre des éléments. Voilà qui nous perd un peu. Les sujets auxquels on avait pensés jusque là ne se prêtent pas trop à ce genre d'interaction.
Il fait chaud et on manque d'air dans ce local. On va réfléchir et chercher chacun de son côté.
En lisant Offscreen dans le train, je lis une interview d'Ariel Waldman, qui cite des bases de données de la NASA. En allant voir ça de plus près, je découvre un bon gros paquet de données. En cherchant un tout petit peu, je tombe sur la liste des météorites découvertes sur terre. On peut en faire quelque chose.
On chipote au JSON qu'on obtient, et on tente des choses. On créé des éléments de tailles différentes selon les masses des météorites, qui vont de centièmes de grammes à 60 tonnes (le saviez-vous? La météorites Hoba est la plus lourde retrouvée sur terre, en Namibie, et mesure 2,7m sur 2,7m sur 0,9m et aurait potentiellement ricoché sur l'atmosphère).
Les différences de tailles sont immenses, les représenter en modifiant la taille des cercles serait difficilement gérable, je vais les représenter avec des variations de couleurs en utilisant une échelle logarithmique. J'essaie de placer tous ces points sur une carte. J'ai touché à LeafletJS et utilisé openstreetmap sur un autre projet donc je sais plus ou moins où commencer.
Le placement est plutôt simple, compte tenu du fait que les météorites ont chacune une latitude et une longitude. Je mets en place les petite boites d'infos propre à chaque météorite et la mise en place principale est terminée.
Reste un problème, les cercles sont de tailles différentes alors que leur rayon est sensé être le même. Je réalise qu'ils sont déformés par la projection de la carte, et qu'au plus ils sont proches des pôles, au plus ils sont grands. Après un peu de recherche, ce n'est pas un immense problème puisque je peux générer des "circleMarker" qui ne subissent pas cette déformation, mais qui demandent une autre manière de leur assigner des propriété, ce que j'ignorais et qui m'a frustré jusqu'à ce que je m'en rende compte.
Et là, les choses se compliquent. Mon but est de créer un slider qui servirait de ligne du temps pour sélectionner une année et afficher les météorites qui y ont été découvertes. Après avoir retourné le problème sous plusieurs angles, je ne trouve pas comment m'y prendre, et c'est là que les profs m'ont porté secours. On a finalement créé plusieurs tableaux en JS qui renvoient différentes informations pour, finalement, permettre ce système de "slider temporel".
J'ajoute également un bouton qui permet d'afficher tous les météorités qui pèsent plus de 100kg, pour à la fois avoir une carte remplie sans trop demander de ressources aux ordinateurs, et en faire l'affichage par défaut, pour ne pas arriver sur une carte vide.
Cet atelier était assez différent des autres, on a eu très peu de présentation, il était très court, la limite entre le travail de groupe et le travail individuel était un peu floue et il demandait pas mal de technique.
Je pense que mon résultat aurait pu être bien plus interactif, jouant ou fun, et j'ai eu beaucoup de mal avec le JS, mais j'ai l'impression d'avoir pas mal appris pour des prochains projets.