---
title: 'Data et représentation graphique'
disqus: hackmd
---

# **Data et représentation graphique** ou comment simplifier et rendre lisible la complexité ?

<i class="fa fa-tag"></i> e-artsup <i class="fa fa-clock-o"></i> 29 avril-17 mai 2019

###### Tags: `e-artsup` `The Soft Machine` `Workshop`

> Ce document sert à communiquer entre nous durant toute la durée du workshop, n'hésitez pas à l'enrichir, à y poser vos questions etc.

## The Soft Machine Workshop #002
The Soft Machine est une association à but non lucratif. Les membres fondateurs sont : Bernard Baissait, Nathalie Bazoche, Victoire Dubruel, Tom Bücher, Christophe Salaün. Elle a pour objet la création et la diffusion d’outils numériques dédiés à l’édition.

www.thesoftmachine.org

## Sommaire

[TOC]

## Présentation des enjeux et problématiques.


**Sujet:** Data et représentation graphique,
Re-présenter le / un flux.

**Défintion:** Re-présentation: Présenter à l'esprit, rendre sensible (un objet, une chose abstraite) au moyen d’un autre objet (signe) qui lui correspond.

**Méthodologie proposée:** Il y a deux façons d'aborder ce sujet soit vous prenez en charge un flux spécifiques de votre choix, soit vous prenez en charge le flux en générale. (cf la partie Références)

