---
title: Data Visualisation en Javascript avec Vega Lite
tags: data, vega-lite, data
robots: noindex, nofollow
author: Julien Noyer
---
# Data Visualisation en Javascript avec Vega Lite
*Trouver le bon affichage pour la bonnes information*
> © [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/) - All rights reserved for educational purposes only
---
## Introduction
La bibliothèque [**Vega Lite**](https://vega.github.io/vega-lite-v1/) est utilisée pour réaliser différents type de schémas pour représenter l'information. Les spécifications de [**Vega Lite**](https://vega.github.io/vega-lite-v1/) décrivent les visualisations comme des mappages de données aux propriétés de marques graphiques (par exemple, des points ou des barres). Il produit automatiquement des composants de visualisation, notamment des axes, des légendes et des échelles. Il détermine ensuite les propriétés de ces composants en fonction d'un ensemble de règles soigneusement conçues.
## Initialiser une page web avec [**Vega Lite**](https://vega.github.io/vega-lite-v1/)
[**Vega Lite**](https://vega.github.io/vega-lite-v1/) est une bibliothèque [Front End](https://fr.wikipedia.org/wiki/Développement_web_frontal), 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>Vega-Lite : Data Visualisation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/2.6.5/vega.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/1.3.1/vega-lite.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/2.2.0/vega-embed.js" charset="utf-8"></script>
</head>
<body>
<!-- Création d'une section pour afficher le graphique -->
<section id="dataVisualisation"></section>
<script>
// Ajouter le script sous cette ligne
</script>
</body>
</html>
```
> Nous importons plusieurs [CDN](https://fr.wikipedia.org/wiki/Réseau_de_diffusion_de_contenu) afin d'utiliser [**Vega Lite**](https://vega.github.io/vega-lite-v1/) dans une page web.
## Organiser les données pour créer une Data Visualisation
Avant de pouvoir utiliser [**Vega Lite**](https://vega.github.io/vega-lite-v1/) il est essentiel de savoir comment organiser les données pour les intégrer dans un graphique. Dans la mesure où [**Vega Lite**](https://vega.github.io/vega-lite-v1/) est une bibliothèque Javascript, le format de données à utiliser pour réaliser des graphiques et le [JSON](https://fr.wikipedia.org/wiki/JavaScript_Object_Notation). Nous allons partir d'un jeu de données simple qui représente un tableau de deux colonnes dont les données en CSV sont les suivantes :
```csv=
key, value
a, 2
a, 7
a, 4
b, 1
b, 2
b, 6
c, 8
c, 4
c, 7
```
Il est possible d'utiliser [D3.js](https://d3js.org) pour convertir ces données CSV en JSON, ce qui nous donne le résultat suivant :
```json=
[
{ "key": "a", "value": 2 },
{ "key": "a", "value": 7 },
{ "key": "a", "value": 2 },
{ "key": "b", "value": 1 },
{ "key": "b", "value": 2 },
{ "key": "b", "value": 6 },
{ "key": "c", "value": 8 },
{ "key": "c", "value": 4 },
{ "key": "c", "value": 7 }
]
```
Les données ainsi converties peuvent être utilisées dans [**Vega Lite**](https://vega.github.io/vega-lite-v1/) pour réaliser un graphique. Il est important de respecter scrupuleusement les noms des propriétés afin que [**Vega Lite**](https://vega.github.io/vega-lite-v1/) comprenne bien les données que nous souhaitons traiter :
```javascript=
// Création d'une variable "dataSet"
let dataSet = {
"data": {
"values": [
{ "key": "a", "value": 2 },{ "key": "a", "value": 7 },{ "key": "a", "value": 2 },
{ "key": "b", "value": 1 },{ "key": "b", "value": 2 },{ "key": "b", "value": 6 },
{ "key": "c", "value": 8 },{ "key": "c", "value": 4 },{ "key": "c", "value": 7 }
]
}
}
```
> La propriété "data" est celle qui permet de définir la valeur des données à traiter.
[**Vega Lite**](https://vega.github.io/vega-lite-v1/) propose un grand nombre de graphiques différents pour visualiser les données dont vous pouvez trouver [des exemples ici](https://vega.github.io/vega-lite-v1/examples/). Pour définir le type de graphique à utiliser, il faut ajouter une propriété **mark** dans la variable **dataSet** dont la valeur correspond au type de graphique. Prenons par exemple de simples points :
```javascript=
let dataSet = {
"data": {
"values": [
{ "key": "a", "value": 2 },{ "key": "a", "value": 7 },{ "key": "a", "value": 2 },
{ "key": "b", "value": 1 },{ "key": "b", "value": 2 },{ "key": "b", "value": 6 },
{ "key": "c", "value": 8 },{ "key": "c", "value": 4 },{ "key": "c", "value": 7 }
]
},
// Définition d type de graphique
"mark": "point"
}
```
Ce simple ajout de la propriété **mark** ne suffit pas à afficher correctement le graphique, en effet, il faut préciser les abscisses X et Y. Pour ce faire nous devons ajouter une propriété **encoding** après la propriété **mark** :
```javascript=
let dataSet = {
"data": {
"values": [
{ "key": "a", "value": 2 },{ "key": "a", "value": 7 },{ "key": "a", "value": 2 },
{ "key": "b", "value": 1 },{ "key": "b", "value": 2 },{ "key": "b", "value": 6 },
{ "key": "c", "value": 8 },{ "key": "c", "value": 4 },{ "key": "c", "value": 7 }
]
},
"mark": "point",
// Définition des abscisses
"encoding": {
"x": {"field": "key", "type": "nominal"},
"y": {"field": "value", "type": "quantitative"}
}
}
```
> La configuration **nominal** de la propriété **type** se base sur la valeur des données alors que la configuration **quantitative** affiche les valeurs de 0 à la valeur la plus grande.
## Afficher le graphique dans une page Web
A présent que nos données sont organisées correctement pour [**Vega Lite**](https://vega.github.io/vega-lite-v1/), nous pouvons afficher notre graphique dans une page Web de la manière suivante :
```htmlembedded=
<!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>Vega-Lite : Data Visualisation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/2.6.5/vega.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/1.3.1/vega-lite.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/2.2.0/vega-embed.js" charset="utf-8"></script>
</head>
<body>
<!-- Création d'une section pour afficher le graphique -->
<section id="dataVisualisation"></section>
<script>
// Définition des données à traiter
let dataSet = {
"data": {
"values": [
{ "key": "a", "value": 2 },{ "key": "a", "value": 7 },{ "key": "a", "value": 2 },
{ "key": "b", "value": 1 },{ "key": "b", "value": 2 },{ "key": "b", "value": 6 },
{ "key": "c", "value": 8 },{ "key": "c", "value": 4 },{ "key": "c", "value": 7 }
]
},
"mark": "point",
"encoding": {
"x": {"field": "key", "type": "nominal"},
"y": {"field": "value", "type": "quantitative"}
},
"width": 500
}
// Définition des options
let embedSpec = {
mode: "vega-lite",
spec: dataSet
}
// Utilisation de la fonction "embed()" pour afficher le graphique
vg.embed("#dataVisualisation", embedSpec, (error, result) => {
// Vérification du résultat
if( error ){ console.error(error) }
else{ console.log(result) };
});
</script>
</body>
</html>
```
> La propriété **width** permet de définir la largeur en pixel du graphique.
## Agréger les données avant de les afficher
[**Vega Lite**](https://vega.github.io/vega-lite-v1/) prend également en charge la transformation de données telle que l'agrégation. En ajoutant `"aggregate": "average"` à la définition du canal y, nous pouvons voir la valeur moyenne de a dans chaque catégorie :
```javascript=
let dataSet = {
"data": {
"values": [
{ "key": "a", "value": 2 },{ "key": "a", "value": 7 },{ "key": "a", "value": 2 },
{ "key": "b", "value": 1 },{ "key": "b", "value": 2 },{ "key": "b", "value": 6 },
{ "key": "c", "value": 8 },{ "key": "c", "value": 4 },{ "key": "c", "value": 7 }
]
},
"mark": "point",
"encoding": {
"x": {"field": "key", "type": "nominal"},
// Agrégation des données
"y": {"aggregate": "average", "field": "value", "type": "quantitative"}
}
}
```
Les valeurs agrégées sont généralement visualisées à l'aide de graphiques à barres, pour créer un graphique à barres, nous devons changer la valeur de la propriété `mark` de la manière suivante :
```javascript=
let dataSet = {
"data": {
"values": [
{ "key": "a", "value": 2 },{ "key": "a", "value": 7 },{ "key": "a", "value": 2 },
{ "key": "b", "value": 1 },{ "key": "b", "value": 2 },{ "key": "b", "value": 6 },
{ "key": "c", "value": 8 },{ "key": "c", "value": 4 },{ "key": "c", "value": 7 }
]
},
// Utilisation d'un graphique à barres
"mark": "bar",
"encoding": {
"x": {"field": "key", "type": "nominal"},
"y": {"aggregate": "average", "field": "value", "type": "quantitative"}
}
}
```
Si vous souhaitez afficher le graphique au format horizontal, il suffi d'inverser `x` et `y` :
```javascript=
let dataSet = {
"data": {
"values": [
{ "key": "a", "value": 2 },{ "key": "a", "value": 7 },{ "key": "a", "value": 2 },
{ "key": "b", "value": 1 },{ "key": "b", "value": 2 },{ "key": "b", "value": 6 },
{ "key": "c", "value": 8 },{ "key": "c", "value": 4 },{ "key": "c", "value": 7 }
]
},
"mark": "bar",
"encoding": {
// Inversion des axes
"y": {"field": "key", "type": "nominal"},
"x": {"aggregate": "average", "field": "value", "type": "quantitative"}
}
}
```
## Charger un fichier CSV
[**Vega Lite**](https://vega.github.io/vega-lite-v1/) est capable de traiter directement des fichiers au format CSV afin d'afficher des graphique, il suffi de préciser dans la propriété `data` une `url` qui pointe vers le fichier. Pour notre exemple, nous allons télécharger le fichier `seattle-weather.csv` en [cliquant ici](https://vega.github.io/vega-lite-v1/data/seattle-weather.csv) que nous ajoutons dans un dossier data puis nous configurons la propriété `data` de la manière suivante :
```javascript=
"data": {"url": "data/seattle-weather.csv"},
```
## Trouver la bonne manière de visualiser l'information
Selon les informations que vous souhaitez afficher, il est très important de choisir le bon type de graphique pour donner de la valeur à votre visualisation. Dans le cadre de données en rapport avec le climat comme dans le fichier CSV télécharger plus haut, nous pouvons par exemple décider de n'afficher que les précipitations de cette manière :
```javascript=
let dataSet = {
"data": {"url": "data/seattle-weather.csv"},
"mark": "tick",
"encoding": {
"x": {"field": "precipitation", "type": "quantitative"}
}
}
```
Est-ce que le graphique affiché est suffisamment clair ? Peut-être qu'avec un graphique à barre l'affichage sera plus probant :
```javascript=
let dataSet = {
"data": {"url": "data/seattle-weather.csv"},
"mark": "bar",
"encoding": {
"x": {
"bin": true,
"field": "precipitation",
"type": "quantitative"
},
"y": {
"aggregate": "count",
"field": "*",
"type": "quantitative"
}
}
}
```
La donnée ainsi affichée sont plus claire, mais quand est-il avec un graphique en ligne :
```javascript=
let dataSet = {
"data": {"url": "data/seattle-weather.csv"},
"mark": "line",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "temporal"
},
"y": {
"aggregate": "mean",
"field": "precipitation",
"type": "quantitative"
}
}
}
```
Il semble que ce dernier graphique en ligne permette de mieux voir l'évolution des précipitations à travers le temps, mais ça n'est pas pour autant qu'il faut oublier les graphiques a barres. En effet, si à présent, nous voulons voir les différents types de précipitations, le graphique à barres semble cette fois-ci idéal :
```javascript=
let dataSet = {
"data": {"url": "data/seattle-weather.csv","format": {"type": "csv"}},
"mark": "bar",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"timeUnit": "month",
"axis": {"title": "Month of the year"}
},
"y": {
"field": "*",
"type": "quantitative",
"aggregate": "count"
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": ["sun","fog","drizzle","rain","snow"],
"range": ["#e7ba52","#c7c7c7","#aec7e8","#1f77b4","#9467bd"]
},
"legend": {
"title": "Weather type"
}
}
}
}
```
> Nous ajoutons une propriété `color` qui nous permet de définir les couleurs de chaque partie du graphique.
---
# Ressources
> Index des liens vers les sujets traités dans ce syllabus :
- **Vega-Lite** https://vega.github.io/vega-lite-v1/
- **Examples de graphique** https://vega.github.io/vega-lite-v1/examples/
- **Dévelopement Front End** https://fr.wikipedia.org/wiki/Développement_web_frontal
- **Data Visualisation** https://fr.wikipedia.org/wiki/Visualisation_de_données
- **Format JSON** https://fr.wikipedia.org/wiki/JavaScript_Object_Notation
- **D3js** https://d3js.org
Sign in with Wallet
Connect another wallet