---
tags: vega-lite, updated
---
# Une démo Vega-lite sur une série temporelle
Dans codimd, le simple code :
```json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"values": "Date,Nombre de VM\n19/12/2015,40\n15/02/2016,52\n18/11/2016,100\n21/12/2016,110\n25/05/2017,131\n11/09/2017,153\n04/10/2017,157\n28/12/2017,173\n23/02/2018,181\n21/06/2018,185\n02/07/2018,189\n13/08/2018,200\n05/11/2018,220\n21/02/2019,246\n16/04/2019,276\n21/07/2019,287\n30/08/2019,300\n30/10/2019,314\n11/02/2020,322\n26/03/2020,336\n",
"format": {"type": "csv",
"parse": {"Date": "date:'%d/%m/%Y'"}}},
"title": "Evolution temporelle du nombre de VM",
"width": 400,
"height": 300,
"mark": {"type": "point"},
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Nombre de VM", "type": "quantitative"}
}
}
```
est rendu avec [Vega-lite](https://vega.github.io/vega-lite/) :
```vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"values": "Date,Nombre de VM\n19/12/2015,40\n15/02/2016,52\n18/11/2016,100\n21/12/2016,110\n25/05/2017,131\n11/09/2017,153\n04/10/2017,157\n28/12/2017,173\n23/02/2018,181\n21/06/2018,185\n02/07/2018,189\n13/08/2018,200\n05/11/2018,220\n21/02/2019,246\n16/04/2019,276\n21/07/2019,287\n30/08/2019,300\n30/10/2019,314\n11/02/2020,322\n26/03/2020,336\n",
"format": {"type": "csv",
"parse": {"Date": "date:'%d/%m/%Y'"}}},
"title": "Evolution temporelle du nombre de VM",
"width": 400,
"height": 300,
"mark": {"type": "point"},
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Nombre de VM", "type": "quantitative"}
}
}
```
Le menu `...` en haut à droite permet de faire des exports et d'éditer dans la console vega-lite.
Le champ `"values"` est le copier-coller de la sortie standard de
```bash
python3 -c "print(repr(''.join(open('joel.csv').readlines())))"
```
où `joel.csv` contient :
```csv
Date,Nombre de VM
19/12/2015,40
15/02/2016,52
18/11/2016,100
21/12/2016,110
25/05/2017,131
11/09/2017,153
04/10/2017,157
28/12/2017,173
23/02/2018,181
21/06/2018,185
02/07/2018,189
13/08/2018,200
05/11/2018,220
21/02/2019,246
16/04/2019,276
21/07/2019,287
30/08/2019,300
30/10/2019,314
11/02/2020,322
26/03/2020,336
```
On peut aussi compliquer les choses avec une régression linéaire ou plein d'autres traitements (cf. la [doc](https://vega.github.io/vega-lite/docs/regression.html)) et les valeurs qui s'affichent quand on survole les points.
```vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"values": "Date,Nombre de VM\n19/12/2015,40\n15/02/2016,52\n18/11/2016,100\n21/12/2016,110\n25/05/2017,131\n11/09/2017,153\n04/10/2017,157\n28/12/2017,173\n23/02/2018,181\n21/06/2018,185\n02/07/2018,189\n13/08/2018,200\n05/11/2018,220\n21/02/2019,246\n16/04/2019,276\n21/07/2019,287\n30/08/2019,300\n30/10/2019,314\n11/02/2020,322\n26/03/2020,336\n",
"format": {"type": "csv",
"parse": {"Date": "date:'%d/%m/%Y'"}}},
"title": "Evolution temporelle du nombre de VM",
"width": 400,
"height": 300,
"layer": [
{
"mark": {"type": "point"},
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Nombre de VM", "type": "quantitative"},
"tooltip": [
{"field": "Date", "type": "temporal"},
{"field": "Nombre de VM", "type": "quantitative"}
]
}
},
{
"mark": {"type": "line", "color": "firebrick"},
"transform": [{"regression": "Nombre de VM", "on": "Date"}],
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Nombre de VM", "type": "quantitative"}
}
}
]
}
```
## En pratique
:::warning
On veut lire directement dans un fichier csv !
:::
On peut distinguer alors deux cas.
### Données publiques en ligne
Si celui-ci est sur une url publique, alors il suffit de remplacer le champ `"data"` par :
```json
{"data": {"url": "https://quelque.part/joel.csv",
"format": {"parse": {"Date": "date:'%d/%m/%Y'"}}}}
```
### Données privées locales
Sinon, on peut publier la page `index.html` :
```html
<!DOCTYPE html>
<html>
<head>
<title>Vega-Lite Bar Chart</title>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vega@5.10.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.11.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.6.0"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<!-- Container for the visualization -->
<div id="vis"></div>
<script>
// Assign the specification to a local variable vlSpec.
var vlSpec = {
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
data: {
url: "joel.csv",
format: { parse: { Date: "date:'%d/%m/%Y'" } },
},
title: "Evolution temporelle du nombre de VM",
width: 400,
height: 300,
layer: [
{
mark: {
type: "point",
},
encoding: {
x: { field: "Date", type: "temporal" },
y: { field: "Nombre de VM", type: "quantitative" },
},
},
{
mark: {
type: "line",
color: "firebrick",
},
transform: [
{
regression: "Nombre de VM",
on: "Date",
},
],
encoding: {
x: {
field: "Date",
type: "temporal",
},
y: {
field: "Nombre de VM",
type: "quantitative",
},
},
},
],
};
// Embed the visualization in the container with id `vis`
vegaEmbed("#vis", vlSpec);
</script>
</body>
</html>
```
en lançant un serveur web local :
```bash
python3 -m http.server 8000
```
puis en se rendant sur http://localhost:8000
## Conclusion
On a l'avantage d'une techno web :
- rien à installer,
- super dynamique,
- facile à intégrer dans un site.
On a l'inconvénient d'une techno web :
- ça bouge vite,
- en *standalone*, ça se complique un peu,
- on a besoin d'une connexion internet sinon :
- on doit installer les bibliothèques javascript localement,
- on perd l'avantage "rien à installer".
Et sinon, un retour de ma très courte expérience avec Vega-lite :
- la grammaire a beau être compacte, on se retrouve souvent frustré de ne pas pouvoir écrire une séquence d'instructions,
- c'est pas sympa du tout à débugger,
- écrire du json à la main est assez désagréable,
- quelques limitations comme la locale que je n'ai pas réussi à mettre en français (pour les dates),
- on peut sûrement aller plus loin avec [Vega](https://vega.github.io/vega/) (tout court) mais je n'ai pas testé.