* **Représenter un flux**
1. Choisir un flux
2. Trouver ou constituer votre base de données
3. Identifier les critères (en fonction de la bdd choisie) qui serviront à élaborer vos projets
4. Associer ces critères à des paramètres visuels
5. Écrire les conditions (le mode d'emploi) qui servira de base à l'écriture du programme

* **Représenter le flux**
1. En relation avec les projets *représenter un flux* vous imaginerez la scénographie de la restitution

## Références

### Représenter un flux (Design génératif)
* John Maeda (https://maedastudio.com/)
* Boris Müller (https://esono.com/)
* Superscript 2 (https://super-script.com/dead_site/)
* Zach Lieberman (https://www.instagram.com/zach.lieberman/)
* Louis Eveillard (http://louiseveillard.com/)
* Giorgia Lupi (http://giorgialupi.com/)
* Tim Rodenbroeker (https://timrodenbroeker.de/)
——
* Sol LeWitt
* Mark Lombardi
* Frank Leibovici
——
* Jean Boite Édition (https://jean-boite.fr/products/google-volume-1-by-king-zog)
* Word Tree (https://www.jasondavies.com/wordtree/)

### Représenter le flux (Restitution et spatialisation)
* Véronique Bélland (http://www.veroniquebeland.com/Veronique_Beland/This_is_Major_Tom_to_Ground_Control.html)
* Exposition au bout du rouleau (https://www.facebook.com/media/set/?set=a.1343094885717650&type=3&comment_id=1343114322382373&comment_tracking=%7B%22tn%22%3A%22R%22%7D)
* Louise Druhle (http://internet-atlas.net/)
* Joana Hadjithomas & Khalil Joreige (http://hadjithomasjoreige.com/trophy-room/)
* Claire Malrieux (http://claire-malrieux.com/Climat-General)
* Raphaël Bastide (https://raphaelbastide.com/)
* Low Tech Magazine (https://solar.lowtechmagazine.com/)

## Ressources

### Exemples de base de données
* Global Open Data Index https://index.okfn.org/
* La Liste rouge mondiale des espèces menacées: iucnredlist.org
* Liste des objets trouvés dans les trains: ressources.data.sncf.com
* Portail de la connaissance du territoire: www.geoportail.gouv.fr
* Les données du grand débat national: https://granddebat.fr/pages/donnees-ouvertes
* Les données publiques: https://www.data.gouv.fr/fr/
* Données de la ratp: https://data.ratp.fr/explore/?sort=modified
* Traffic aérien: https://www.flightradar24.com/data/
* Awesome Public Dataset: https://github.com/awesomedata/awesome-public-datasets#agriculture
* Nasa: https://earthobservatory.nasa.gov/
* IMDB: https://datasets.imdbws.com/
——
* ScamBaiters: https://www.419eater.com/
* Le domaine public:
* https://archive.org/index.php
* https://gallica.bnf.fr/accueil/fr/content/accueil-fr?mode=desktop
* https://publicdomainreview.org/

### Dispositifs hardware
* arduino
* https://www.arduino.cc/
* makey makey
* https://makeymakey.com/
* http://zoelecorre.fr/workshop-make-makey/
* https://www.youtube.com/watch?v=xvmTav3SYsc

### Librairies et logiciels utiles
* Processing (https://processing.org/)
* https://www.youtube.com/watch?time_continue=146&v=SKDhkB8g1So
* Openframeworks (https://openframeworks.cc/)
* Paper js (http://paperjs.org/)
* P5 js (https://p5js.org/)
* animate.css (https://daneden.github.io/animate.css/)

### Fonderie
* letterror.com/index.html
* https://usemodify.com/
* https://open-foundry.com/fonts
* http://velvetyne.fr/
* fonts.google.com
* Variable font
* https://v-fonts.com/
* https://www.axis-praxis.org

### Divers
* https://www.openprocessing.org/

## Projets
* **Groupe 1:**
* Alice Lemaire
* Guillaume Zhu
* Julie Chartraire

**Ressources :** opendata.paris.fr

https://opendata.paris.fr/explore/dataset/que-faire-a-paris-/api/?disjunctive.category&disjunctive.tags&disjunctive.address_zipcode&disjunctive.address_city&disjunctive.access_type&disjunctive.price_type&calendarview=month&location=14,48.86937,2.36661&basemap=jawg.streets

**Description du projet :**

*Explore est une expérience immersive, proposant de découvrir une ville à travers une sélection d'activités personnalisées et une interface onirique.*

*Basé sur les opens datas de la mairie de Paris, Explore géolocalise l'utilisateur, lui pose une série de questions et lui génère ensuite un visuel personnalisé. Ce visuel indique de manière abstraite les différents évènements disponibles à proximité, au moment de la recherche. En cliquant sur la forme de son choix, il aura alors accès aux informations relatives à l'événement.*

*Cette expérience permet aux visiteurs d'explorer la ville de manière plus sensorielle.*

**Interface de l'expérience :**

https://www.figma.com/proto/UGTFM3yBrS6Nj4FTzaYpNacM/Paris-Data?node-id=9%3A60&scaling=min-zoom

Filtres : https://docs.google.com/document/d/1fdzKR0Chrgxav6jYJAjC5PoIYw7tqEv9Zra21dyeWqI/edit?usp=sharing

**Critères de formes :**

https://docs.google.com/spreadsheets/d/12Gqx76FIOUMI_0baPt6qqUTocRqduhqGXxgkLIKArfM/edit?usp=sharing

Lien de la forme en svg : https://drive.google.com/file/d/1AXJjHrE1FDpIFpnMycKeoj_HotXbD1WF/view?usp=sharing

**Animation :**

1. Les formes bougent légerement sur le visuel généré.
*Exemple :* https://vincentgarreau.com/particles.js/#default
(json de l'exemple : https://drive.google.com/file/d/1YwplkTl8-stYTCXAOka5o7OSsnSWCM1x/view?usp=sharing)
--> Plus la forme est proche, moins la vitesse est élevée.
--> Plus la forme est éloignée, plus la vitesse est élevée.

2. Lorsque l'on clique sur une forme, un rond apparait sur la zone de clique (avec la couleur de la forme) puis s'agrandit jusqu'à recouvrir le background
*Exemple :* https://drive.google.com/file/d/1KAZl5058dFLzrrE6lmj2ib7nx9891yQs/view?usp=sharing

***

https://dev.onoci.net/e-artsup/geo/

Recherche longitude / lattitude :
https://www.google.fr/maps/@48.8405035,2.375349,13z
clic droit sur la carte -> plus d'infos sur cet endroit

Intégration: ~~https://we.tl/t-ZgYZlpC7vT~~

https://we.tl/t-4Njga3xLsp

---

* **Groupe 2:**
* Charles Desprez
* Laure Boyer

UCS Satellite Database : https://www.ucsusa.org/nuclear-weapons/space-weapons/satellite-database?_ga=2.2063220.453423575.1556609413-597798438.
Saltelites opérationels : https://github.com/futuraprime/satellites/blob/master/enigma-org-ucs-satellites-operational-7215ee9c7d9dc229d2921a40e899ec5f.csv.
The satellite situation report: https://www.space-track.org/#ssr.
Lancements et débris : https://www.esa.int/Our_Activities/Space_Safety/Space_Debris/Space_debris_by_the_numbers
https://www.esa.int/Our_Activities/Space_Safety/Space_Debris/Analysis_and_prediction/(print)
visuel de la Terre avec débris :
http://stuffin.space/?intldes=1975-052MR

estimation de chute des satelites
http://www.spaceacademy.net.au/watch/debris/orblife.htm
ellipse satellite and inclination:
http://www.spaceacademy.net.au/watch/track/orbspec.htm

**Résumé**
Représentation graphiques des satellites lancés par l'Homme, leurs trajectoires, situations et dans la continuitée représenter la pollution présente autour de la terre à cause de cette technologie. (Bientôt plus de GpS, incapacité à continué d’envoyer des sondes, satellites ou fusées car plus de place.)

**Premier test de représentation :** les satelites placés autours d'une Terre. Ellipses faites en fonction de leur *apogee* et *perigee*.
**Deuxieme test de représentation :** dezoom de la premiere image.
**Troisieme test de représentation :** DEBRIS, ROCKET BODY, SATELLITES
**Quatrième test couleur + arc**

**Fait :**
- rotation des objets en fonction de leur vitesse

**A Faire :**
- rotation dans un sens aléatoir
- degradé de couleur/opacité/épaisseur le long de la trainée
- dégradé d'opacité en partant du centre

**code de récuperation du json :**
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
obj = myArr[0].OBJECT_ID
}
};
xmlhttp.open("GET", "TLE.json", true);
xmlhttp.send();

**Représentation :** 3D, three.js, rendu partiel

**texte explicatif**
Wasted Sky

Wasted Sky est une campagne de sensibilisation contemplative des impacts de l’Homme suite
à la « conquête de l’espace ».
Notre stratosphère contient beaucoup de satellites et de débris résultants des lancements depuis la Terre (satellites détruis, morceaux de fusées, etc….). Plus d’un million sont en orbite actuellement, ce qui sera un problème technique pour les années à venir concernant les gps ainsi que les futures lancements.

l'expérience : L’expérience consisterait à plonger le spectateur dans une atmosphère calme et de contemplation pour ainsi lui faire prendre conscience de la « beauté » cruelle de l’oeuvre.
L’interaction sera entreposé dans un conteneur, à la vue de tous, une fois a l’intérieur, le spectateur se retrouvera face à une mise en scène spatial ( satellites : naturels et fabriqués par l’homme) et une projection du à un Pepper Ghost représentant de manière artistique les débris et objects volant en orbite autour de notre planète.

Le prospectus : Afin de communiquer autour de cette oeuvre, l’utilisation de flyer transparent permettrait de rappeler le coté holographique transmit durant l’expérience. Un format de photo polaroïd (600) sera utilisé dans le but que « Monsieur Toutlemonde » puisse se sentir concerné par ce sujet, comme s’il voulait garder une photo souvenir de l’oeuvre. De plus, cet élément permettrait d’informer le spectateur sur un satellite (nom, date et lieu de lancement) lui donnant aussi l’occasion de pouvoir retrouver le lieu exacte de la projection.

**Maquette**
Avec le couvercle (point de vue face, angle qu'il faudra mettre lors de la présentation (hauteur de l'oeil))
Sans le couvercle

**DONE**
-Rougier plié : carton gondolé, bombe peinture noire
-Ajouter la terre
-bomber le conteneur (intérieur+extérieur) + ajouter papier gondolé (ou autre sens si papier pas noir)
-Découper taille écran sur socle
-Impression sur transparent pour les polaroïdes
-Trouver le bon transparent pour la projection

**Things To DO**
-Ajouter le bonhomme
-Pause verte
-Placer la Terre
-Imprimer les flyers

**Évolution #1**
Première couche de bombe noire.

**Évolution #2**
Pause du papier gondolé + découpe socle.

**Évolution #3**
Deuxième couche de bombe noire + terre.

**Évolution #4**
Finition, test de projection.

**Photos**
Avec la Terre

Dans son context



---

* **Groupe 3:**
* Floriane Julliard
* Sabrina Hedjem

## La météo - en temps réel.

### Inspiration

<img style="display: block; max-width: 100%; height: auto; margin: auto;" src="https://i.imgur.com/7cjsOmf.gif"/>
<br/>
<img style="display: block; max-width: 100%; height: auto; margin: auto;" src="https://i.imgur.com/G9YUsNt.gif"/>
<br/>
<img style="display: block; max-width: 100%; height: auto; margin: auto;" src="https://i.imgur.com/qeMySzq.jpg"/>
<br/>
<img style="display: block; max-width: 100%; height: auto; margin: auto;" src="https://i.imgur.com/aBKKTFa.gif"/>
<br/>
<p style="text-align:center; font-weight:bold;">
<a href="https://openweathermap.org/">Data</a>
</p>

### Travail réalisé

#### Recherche au niveau du code pour la réalisation

https://codepen.io/Ak_/pen/dEPmmg

https://codepen.io/Ak_/pen/KLwpVJ

https://codepen.io/Ak_/pen/MdWEyg

https://codepen.io/Ak_/pen/YbzxQq

https://codepen.io/Ak_/pen/WBNoMq

#### TODO

* lier les data au visuel (avancées sur le premier lien codepen)
* pofiner le visuel (couleurs, légende..)
* créer un changement aléatoire pour les différentes villes
### Titre provisoire : Ascendance
### Résumé

(à choisir)

Nous vivons dans un monde ou chaque jour est nouveau, par le biais de nos activités, nos envies, les différents moments qui arrivent dans nos vies mais aussi par un autre facteur qui peut influencer ou impacter sur le programme de notre journée. Ce facteur n’est autre que le temps en effet tout comme notre cycle journalier qui change et qui se renouvèle sans cesse, le temps a aussi ses propres fonctions, ses propres habitudes. On sait que le temps ne se comporte pas de la même façon dans chaque ville, chaque région, chaque pays. Il est donc intéressant de comprendre le comportement de notre météo en temps réel par le biais de ses différents phénomènes météorologiques en exemple les avalanches, les cyclones, le brouillard, les orages, la grêle, la pluie… 
Nous avons donc eu l’idée d’analyser ces données en prenant en compte quelques-uns de ces phénomènes pour en faire un graphique ou plus précisément une Data visuelle vivante qui simulerait les différents spectres météorologique que nous pourrions rencontrer au cours de notre journée. 

---

Dans un monde ou chaque jour, est nouveau, nos activités, nos envies, les différents moments de notre vie sont tous influencés par un facteur qui nous dépasse : la météo. Tout comme nos journées toujours différentes, le ciel a ses propres fonctions et habitudes. Dans chaque ville, chaque région, chaque pays, le temps ne se comporte pas de la même façon. Il est donc intéressant d’expérimenter le comportement de notre météo en temps réel par le biais de ses différents phénomènes comme par exemple les avalanches, les cyclones, le brouillard, les orages, la grêle, la pluie… 
Nous avons donc eu l’idée d’analyser ces données en prenant en compte quelques-uns de ces phénomènes afin d’en faire un graphique, une Data visualisation. Grâce aux données en temps réel, nous pouvons simuler les différentes humeurs météorologiques dans chaque ville du monde. 

function getPNG()
{
var canvas = document.getElementById("canvas");
image = canvas.toDataURL("image/png", 1.0).replace("image/png", "image/octet-stream");
var link = document.createElement('a');
link.download = "my-image.png";

link.href = image;
document.body.appendChild(link);
link.click();
link.remove();
}

---

* **Groupe 4:**
* Mathilde Singler

# Feelings in Data

https://we.tl/t-uzVGEYed2O --> texte en attente de validation explication projet.

Je souhaiterais créer mes propres données tel les protocoles de Georgia Lupi et explorer son principe de "Data Humanism". Pour ma part à 22 ans, j'entretiens 75% de ma vie sociale grâce aux applications de communications ou les réseaux sociaux en général. Je pense qu'exploiter les données liées à ses applications permettrait d'avoir un recul sur sa vie sociale. La représentation de nos data aiderait également à repérer les schémas sociaux et de constater notre évolution à la fois émotionnelle et très probablement de maturité. Nous ne sommes pas les mêmes personne qu'il y a 1 an, comme nous serons différents dans 6 mois.

<B>Objectif ?</B> Faire la connaissance de quelqu'un à travers des visuels mettant en lumière sa vie sociale.

> Prendre les données de Messenger principalement. Réseau le plus complet et le plus accessible.

## **INSPIRATIONS GRAPHIQUES**

==*Src Unknown*==


==*atlasstudio.ch*==


https://www.behance.net/NevanDoyle --> <3 ÉNORME COEUR PIGE

## **PROTOCOLE**

En suivant un protocole de base de Georgia Lupi, je pense travailler par strates pour interpréter les données que j'ai pu récupérer de mon compte Facebook.

==À TESTER==
>Je me dis que ça pourrait être bien de prendre une phrase symbolique issues d'une conversation pour l'affiche ou carrément une suite de message ou simplement un mot.
Donc peut être faire des affiches à l'italienne ou une série qui se suit ?

> Simplement passer sur Processing directement pour directement modifier les textes et lettre (ne sera pas comme la déformation scanner mais peut se recréer) et donc je pourrais les animer pour le 360°.

> Pour récupérer mes mots à la main sur mes messages. https://www.jasondavies.com/wordtree/?source=d0b72d146a855f801032af749031662f&prefix=

### **Trier les informations par strates**

**1. Le nombre :** le nombre de fois où un mot apparaît. (ex: fleur = 340 fois)
**2. La couleur :** Les émotions présentes leur d'une conversation. (2e semaine d'avil : décès // profonde tristesse)
**3. La déformation :** L'intensité de la déformation de la lettre

> Représentation première sous forme d'affiche serait plus "logique". Par dessus cet ensemble de filtres s'ajouterait une lecture chronologique de gauche à droite pour situer dans le temps.


==*Page Layout Example*==

## **DÉCLINAISONS POSSIBLES**

Je pensais intéressant (étant donné qu'on a 3 semaines entièrement sur le projet) de décliner le principe ou les visuels pour leur redonner une dimension digitale et plus immersive (et surtout parce que je trouve ça plus fun que d'uniquement faire une série d'affiches.

==**Les idées qui vont suivres sont purement idéalistes, je ne prends pas en compte le temps de production, juste ça pourrait être cool.**==

### Installation


Une installation purement contemplative prenant le principe de Paper Cut et de feuilles transparentes teintées pour faire apparaître les strates de couleurs.

> Découpeuse laser + minutie et matériaux + lumières + endroit à part.

### Vidéo contemplative en 360°

Vu que c'est une représentation dans le temps, ça pourrait être sympa de les intégrer sur internet.

> une vidéo animée qui permettrait d'avoir en plus détaillé les zones et périodes de la data.
Regarder si on peut ajouter une couche interactive ? ex: rester au même endroit des bribes de messages.

https://vimeo.com/187313830
https://www.gregbarth.tv/The-Future-of-Music-360

## **RÉALISATION**

Je suis en train de partir plutôt par un visuel en code P5.JS en attendant d'exploiter les données.
Voici la référence la plus proche de ce que je souhaite faire.
https://p5js.org/reference/#/p5.Font/textToPoints

Voilà mon code test actuellement, jpp ça charge pas 🌝
https://www.openprocessing.org/sketch/705833

> et ça aussi
> https://rednoise.org/rita/gallery/automatype/

> http://www.generative-gestaltung.de/2/

### ITÉRATIONS ET TESTS DE CODE

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLe1PhMtwqzedwxuaohnn_XeXjnNH-UuV-" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

> https://books.google.fr/books?id=Efp1DwAAQBAJ&pg=PA178&lpg=PA178&dq=P5+JS+font+deformation&source=bl&ots=N2yVz6IWW1&sig=ACfU3U0acx2m6qCCKJZKOw6bI31pVvVYSw&hl=fr&sa=X&ved=2ahUKEwjejerlpIfiAhVa8uAKHXtnA8cQ6AEwDHoECAgQAQ#v=onepage&q&f=false

Mes références d'aide
https://trello.com/b/1P0cgPsv/computational-typography-resources
https://www.typotalks.com/news/2013/04/11/marian-bantjes-type-and-pattern-systems/
https://www.typotalks.com/videos/muir-mcneil-2/https://vimeo.com/album/4303792
https://mukulkhanna.github.io/generative-typography/A/
https://www.alispit.tel/generative-art-talk/

librairie déformation lettres:
https://opentype.js.org/index.html

### VERSION ARTIFICIELLE (Sans data)

Je vais très probablement changer les couleurs ce n'est pas définitif...



J'ai réussi à rajouter des trucs au code avec l'aide de mon frange-gomme.

https://we.tl/t-nDYKIoqamo

Le gabarit de "l'affiche " :


Avec le croquis explicatif :

 NON MOCHE PAS LES BONNES COULEURS
 PRESQUE FINAL



---

* **Groupe 5:**
* Paul Bieche
* Baptiste Certeau

**Nom : N'êtes-vous pas divertis ?**
>DESCRIPTIF

Ce travail porte sur les tueries de masses au sein des États Unis D’Amérique, nous avons choisi d’axer notre projet sur le ressenti d’un personne face à des évènements de ce type en utilisant pour cela leurs sens physique.

Notre installation repose sur la relation entre le monde physique et le numérique. Physique car l’utilisateur doit déposer une cloche en verre remplie de douilles d’armes à feu sur un socle afin de lancer l’expérience.
C’est cette première étape qui en soupesant la cloche, marquera le début de la prise de conscience de l’utilisateur sur les tueries de masse.

Cette cloche sert ensuite à lancer l’expérience, via un système de balance. On dispose d’une cinquantaine de cloches, chaque cloche correspond à un État, le nombre de douilles étant proportionnel aux nombres de tueries.

Une fois la cloche reconnue grâce à son poids, l’utilisateur est exposé à des flash infos en lien avec ces tueries, et qui apparaissent de plus en plus vite, le volume sonore augmente proportionnellement, afin de recouvrir tout l’écran et de créer un sentiment d’oppression et d’overdose.
La seule manière d’arrêter le flux audio et vidéo est de reprendre la cloche dans ses mains pour la retirer du capteur, et ainsi prendre conscience du poids de ces drames.

À partir de là il est possible de recommencer l’expérience avec une autre cloche.

[DATA](https://public.opendatasoft.com/explore/dataset/mass-shootings-in-america/table/?sort=total_number_of_victims&refine.state=California&location=5,38.80547,-97.9541&basemap=jawg.streets&dataChart=eyJxdWVyaWVzIjpbeyJjb25maWciOnsiZGF0YXNldCI6Im1hc3Mtc2hvb3RpbmdzLWluLWFtZXJpY2EiLCJvcHRpb25zIjp7InNvcnQiOiJ0b3RhbF9udW1iZXJfb2ZfdmljdGltcyJ9fSwiY2hhcnRzIjpbeyJhbGlnbk1vbnRoIjp0cnVlLCJ0eXBlIjoibGluZSIsImZ1bmMiOiJBVkciLCJ5QXhpcyI6ImNhc2VpZCIsInNjaWVudGlmaWNEaXNwbGF5Ijp0cnVlLCJjb2xvciI6IiNGRjUxNUEifV0sInhBeGlzIjoiZGF0ZSIsIm1heHBvaW50cyI6IiIsInRpbWVzY2FsZSI6InllYXIiLCJzb3J0IjoiIn1dLCJkaXNwbGF5TGVnZW5kIjp0cnVlLCJhbGlnbk1vbnRoIjp0cnVlfQ%3D%3D)

>CAPTEUR DE POIDS ARDUINO https://www.banggood.com/fr/HX711-5KG-Digital-Load-Cell-Weight-Pressure-Sensor-Portable-Electronic-Scale-Module-With-Shell-p-1353511.html?rmmds=detail-left-hotproducts__2&cur_warehouse=CN

>CAPTEUR DE POIDS ARDUINO V2 HACKSPARCK
https://hackspark.fr/fr/senseurs/1103-senseur-de-poids-weight-sensor-load-cell-0-5kg.html

[TUTO INSTALLATION WEIGHT SENSOR](https://www.brainy-bits.com/load-cell-and-hx711-with-arduino/)

[FONCTIONNEMENT WEIGHT SENSOR](https://www.youtube.com/watch?v=mCI59PS6TtE)

>INSPIRATIONS:
>Knife Angel
https://www.britishironworkcentre.co.uk/show-areas/the-knife-angel-official
>Assiettes, Philippe Apeloig
https://apeloig.com/fr/project/trois-motifs-graphiques-pour-le-service-diane/

>WIREFRAME

>Visages générés procéduralement par IA
https://thispersondoesnotexist.com/
Couverture médiatique / traitement de l’information
Engendrement / causalité (films, reportage etc.)
Quantifier les données
Analyse des mots, vocabulaire

>Carte interactive meurtres
https://homicide.latimes.com/neighborhood/long-beach/year/2016

> à voir: http://manovich.net/
> Resources Media Glitch : https://drive.google.com/open?id=1jhj9_NCXkiNGW4B8gI8vqtVk8OoUPs30
>
>

>documentation load cell
>

https://www.brainy-bits.com/load-cell-and-hx711-with-arduino/

https://drive.google.com/viewerng/viewer?url=http://www.robotshop.com/media/files/pdf/datasheet-3133.pdf

https://github.com/bogde/HX711#hardware-support

http://www.mschoeffler.de/2017/12/04/arduino-tutorial-hx711-load-cell-amplifier-weight-sensor-module-lcm1602-iic-v1-lcd/

https://www.youtube.com/watch?v=S12Mp8gDJmI

---

* **Groupe 6:**
* Rodriguez Michel

https://we.tl/t-1P42utG9Dg

function isObject(o) {
return o instanceof Object && o.constructor === Object;
}

**World Wind Tweet**

World Wind Tweet est un moteur de recherche de mots-clefs twitter. Il les représente par la suite comme une carte des vents. En effet, le hashtag de la recherche sera le vent dit 'principal' et il sera accompagné de vents 'secondaires' qui seront générés grâce aux hastags présents dans les tweets du vent principal.

---

* **Groupe 7:**
* Charlotte Guillaumet
* Arthur Jeunechamp

### **Travail sur la qualité de l'air**

*Chiffres en temps réel et classement de la qualité de l'air mondiale (IQA) :* https://aqicn.org/city/beijing/fr/

**Problème actuel :** la pollution a provoquée, en 2014, le décès prématuré de 520 400 personnes avant l'âge de 65 ans dans les 41 pays du continent européen. L'Allemagne est le pays le plus touché avec 81 160 morts prématurées, suivi de l’Italie, du Royaume-Uni et de la France avec 48 840 morts.
Les êtres humains ne sont pas les seuls à être touchés par la pollution de l’air. Les plantes, les animaux et les bâtiments peuvent également subir les répercussions de la pollution atmosphérique.

**Recherches :** La qualité de l'air dépend en grande partie de l'intensité des émissions polluantes mais aussi de la météo (avec les vents pour l’accumulation des particules, les éclairs créée les conditions favorables à la formation d’oxydes d’azote) qui peut jouer un rôle amplificateur.

Différents types de particules : Les particules en suspension (PM10 : elles sont retenues au niveau du nez et des voies aériennes supérieures ; PM2,5 : elles pénètrent profondément dans l’appareil respiratoire jusqu’aux alvéoles pulmonaires et peuvent passer dans la circulation sanguine), l’ozone troposphérique (O3), le dioxyde d’azote (NO2) et le dioxyde de soufre (SO2). 
Normes : http://www.airparif.asso.fr/reglementation/normes-francaises

Point météo : si le temps est ensoleillé et que le vent est faible, nous sommes en conditions atmosphériques stables (on parle alors de conditions anticycloniques) – les polluants auront alors tendance à s’accumuler. Au contraire, plus le temps est venteux, chargé de nuages et de pluie (on parle alors de conditions instables), et plus les polluants seront lessivés : la qualité de l’air tendra à s’améliorer !


**Idée :** faire un dispositif physique (similaire à un terrarium) avec lequel on puisse comparer le bien-être de la plante en fonction de la qualité de l'air des pays/villes sélectionnés.

**Le but :** éduquer et informer sur l'impact de la polution et de la qualité de l'air sur notre environnement.

Inspiration graphique : arbre abstrait (peinture sur pierre)



Lien de test api :
https://dev.onoci.net/e-artsup/treep/

==**Fichier texte réalisé (ci-dessous) :**==
> Treep - Charlotte Guillaumet & Arthur Jeunechamp
>
>La pollution a provoqué, en 2014, le décès prématuré de 520 400 personnes avant l’âge de 65 ans dans les 41 pays du continent européen. L’Allemagne est le pays le plus touché avec 81 160 morts prématurées, suivi de l’Italie, du Royaume-Uni et de la France avec 48 840 morts.
Ce phénomène mondial de pollution atmosphérique impact également les plantes, les animaux et les bâtiments.
>
>La qualité de l’air dépend en grande partie de l’intensité des émissions polluantes mais aussi de la météo (la température, l'humidité ou la pression) qui peut jouer un rôle amplificateur, par exemple : les vents provoquent l’accumulation de particules, les éclairs créent des conditions favorables à la formation d’oxydes d’azote. Lorsque le temps est ensoleillé et que le vent est faible, nous sommes en conditions atmosphériques stables, alors les polluants auront tendance à s’accumuler. Au contraire, plus le temps est venteux, chargé de nuages et de pluie, et plus les polluants disparaîtront.
>
>Pour mesurer la qualité de l’air, nous avons besoin de connaître la quantité de certaines particules présentes dans notre atmosphère :
les particules en suspension : PM10 et PM2,5 qui pénètrent plus ou moins profondément dans notre appareil respiratoire.
l’ozone troposphérique (O3) un polluant produit dans l’atmosphère par réaction entre plusieurs polluants, sous l’effet du rayonnement solaire.
le dioxyde d’azote (NO2) engendré principalement par le trafic routier et le chauffage.
le dioxyde de soufre (SO2) émane de la consommation de combustibles fossiles (pétrole, charbon et gaz naturel). 
>
>Le projet a pour but est d’informer la population française sur les impacts d’une mauvaise condition atmosphérique. C’est pour cela que nous avons conçu un site web interactif. Depuis cette plateforme nous représentons des villes par des forêts abstraites plus ou moins denses pour indiquer la qualité de l’air en temps réel.

**Éléments pour le code**




Pays :
South Africa
China
India
Mexico
Thailand
United Kingdom
United States
Kuwait
Nepal
Bahrain
Chile
South Korea
Japan
Uganda
Turkey
United Arab Emirates
Indonesia
Myanmar
Bosnia and Herzegovina
Bangladesh
Hungary
Poland
Israel
Mongolia
Taiwan
Czechia
Canada
Hong Kong
Kyrgyzstan
Macao
Serbia
Pakistan
Austria
El Salvador
Brazil
Viet Nam
Italy
Spain
Malta
Australia
Colombia
Ukraine
Sri Lanka
Cyprus
Slovakia
New Zealand
Ethiopia
Malaysia
Russian Federation
Saudi Arabia
Lao People's Democratic Republic
Ecuador
France
Peru
Iran
Algeria
Bulgaria
Belgium
Norway
Martinique
Sweden
Germany
Singapore
Kosovo
Kazakhstan
Bolivia
Finland
Luxembourg
Ireland
Romania
Cambodia
Denmark
Armenia
Holy See
Netherlands
Palestine
Croatia
Slovenia
French Guiana
Portugal
Argentina
Greece
Jordan
Iraq
Switzerland
New Caledonia
Estonia
Réunion
Lithuania
Curaçao
Brunei Darussalam
Moldova
Liechtenstein
Monaco
Guadeloupe
Iceland
San Marino
Gibraltar
Andorra

**Critères d'évolution**
• La couleur des cercles dépend de chaque gaz :
Dioxyde de Soufre : #7497b8
PM2,5 : #4a0b34
Dioxyde d'azote : #72599e
Ozone : #78c4bc
PM10 : #65306e
• Les autres couleurs :
Fond : #b8e68a
Forêt : #70c57e
Background menu : #d8efbd
• Pas de contours sur les cercles
• La taille des cercles varie aléatoirement entre minimum : 10 et maximum : 50
• 1000 cercles sont présents de façon aléatoire dans l'écran.
• Tous les cercles sont couleurs "Forêt" de base.
• L'échelle de taux gazeux varie de 1 à 1000 (une unité représente un cercle dans l'écran)
• Le taux de présence de chaque gaz (de 1 à 1000) colorise le même nombre de cercle.
• Un ou plusieurs noyaux peuvent être présents dans l'écran. Chaque noyau est un ensemble de cercles colorés par les gaz présents. Comme vu sur la maquette, plus les gaz sont toxiques et sombres, plus ils sont poches du centre du noyau.
• En ajoutant la somme de tous les gaz présents, on constitue une valeur X
• X/100 = le nombre de noyaux dans l'écran (arrondit au supérieur)
• Les traits font partie de l'ensemble des cercles. Ils fonctionnent sur le même principe et mesure de 50 à 300 px
• La liste des pays s’effectue par ordre alphabétique, avec une fois cliqué les villes que l’on peut sélectionnées. (Sélectionner que les villes qui ont des chiffres pour chaque gazs.)
• Typographie blanche DINPro.

Début de code HTML/CSS : https://we.tl/t-Hqne19Q0Iz

https://dev.onoci.net/e-artsup/treep/

To do code :
• Certains pays ne continent reste en "loading" par manque d'informations, par exemple : Bosnia and Herzegovina. Ne pas afficher le pays.
• Possibilité de refermer le volet automatiquement lorsque l'on clique sur un autre pays.
~~•Remplir avec des ronds verts (forêt). En tout 1000 ronds doivent apparaitrent sur l'écran.~~
~~•Faire varier la taille des ronds.~~
• Faire des branches aléatoires.
• Ordonner les listes de pays et villes par ordre alphabétique.
• Pas de hover sur la légende.

Dernière version : https://send.firefox.com/download/d1a7e41fa7c8f498/#8_sXfgyFMZ2zt3D5Zh1RpA

---

* **Groupe 8:**
* Thomas Lubrano
* Gaétan Loterie

récupérer le live vidéo de l'ISS et récupérer les couleurs dominantes

https://github.com/lokesh/color-thief/
https://github.com/rsmbl/Resemble.js?files=1
https://www.ustream.tv/channel/iss-hdev-payload
https://eol.jsc.nasa.gov/ESRS/HDEV/ avec tracker de l'ISS

api tracker : https://wheretheiss.at/w/developer
http://open-notify.org/Open-Notify-API/ISS-Location-Now/

https://api.nasa.gov/

*Projet Unity* : https://we.tl/t-PEpvwDzzLl (2018.3.4f1)

*Not so blue*

Nous nous sommes longtemps demandés pourquoi limiter la description de la Terre à "la planète bleue", alors que tellement d'autres couleurs y sont visibles. Nous avons cherché si il était possible d'avoir une autre vision de notre Terre, une qui mettrait plus en valeur toutes ses variations qui la rendent si belle vu d'en haut, au delà de notre atmosphère.
Nous avons donc choisis pour ce projet de récupérer la vidéo que l'ISS (International Space Station) diffuse en direct lors de son survol de la Terre et d'en capter les couleurs dominantes.
La station spatiale orbite à une vitesse entre 27000 et 28000 km/h ce qui lui permet de faire une révolution en 1h30 pour un total de seize tours par jour.
Ainsi en prenant une capture toutes les cinq minutes et en les transposant sur un globe dans Unity nous avons en temps réel, avec deux heures de décalage dûs au fait que la station se trouve à environ 420 km d'altitude, les variations captées par l'ISS.
Ce globe, divisé en bandes, est interactif. En effet il est possible via quelques clics de changer la date et l'heure afin de voir l'évolution au fil du temps. Ainsi on pourrait comparer les jours ou les mois entre eux, les couleurs changeant que l'on soit en été ou en hivers par exemple.

A côté de cela est mis en place une sorte de nuancier, prenant lui aussi en direct les couleurs dominantes des captures et les organisant en lignes. Ces lignes, mises les unes à la suite des autres, donnent un poster qui présente le dégradé des couleurs captées. Elles pourront par la suite être imprimés pour donner des représentations très graphiques et d'une certaine estéthique des données récupérées.
Ultimement, si l'opportunité se présente, il sera possible de relier le tout en un ouvrage regroupant tous les posters sur une année afin d'avoir le livre de "Not so blue".






url du json :
https://dev.onoci.net/e-artsup/iss/upload/media.json

url de la page de capture :
https://dev.onoci.net/e-artsup/iss/

lien vers l'extension chrome
https://we.tl/t-BhYMAOvhrq

---
* **Groupe 9:**
* Matthieu Broardo
## Elements étudiés & Data Base

Répértoriage des créatures légendaires par origine géographique

## liens de pige:

livre sur les créatures fantastiques
https://www.babelio.com/livres/Boccador-Creatures-fantastiques/456977

lien wikipedia pour le listing des créatures en fonction de leurs lieu de création
https://fr.wikipedia.org/wiki/Catégorie:Créature_légendaire_par_origine_géographique

## Direction de parcours

### idée 1: aspect Ludique
application de type quizz, ludique qui à pour but de faire découvrir toutes les créatures, leurs lieu d'origine et leurs caractéristiques propre.

### idée 2 : Aspect Visuel
fresque murale qui recense toutes les créations des créatures durant notre ère . interaction ?

### idée 3 :Aspect Expérience.
jeu de zone : quand les visiteurs ( d’un salon , d’un événement , d’une représentation , d’un festival , d’un rassemblement, … ) se présentent à l’entrée, ils flashent le QR code et prennent connaissance des règles du jeu.
Au cours de leurs temps passé sur place et en fonction de leurs emplacement, sur un algorithme lié exclusivement sur une valeur de hasard, ils croisent des créatures sous forme de carte a jouer, et en sont informés grâce à une notification sur leurs téléphone. Si ils sont capables de les nommer , et de dire leurs lieu de création d’origine, ils obtiennent un taux de framents qui, quand ils sont au complet pour généré une piece, offre des avantages. ( type réductions , bons plans, promotions, cadeaux, … ).

elements présents sur la carte :
. Design de la créature
. lieu d'origine
. Nom
.caractéristiques
. Fragments

chaque créature possède des fragments ( plus elle est connue moins elle a de fragments et inversement), chaque fragment est compatibles avec les autres, une fois la pièce complètée,le bonus est obtenus = avantages client