---
# System prepended metadata

title: La Pollution de l'eau

---

###### Projet données situées
# La Pollution de l'eau 

Cette data visualization met à disposition du public un ensemble de données sur les composants qui polluent les eaux nantaises, notamment dans l'erdre.
## Le lieu
Nous avons dans un premier temps pensé à deux lieux proche de l'Erdre, possédant suffisamment d'espace et de passage pour que notre infographie soit visible et puisse être lu, sans pour autant nuire au paysage ou être posée dans l'illégalité.

![](https://i.imgur.com/1eGqCSz.jpg)

![](https://i.imgur.com/JJMUdA2.jpg)

![](https://i.imgur.com/6PxqOWf.jpg)

![](https://i.imgur.com/8QPWsg1.jpg)

![](https://i.imgur.com/QjqDhF3.jpg)

![](https://i.imgur.com/jMhoZgW.jpg)

## Les données

https://data.paysdelaloire.fr/explore/dataset/18450301900087_qualite-des-eaux-en-pays-de-la-loire-loire-atlantique/table/?disjunctive.lblongparametre 


Nous avons fait une première selection de données en gardant que les informations les plus connues, mais en essayant de garder une diversité aux niveaux des données mais aussi des unités de mesure. 

![](https://i.imgur.com/9WsuL3u.png)

![](https://i.imgur.com/Hdcbd7K.png)

![](https://i.imgur.com/OGKwfdw.png)

![](https://i.imgur.com/4rXPfz2.png)


## METTRE TABLEAU

## Le moodboard

- Représentation de matières brut ou polluantes pour illustrer
- Représentation d’objets pour que ça parle plus aux gens
- Thématique de la pollution marine
- Source d’inspiration : *haemkecl*

![](https://i.imgur.com/mtj72KO.jpg)

![](https://i.imgur.com/UPnx9jQ.jpg)

![](https://i.imgur.com/iybbUfc.png)


## Inspiration graphique

Visualisation de données par un motif répété en fonction du type de valeur. Chaque motif correspond à un type de données (température, pH, volume...)
Travail à partir d'une forme hexagonale afin de se rapprocher de la représentation de Cram utilisée en chimie pour représenter les molécules 3D en 2D.

![](https://i.imgur.com/q8PMS8M.png)

![](https://i.imgur.com/dhbxdlS.jpg)

![](https://i.imgur.com/Hzc0CME.png)

![](https://i.imgur.com/Vfa5f1W.png)

![](https://i.imgur.com/pqB4yvm.png)

## Premières esquisses

Un grand morceau de carrelage en support servant de fond.
Plusieurs petits morceaux de carrelage en forme d’hexagone pour représenter les molécules de pollution que nous avons choisi.
Supplément de liaison ou nom de molécules ajouté au crayon avec des couleurs différentes.

![](https://i.imgur.com/SmH773M.jpg)

![](https://i.imgur.com/HIbxaCt.jpg)

![](https://i.imgur.com/whKl0lz.jpg)

## SVG

![](https://i.imgur.com/2hLpBT9.jpg)
![](https://i.imgur.com/M4qebsn.jpg)
![](https://i.imgur.com/I3Dwutm.jpg)
![](https://i.imgur.com/XHTLKoV.jpg)
![](https://i.imgur.com/MZdrl8j.jpg)
![](https://i.imgur.com/LzHT6Yo.jpg)
![](https://i.imgur.com/2nSpSQg.jpg)
![](https://i.imgur.com/34T787E.jpg)
![](https://i.imgur.com/D2rRZ2u.jpg)


## tests matière

![](https://i.imgur.com/2xcbvqV.jpg)

![](https://i.imgur.com/a1pdSit.jpg)

## Rendu final
Photo avant installation sur fond uni.
![](https://i.imgur.com/1XD0o7h.png)



Photos in situ.
![](https://i.imgur.com/eDZLbig.jpg)
![](https://i.imgur.com/tFdoeLW.jpg)


## Code source processing

// Trouver les valeurs maximum et minimum
// d'un colonne dans un tableau en .csv
/////////////////////////////
// Source des données  : 
// https://data.paysdelaloire.fr/explore/dataset/qualite-de-lair-niveau-de-particules-fines-2-5-en-pays-de-la-loire/table/?q.daterangeslider=date_debut:%5B2018-12-01+TO+2021-04-29%5D&location=11,47.15895,-1.41895&basemap=jawg.streets
/////////////////////////////
// Les données sont dans un tableau en .csv dans le fichier data
/////////////////////////////
// Voir les fonction min() et max() dans les références de processing :
// https://processing.org/reference/min_.html
// https://processing.org/reference/max_.html
/////////////////////////////
// Par Clément Gault, mai 2021

// On déclare et créé le tableau :
Table dataNantes; 

// Variables de type float pour stocker 
// les valeurs minimum et maxium :
float vmin;
float vmax;
float largeur;
float nbPart;

void setup() {
  size (500, 500);
  largeur=500/14;

  // On charge le tableau dans dataNantes :
  dataNantes = loadTable("tableau_erdre.csv", "header");

  println(dataNantes.getRowCount() + " rangées dans le CSV");
  println(dataNantes.getColumnCount() + " colonnes dans le CSV");

  // Boucle for pour lire toutes les valeurs d'une colonne :
  for (int i = 0; i < dataNantes.getRowCount(); i = i + 1) { 

    vmin = min(vmin, dataNantes.getFloat(i, 4));
    vmax = max(vmax, dataNantes.getFloat(i, 4)); // Réciproquement avec max()
  }
  println(vmin, vmax);

  noLoop(); // Le draw() ne sera lu qu'une fois !
}

void draw() {
  background (#FFFFFF);
  strokeWeight(8);
  println(dataNantes.getFloat(0, 4));
  for (int i = 0; i < 100; i = i + 1) {
    if (random(100) < dataNantes.getFloat(0, 4)) {
      point(random(width), random(height));
    }
  }
} //fin draw
