---
title: Traitement et conversion de données avec D3js
tags: data, d3js, data
robots: noindex, nofollow
author: Julien Noyer
---
# Traitement et conversion de données avec D3js
*Principe de base de gestion de l'information en Javascript*
> © [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/)- All rights reserved for educational purposes only
---
## Introduction
La bibliothèque [**D3js**](https://d3js.org) est principalement utiliser pour faire de la Data visualisation mais il contient également des outils très intéressants qui permettent de traiter et de convertir des données dans différents formats. Dans le cadre de ce document nous allons utiliser [**D3js**](https://d3js.org) pour convertir des données du format [CSV](https://fr.wikipedia.org/wiki/Comma-separated_valuesV) au format [JSON](https://www.json.org/json-en.html) afin de préparer la suite des exercices à réaliser lors des futures séquences.
## Initialiser une page web avec [**D3js**](https://d3js.org)
[**D3js**](https://d3js.org) est une initialement un bibliothèque à la fois [Front End](https://fr.wikipedia.org/wiki/Développement_web_frontal) et [Back End](https://fr.wikipedia.org/wiki/Backend), dans le cadre de ce document nous allons l'utiliser sur une page HTML que nous configurons de cette manière :
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>D3js : parse CSV to JSON</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
// Ajouter le script sous cette ligne
</script>
</body>
</html>
```
> Nous importons le [CDN](https://fr.wikipedia.org/wiki/Réseau_de_diffusion_de_contenu) de [D3js](https://d3js.org) dans la balise `<head>`?
## Convertir un fichier CSV en JSON
La méthode `.csv()` de [D3js](https://d3js.org) permet de charger un fichier [CSV](https://fr.wikipedia.org/wiki/Comma-separated_valuesV)? Nous allons commencer par créer un fichier `cities.csv` que nous placerons dans un dossier `data` à la racine de la page web. Le contenu de ce fichier est le suivant :
```csv
city,state,population,land area
seattle,WA,652405,83.9
new york,NY,8405837,302.6
boston,MA,645966,48.3
```
Puis nous ajoutons le code suivant dans la balise `<script>` de la page web :
```js
// Convertir le fichier CSV en JSON
d3.csv('./data/cities.csv')
.then( data => {
// Afficher le résultat dans la console
console.log(data);
})
.catch( err => {
console.error(err);
});
```
> Il est possible de convertir des fichiers [TSV](https://fr.wikipedia.org/wiki/Tabulation-separated_values) avec la fonction `.tsv()`.
Le principe de [D3js](https://d3js.org) étant de traiter les données pour quelles soient traitées en Javascript, le format [JSON](https://www.json.org/json-en.html) est celui qui est renvoyer par les fonctions de conversion. Dans le cadre de données `cities.csv` qui contient de valeurs de type chaine de caractères, le fait de les convertir en [JSON](https://www.json.org/json-en.html) va nous permettre de boucler sur le résultat pour typer les valeurs de la façon suivante :
```javascript=
// Créer un tableau vide
let convertedData = [];
// Boucle FOR...OF sur la collection de données
for( const item of data ){
// ES6 Conversion en INT.
convertedData.push({
city: item.city,
state: item.state,
population: +item.population; // eg. parseInt()
"land area": +item['land area']; // eg. parseFloat()
})
};
// Afficher les données converties dans la console
console.log(convertedData);
```
> Le code ci-dessus est dans la fonction `.then()` (dite de `callback`).
## Convertir plusieurs fichiers en JSON
Il est possible d'utiliser un tableau de [promesses](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) pour charger plusieurs fichiers différents, nous allons donc créer un fichier [DSV](https://fr.wikipedia.org/wiki/Delimiter-separated_values) nommé `animals.txt` contenant les données suivantes :
```dsv
name|avg_weight|state
tiger|260|WA
hippo|3400|NY
komodo dragon|150|MA
```
Puis nous ajoutons le code suivant à la fin du script précédemment créé :
```javascript=
// Mettre en place un tableau de promesses
Promise.all([
d3.csv("/data/cities.csv"),
d3.dsv("|", "/data/animals.txt")
]).then(function(data) {
// Créer des constantes avec le résultat
const cities = data[0][0]
const animals = data[1][0]
// Créer un tableau vide
let combinatedData = [];
// Boucle FOR...OF sur la collection de cities
for( const city of cities ){
// ES6 Conversion en INT.
let newCity = {
city: item.city,
state: item.state,
population: +item.population; // eg. parseInt()
"land area": +item['land area']; // eg. parseFloat()
animales: [];
};
// Boucle FOR...OF sur la collection de animals
for( const animal of animals ){
// Combiner les collections de données
if( animal.state === city.sate){
// ES6 Conversion en INT.
newCity.animales.push({
name: animal.name,
weight: +animal.avg_weight; // eg. parseInt()
})
};
};
// Ajouter la ville dans le tableau
combinatedData.push(newCity);
};
// Afficher les données combinées dans la console
console.log(combinatedData);
});
```
> L'[algorithme de trie](https://fr.wikipedia.org/wiki/Algorithme_de_tri) utilisé est le [tri à bulle](https://fr.wikipedia.org/wiki/Tri_à_bulles).
## Synthèse des données avec [**D3js**](https://d3js.org)
[**D3js**](https://d3js.org) dispose d'un certain nombre d'outils pour synthétiser des collections de données. Nous allons garder le chargement du fichier `cities.csv` puis nous allons utiliser différentes méthodes :
```javascript=
// Convertir le fichier CSV en JSON
d3.csv('./data/cities.csv')
.then( data => {
// Retourner la valeur minimale : .min()
var minPopulation = d3.min(data, function(item) { return item.population; });
console.log(minPopulation);
// Retourner la valeur maximale : .max()
var maxPopulation = d3.max(data, function(item) { return item.population; });
console.log(maxPopulation);
// Retourner la valeur minimale et maximale : .extent()
var population = d3.extent(data, function(item) { return item.population; });
console.log(population);
})
.catch( err => {
console.error(err);
});
```
> Il existe une grande quantité de méthodes dont la [documentation est ici](https://github.com/d3/d3-array)
## Gestion du temps avec [**D3js**](https://d3js.org)
Le temps est une chose délicate en programmation qui semble simple, mais qui s'avère généralement ne pas l'être. Les fonctions d'analyse temporelle et d'intervalle intégrées de [**D3js**](https://d3js.org) permettent de manipuler les données temporelles de manière plus simplifiée. La fonction **d3.timeParse** fournit un moyen de faire une analyse temporelle, nous allons utiliser cette fonction pour créer un analyseur de chaîne, puis utilisez l'analyseur pour convertir réellement la chaîne.
```javascript=
// Définition d'un objet
let expense = {"name":"jim","amount":34,"date":"11/12/2015"};
// Utilisation de la fonction timeParse() pour créer une fonction de convertion
let parser = d3.timeParse("%m/%d/%Y");
// Convertion de la prorpiété "data" de l'objet "expense"
expense.date = parser(expense.date);
// Affichage du résultat dans la console
console.log(expense);
```
> La valeur retournée de la fonction **d3.timeParse** est elle-même une fonction, nous pouvons donc simplement passer notre chaîne de date directement à cette fonction.
Voici quelques analyseurs de temps supplémentaires pour montrer les capacités de l'analyse de D3. Notez à nouveau que nous créons une fonction **d3.timeParse** puis nous transmettons une chaîne à analyser, cette fois sur une seule ligne :
```javascript=
// Création d'une variable de date
let date = d3.timeParse("%A, %B %-d, %Y")("Wednesday, November 12, 2014");
// Affichage du résultat dans la console
console.log(date);
// Création d'une variable de temps
let time = d3.timeParse("%I:%M%p")("12:34pm");
// Affichage du résultat dans la console
console.log(time);
// Création d'une variable de date et de temps
let dateAndTime = d3.timeParse("%x %X")("1/2/2014 8:22:05 AM");
// Affichage du résultat dans la console
console.log(dateAndTime);
```
[**Moment.js**](https://momentjs.com) est une autre bibliothèque JavaScript qui pourrait être mieux adaptée à vos besoins, si vous effectuez beaucoup de manipulations de temps. Sa syntaxe et ses capacités semblent un peu plus intuitives pour certaines manipulations temporelles.
---
## Ressources
> Index des liens vers les sujets traités dans ce syllabus :
- **D3js** https://d3js.org
- **Format CSV** https://fr.wikipedia.org/wiki/Comma-separated_valuesV
- **Format DSV** https://fr.wikipedia.org/wiki/Delimiter-separated_values
- **Format JSON** https://www.json.org/json-en.html
- **Dévelopement Front End** https://fr.wikipedia.org/wiki/Développement_web_frontal
- **Dévelopement Back End** https://fr.wikipedia.org/wiki/Backend
- **Content Delivery Network** https://fr.wikipedia.org/wiki/Réseau_de_diffusion_de_contenu
- **Les promesses en Javascript** https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise
- **Algorithme de trie** https://fr.wikipedia.org/wiki/Algorithme_de_tri
- **Tri à bulle** https://fr.wikipedia.org/wiki/Tri_à_bulles
- **Moment.js** https://momentjs.com
Sign in with Wallet
Connect another wallet