Créer une dataviz ou visualisation de données

Créer une visualisation de données en temps réel

Contexte

Ce projet a pour objectif de développer une application web qui permette de visualiser des données de façon dynamique. Ce principe peut être pris de manière très large : ainsi, il peut s’agir de construire une page web affichant un graphique « classique » reflétant l’évolution de telle ou telle donnée. Mais il peut aussi s’agir de créer une animation mettant en scène des données de façon plus originale ou ludique (voir plus bas dans les idées proposées).

Contraintes générales

  • Groupes: libre
  • Langage: libre (selon le niveau choisi)
  • Durée de la séquence: 2 semaines

Outils à utiliser

  • Un éditeur de texte
  • Un navigateur Web (par exemple, Firefox)
  • Git
  • Github ou Gitlab (ou assimilé, avec un compte)
  • Miro pour partager facilement et s’organiser en équipes
  • Outil de conférence pour partager son écran (type Jitsi)

Pour partager votre projet en équipe, créez un dossier dans le répertoire Github suivant:

Si vous souhaitez utiliser ce projet pour nourrir votre portfolio, n’hésitez pas à le « forker » pour le récupérer sur un compte personnel.

Orientation du projet

Objectifs globaux pédagogiques

Personnel

  • Découvrir le traitement de données en temps réel
  • Explorer des possibilités d’animation web
  • Se confronter aux choix d’architecture que présente la conception de tout applicatif

Collectif

  • Travailler son organisation d’équipe
  • Découper le projet en tâches et en domaines
  • Trouver un mode de travail en groupe qui permette de mobiliser toutes les apprenantes de l’équipe
  • Se distribuer les domaines
  • Se concerter sur les points de rencontres de nos domaines respectifs

# Je débute

Visualiser le temps qui passe

Nous vous proposons de créer une animation simple qui dépende de l’heure actuelle. Par exemple, il pourrait s’agir de dessiner un arbre qui aurait de nouvelles feuilles toutes les X secondes, et dont la couleur dépendrait du moment de la journée.

Pour ce niveau, le langage utilisé sera automatiquement Javascript afin de vous permettre de faire faire tout le traitement par le navigateur

Objectifs pédagogiques

Personnel
  • Découvrir l’asynchrone
  • Se familiariser avec une bibliothèque d’animation graphique Javascript
  • Se poser la question de la durée de vie de son applicatif
  • Manipuler du CSS et du HTML
Collectif
  • Discuter d’un projet commun avec d’autres personnes pour débattre / faire des choix
  • Mettre en place un environnement Web permettant de travailler en groupe sur le même projet

# Je suis à l’aise avec certains langages

Dans ce cas de figure, la connexion à une source de données externe pourrait aussi bien se faire du côté du navigateur que du côté du serveur

1. Se connecter à une API

Choisir parmi les APIs disponibles sur Internet une source de données à laquelle se connecter, et gérer l’affichage et la mise à jour de votre visualisation en temps réel sur la base des données renvoyées par l’API

Objectifs pédagogiques
Personnel
  • Appréhender la notion d’API, et la façon interagir avec
  • Comprendre l’impact de vos choix d’architecture sur l’utilisation de votre applicatif
Collectif
  • Faire un travail d’équipe pour rechercher et comparer les APIs possibles à utiliser pour ce projet
  • Travailler en équipe pour se découper les taches à effectuer pour mener à bien le projet

2. Faire du scraping de page web

Votre visualisation de données peut alternativement utiliser comme source une page web existante : il s’agit alors de comprendre la structure de cette page afin d’en extraire les données qui vous intéressent et les afficher dans votre propre visualisation de données

Personnel
  • S’initier au scraping et trouver la meilleure stratégie pour récupérer les données qui vous intéressent
  • Appréhender les problématiques de retraitement des données
  • Faire des choix d’architecture par rapport à l’objectif
Collectif
  • Expliciter un découpage de tâches cohérent au sein de l’équipe
  • Travailler sur des briques de l’applicatif en interface et se concerter sur les échanges à mettre en place entre ces briques

# Je veux aller plus loin

1. Créer une API

En utilisant une base de données existante (par exemple, la liste de défibrillateurs disponibles dans des espaces publics à Paris), créer un serveur Web qui mette à disposition celle-ci via une API. Il s’agira donc de pouvoir recevoir des requêtes comprenant par exemple une localisation pour renvoyer ensuite les adresses des deux défibrillateurs les plus proches de cette localisation. Votre API pourra donc être utilisée par n’importe quel applicatif qui lui envoie des requêtes.

2. Croiser les données de deux sources différentes pour les afficher

Créer un serveur qui se connecte à deux sources de données différentes et les croise pour présenter le résultat de ce croisement via une page Web. Par exemple, je cherche à acheter des fleurs d’hibiscus séchées, la page web me renvoie tous les magasins à proximité qui en vendent en les classant par prix (il s’agira alors de se connecter tour à tour à différentes sources de données pour les agréger).

Objectifs pédagogiques
Personnel
  • Manipuler des données de sources (et potentiellement de formats) différents
  • Designer une API vouée à être publique
Collectif
  • Discuter et décider ensemble du meilleur design pour votre API

Ressources

Pour créer une visualisation de données :

Pour « scraper une page web » :

Pour comprendre la notion d’API :

Quelques endroits où aller chercher des données :

2 J'aimes