๐ŸŽจ From waiting time metrics to Generative art

adriens - Jun 30 '22 - - Dev Community

โ” 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
Enter fullscreen mode Exit fullscreen mode

Then boot the solution :

docker-compose up -d
docker-compose ps
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

๐ŸŒŒ Orbit light version

Then a lightest version of the previous one :

firefox http://localhost/orbit.min.html
Enter fullscreen mode Exit fullscreen mode

โ›น๏ธ 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
Enter fullscreen mode Exit fullscreen mode

๐Ÿ•ณ๏ธ 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
Enter fullscreen mode Exit fullscreen mode

๐Ÿฟ Live demo

Below a live demo from scratch :

๐Ÿ™ Acknowledgements

All that work would have not been possible without talents and highly engaged team members :

๐Ÿ”– Resources

๐Ÿค“ Source code

GitHub logo opt-nc / generative-art-temps-attente

Des projets d'art gรฉnรฉratif web autour des temps d'attente des agences

semantic-release Test, Release Docker Image Docker Pulls Docker Image Size (latest by date) Docker Stars Docker Image Version (latest by date)

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
Enter fullscreen mode Exit fullscreen mode

๐ŸŽ† Pour accรฉder aux visualisations

๐Ÿ”– Ressources






๐Ÿ›๏ธ API on RapidAPI.com

Image description

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .