❔ Context
Recenlty we have published an API dedicated to waiting time in our (Post)-offices.
👉 See previous episode of the series.
To put in evidence the potential of that API we created an original P5*js based artwork datavizualization experience around that API.
In this post you'll discover what we could achieve... and if you like it to run it by yourself.
🎫 Core real world data display
In our agencies, here is how we display the data to customers :
⌨️ Install artwork
The install process is really straight forward :
First, clone the repo :
git clone https://github.com/opt-nc/generative-art-temps-attente.git
cd generative-art-temps-attente
Then boot the solution :
docker-compose up -d
docker-compose ps
That's it : you can now enjoy the datavisualization.
🎨 Enjoy artworks
Many kind of visualizations have been created. See below to discover them.
🌌 Orbit
First the default one.
Notice that rotation speed is based on the waiting time.
firefox http://localhost
🌌 Orbit light version
Then a lightest version of the previous one :
firefox http://localhost/orbit.min.html
⛹️ Jumpers
In this visualization each ball is a Post-Office, and the higher a ball is bouncing, the higher waiting queue are important.
firefox http://localhost/jumpers.html
🕳️ Gravity
Then this one where interactions are driven by gravity and speed.
Notice that each ball's mass is relying on the waiting time :
firefox http://localhost/gravity.html
🍿 Live demo
Below a live demo from scratch :
🙏 Acknowledgements
All that work would have not been possible without talents and highly engaged team members :
- 👧 Emilie Bossart : first API version
- 👨 Guillaume Bertherat : visualizations creator
- 🧔♂️ Daniel Santos : enhancements on the API and docker image publish automation
🔖 Resources
🤓 Source code
opt-nc
/
generative-art-temps-attente
Des projets d'art génératif web autour des temps d'attente des agences
Art Génératif (p5.js)
💬 Temps d'attente dans les différentes agences de l'OPT NC
Projet autour de la visualisation des données recueillies par les différentes agences de l'OPT NC.
👉 Tous les détails sur ce post dédié.
La visualisation est réalisée grâce à la librairie Javascript p5.js.
Ce projet utilise l'API REST des temps d'attente en agence OPT.nc.
🚀 Lancer les visualisations
⚙️ Ou localement
git clone https://github.com/opt-nc/generative-art-temps-attente.git
cd generative-art-temps-attente
docker-compose up -d
docker-compose ps
🎆 Pour accéder aux visualisations
- http://127.0.0.1/ (Projet par défaut : Orbit)
- http://127.0.0.1/orbit.min.html (Version allégée de métriques)
- http://127.0.0.1/jumpers.html
- http://127.0.0.1/gravity.html
🔖 Ressources
🛍️ API on RapidAPI.com
Top comments (8)
Live show at the office and sharing dataviz with collaborators :
Now just wait for the next 3 episodes 😎