---
# System prepended metadata

title: Data Visualisation en Javascript avec Vega Lite
tags: [' vega-lite', ' data', support]

---

---
title: Data Visualisation en Javascript avec Vega Lite
tags: support, vega-lite, data
robots: noindex, nofollow
author: Julien Noyer
---

# Data Visualisation en Javascript avec Vega Lite

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

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 represénter 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.


<br><br>

## 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.

<br><br>

## 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 ou [**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 colonne 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 utiliser dans [**Vega Lite**](https://vega.github.io/vega-lite-v1/) pour réaliser un graphique. Il est important de respecter scrupuleusement les nomm des propriétés afin que [**Vega Lite**](https://vega.github.io/vega-lite-v1/) comprenne bien les données que nous souhitons 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.

<br>

[**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"
}
```

<br>

Ce simple ajout de la propriété **mark** ne suffi 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** ce base sur la valeur des données alors que la configuration **quantitative** affiche les valeurs de 0 à la valeur la plus grande. 

<br>

## Afficher le graphique dans une page Web

A présent que nos données sont organisées correctemet 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.

<br><br>

## Aggré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"}
  }
}
```

<br><br>

Les valeurs agrégées sont généralement visualisé à 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"}
  }
}
```

<br><br>

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"}
  }
}
```

<br><br>

## Charger un fichier CSV 

[**Vega Lite**](https://vega.github.io/vega-lite-v1/) est capable de traiter directement des fichiers au format CSV affin 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"},
```

<br><br>

## 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écipitation de cette manière : 

```javascript=
let dataSet = {
  "data": {"url": "data/seattle-weather.csv"},
  "mark": "tick",
  "encoding": {
    "x": {"field": "precipitation", "type": "quantitative"}
  }
}
```

<br><br>

Est-ce que le graphique affiché est suffisament 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"
    }
  }
}
```

<br><br>

Le données ainsi affichées sont plus claires 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"
    }
  }
}
```

<br><br>

Il semble que ce dernier graphique en ligne permet de mieux voir l'évolution des précipitation à travers le temps mais ça n'est par pour autant qu'il faut oublier les graphique a barres. En effet, si à présent nous voulons voir les différents type 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.

---

<br><br><br><br>

# Ressources

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

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