25:null 26:["$","title",null,{"children":"Vega vogue ! | Malik Koné | Observable"}] 2b:T476,md`# Vega vogue ! *Originaly published in july 2018 by [Jeffrey Heer](https://beta.observablehq.com/@jheer).* _Voici un tutoriel expliquant comment les spécifications JSON de Vega deviennent des graphiques interactifs. Ces notes supposent que le lecteur est famillié avec Vega, au moins au niveau de ["Let's Make a Bar Chart" tutorial](https://vega.github.io/vega/tutorials/bar-chart/)._ La [grammaire de visualization Vega](https://vega.github.io/vega) est une [grammaire déclarative](https://en.wikipedia.org/wiki/Declarative_programming) pour décrire des visualisations. Le moteur Vega analyse les spécificiations au format JSON pour produire un graphique pour le Web. L'une des particularités de Vega est sa capacité à prendre en compte la déclaration des interactions dans un modèle réactif, c'est à dire que Vega met à jour le graphique au fur et à mesure de l'arrivée des données ou des changements de variables. Commençons ce tutoriel avec un diagramme en baton, tout simple, qui inclus une forme basique d'interaction: une glissière qui ajuste l'espace inter batons (_scalePadding_) sur l'axe des abscisses.`2c:T60c,inputSpec = { return { "width": 300, "height": 100, "data": [ { "name": "table", "values": [ {"key": "A", "value": 4}, {"key": "B", "value": 10}, {"key": "C", "value": 7} ] } ], "scales": [ { // sur l'axe des abscisses (horizontal) on veut faire correspondre les clefs (A, B, C) de la table ci-dessus à la largeur sur diagramme "name": "xscale", "type": "band", "domain": {"data": "table", "field": "key"}, "padding": {"signal": "scalePadding"}, // lancement d'un signale pour l'interactivité "range": "width" }, { "name": "yscale", "type": "linear", "domain": {"data": "table", "field": "value"}, "range": "height" } ], "marks": [ // le marqueur, comment représenter les données (disque, rectangle, path...) { "type": "rect", "from": {"data": "table"}, "encode": { "update": { "x": {"scale": "xscale", "field": "key"}, "y": {"scale": "yscale", "field": "value"}, "y2": {"scale": "yscale", "value": 0}, "width": {"scale": "xscale", "band": 1}, "fill": {"value": "steelblue"} } } } ], "signals": [ // qui permet l'interactivité { "name": "scalePadding", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 0.99, "step": 0.01} // définition de la glissière } ] }; }2d:T44d,md`

## Appréhender les Visualisations comme des flux de données Vega générère un _réseaux_ (ou graph orienté, _dataflow_) à partir de la spécification. Il met ensuite en relation des éléments visuels avec le jeu de données, ajoute des axes ou légendes et réagit à tout changement interactif. Le réseaux est composé de noeuds (aussi appelé _operators_) qui effectuent des opérations telles que regrouper ou définir une échelle. Les noeuds peuvent analyser les données des autres noeuds, ou/et des flux de données (comme les jeux initiaux de données ou des élément de la scène grahique). Les liens du graph représentent les dépendances entre les noeuds. Chaque noeud peut avoir une valeur. Par exemple, le noeud correspondant à un 'signal' contient la valeur du signal ou encore celui pour une échelle contient une instance de [d3-scale](https://github.com/d3/d3-scale). Il y a deux types de liens: les _parametres_ qui indiquent si un noeud dépend directement de la valeur d'un autre, et _pulsatifs_ qui font passer les données d'un noeud à l'autre.` 2e:Td21,md`Voyez, en suivant les liens du réseau, comment les calculs se font. Par exemple, à partir du jeux de données \`table\`, un opérateur \`extent\` calcule le minimum et le maximum des valeurs du champs \`value\` pour determinier le paramètre \`yscale\` du \`domain\`. De même, une chaine consistant des opérateurs \`aggregate\`, \`collect\`, et \`values\` calculent les valeurs uniques du champs \`key\` pour déterminer le domaine de \`xscale\`. L'échelle \`xscale\` est aussi paramétrée par le signal \`scalePadding\`. Le jeu de donnnées \`table\` est codé avec des marqueurs de forme rectangulaire par les opérations suivantes: - Un \`datajoin\` qui associe les données d'entrée avec les marqueurs du canvas. - Un \`collect\` qui rassemble la sortie de la jointure ( data join). - Un \`mark\` associe les marqueurs générés à la scène (canvas). - Un \`encode\` qui calcule les code visuel pour déterminer les propriété des marqueurs, et qui est paramétré par les échelles \`xscale\` et \`yscale\`. - Un \`bound\` calcule les pérmiètres des boites pour chaque marqueurs, tant pour l'affichage que la gestion des évenements comme _hit testing_. - Un \`render\` aligne les mise à jours du canvas poru le (re-)rendering. - Finalement, un opérateur \`sieve\` (de filtre) propages les mise à jours des marqueurs (mais pas les marqueurs eux même) aux autres parties du graphe, permettant de ne réévaluer les opérateurs en aval que si les marqueurs changent. Et dans ce cas le \`viewlayout\` (_top_level_) est ré-évalué. Les autres opérateurs de codage visuel — commançant du noeud \`root\` (racine) — s'occupe des propriétés et de la disposition du groupe des (principal _top_level_) marqeurs`2f:T559,md` Le paramètre \`operators\` est une liste de noeuds de données. Les dépendances sont indiquées par un objet \`params\`. Par exemple l'\`operators[9].params.padding: {$ref: 5}\` indique que l'échelle \`yscale\` (noeud \`9\`) depend de la valeur du signal (noeud \`5\`) \`espace inter baton\`. Le paramètre \`bindings\` décrit les associations à l'entrée, ici entre le signal \`l'espace inter baton\` et la glissière. Au niveau des sorties, il y aussi des paramètres — mais non utilisés dans cet exemple — comme par exemple les \`streams\` (flux d'évènements définissant le mouvement de la souris, les cliques, _etc._), les \`updates\`, exprimant les mise à jours survenant après un évènements, ou encore la couleur du fond \`background\` de la vue (canvas). Le programme d'analyse (parser) complie la logique des encodages et de leur expression en JavaScript. Par example, la traduction du bloque de code \`update\` de la spécification en entrée (voir précédement) est stoqué dans le paramètre \`operators[20].params.encoders.$encode.update\` comme le code Javascript suivant: \`\`\`js ${parsedSpec.operators[20].params.encoders.$encode.update.$expr .replace(/if$/g, 'if (') .replace(/$\$/g, ') $') .replace(/([\=\>\-])/g, ' $1 ') .replace(/\,/g, ', ') .replace(/\;/g, ';\n ') } \`\`\` ` 30:T5b5,md`

## Evolution du visuel et des flux de données Une fois la spécification d'entrée analysée et traduite en graphe orienté, nous pouvons instancier l'élement visuel ([\`View\`](https://github.com/vega/vega-view)) interactif. A partir d'une spécification d'entrée, l'élément \`View\` utilise la librairie [vega-runtime](https://github.com/vega/vega-runtime) pour transformer le graphe orientés en un flux dynamiques de données ([\`vega-dataflow\`](https://github.com/vega/vega-dataflow)). Un \`Dataflow\` Vega evalue les noeuds dans leur ordre topologique en s'assurant que toutes les dépences d'un opérateur sont satisfaites avant de l'évaluer. En interne, les instance de liens pulsatifs ([\`Pulse\`](https://github.com/vega/vega-dataflow/blob/master/src/Pulse.js)) sont utilisés pour passer les données d'un noeud à l'autre en observant quel objet a été inséré, supprimé, modifié. L'un des avantages de modéliser les calcul avec un réseau est la possiblité d'effectuer alors des mise à jour selectives et donc plus réactives. Lorsqu'un paramètre change, ou que les données changent, seul les noeuds du graphes liés à la mise à jour changent. Par exemple, utiliser le menu déroulant \`stage\` ci-dessous pour voir quels noeuds sont ré-évalués lorque le signal \`scalePadding\` est mis à jour suite à l'usage de la glissière. ` 31:T75b,md`

## Les prochaines étapes Savoir comment Vega fonctionne peut aider à débuger votre propre visualisation. L'[API de Vega](https://vega.github.io/vega/docs/api/view/) permet l'accès au sources de données, échelle et le plan de scène. Par exemple \`view.scenegraph().root\` atteind l'arbre du plan de scène. Le paramètre \`view._runtime\` donne l'accès au _context d'execution_ du réseaux des opérateurs. L'objet \`view._runtime.nodes\` est une _map_ (représentaion) de tous les opérateurs de flux de données dans l'environnement supérieur (_top level scope_). Les aspects avancés ne sont pas couverts dans ces notes. En particulier, Véga supporte les environement imbriqués (_nested scopes_): les groupes de marqueurs contenant des définitions de signaux, des données et d'échelles dans leur propre espace de nomage (_namespace_). Vega implemente cela via les sous flus (_subflows_), qui peuvent être vue comme des graphes orientés récurcifs. De plus avec le vignetttes (_faceting_), les groupes imbriqués peuvent être définis à partir des données, en requérant que Vega ajoute ou retire dynamiquement les sous-flux selon les données et les interactions des utilisateurs! Les portées imbriquées peut être évaluées avec le tableau \`view._runtime.subcontext\`. Pour aller plus loin, notamment concernant les specification des techniques d'interactions, voir le speech d'Arvind Satyanarayan's à OpenVisConf 2016 ["Reactive Building Blocks: Interactive Visualizations with Vega"](https://www.youtube.com/watch?v=Y8Fp9z-9DWc), ou la notre papier pour InfoVis 2015 ["Reactive Vega: A Streaming Dataflow Architecture for Declarative Interactive Visualization"](http://idl.cs.washington.edu/papers/reactive-vega-architecture/).Ces ressources décrive Véga 2.0 et ces notes Vega 3.0+, mais les concepts centraux sont identiques. ` 32:[] 29:{"id":"162d67dc46bd28bf","slug":"vega-vogue/2","title":"Vega vogue !","thumbnail":"d93cb123c441290f7a1dd6a94809d8ef333ba6163ea0b15d52bbdd419d1e0b92","access_level":"public","create_time":"$D2019-01-29T01:11:15.840Z","update_time":"$D2019-01-29T18:30:48.116Z","view_time":null,"first_public_time":"$D2019-01-29T18:30:53.855Z","has_unpublished_edits":null,"fork":{"id":"7701e57abb3a4586","slug":"how-vega-works","title":"How Vega Works","owner":{"id":"faa3d64559fbe807","login":"vega","name":"Vega"}},"stars":2,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":790,"publish_version":790,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"94dddef164ca86e1","slug":"translations","title":"Translations","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"Vega vogue !","cells":[{"id":0,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"viewof view = {\n const div = document.createElement('div'); // peut aussi s'écrire: const div = html`

`\n div.value = new vega.View(parsedSpec)\n .initialize(div)\n .run();\n return div;\n}\n/* *** footnotes ***\nvega: à été importé grace à require('https://cdn.jsdelivr.net/npm/vega@4.1.0/build/vega.js')\nparsedSpec: Ce sont les spécifications (déclarations) pré-analysées qui permette de générer le diagramme en baton\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`Voici ci-dessous, dans la cellule \\`inputSpect\\`, les spécifications écrites en JSON pour ce graphique.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`Cette première spécification est composée de deux transformations, les mise aux échelles \\`xscale\\` et \\`yscale\\` ainsi que de la définition d'un marqueur \\`rect\\` pour représente les données avec des rectangles mis à l'échelle.\nS'y ajoute le signal \\`scalePadding\\` utilisé pour gérer l'espace inter batons selon \\`xscale\\`, et l'adjonction d'un composant de saisie, la glissière.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`Le graphique ci-dessous illustre le réseau associé à notre diagramme en bâton.\n\nLes noeuds en gris représente les signaux,\nceux en rose les données sources,\nles verts les échelles, et\nles violet les marqueurs visuels.\n\nLes noeud blancs sont des opérations internes pour calculer des statistiques ou propager des mise à jour.\n\nLes liens noirs indique des dépendances **pulsatives**, quand celles en gris sont des dépendances de paramètres.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"dot`${view2dot(viewHide)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"md`

\n## Analyse d'une spécification de Vega\n\nLa première étape pour aller de la spécification aux diagrammes interactifs est l'analyse. Le programme [vega-parser](https://github.com/vega/vega-parser) utilise une spécification écrite au format JSON pour produire une description du graphe orienté dont nous avons parlé ci-dessus. Le résultat est simplement une description. Voyez le comme un type de fichier décrivant le graphe orienté.\n\nRegardez ci-dessous le résultat de l'analyse de \\`l'inputSpec\\`, en agrandissant la cellule \\`parsedSpec\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"parsedSpec = vega.parse(inputSpec)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"viewof stage = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"dot`${view2dot(viewHide, +stage)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md`En plus de la mise à jour incrémentale des données, l'opérateur \\`render\\`\n informe des éléments qui ont été modifiés. En réponse les moteur d'affichage effectuent aussi des mise à jour incrementales, soit en redessinant seulement les pixels affectés dans le Canvas (damage/redraw) soit en modifant juste les élements SVG nécessaires.\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`

\n## Scene (canvas) et rendu\n\nLe Vega \\`Dataflow\\` contruit et entrient une ([scenegraph](https://en.wikipedia.org/wiki/Scene_graph)): un structure de données en forme d'arbre qui modélise tous les élément visuels, position, couleur, forme et taille des marqueurs. Le module [vega-scenegraph](https://github.com/vega/vega-scenegraph) *traverses?* la scène pour en effectuer le __rendu__, pour aboutir à son dessin en utilisant les standards du web, [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) et [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG).\n\nAffichier l'objet \\`scene\\` ci-dessous pour voir le *scenegraph* de notre diagramme en baton.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"scene = JSON.parse(view.scenegraph().toJSON())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"dot`${scene2dot(viewHide)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`\nLes noeuds de l'arbre alternent entre marqueurs boite et marqueurs élément. Les deux premiers niveaux sont le noeud racine et son unique groupe. Ce dernier contient la visualisation. En ouvrant les noeuds juqu'à \\`scene.items[0].items[0]\\`, on trouve un marqueur \\`rect\\` contenant trois éléments: un pour chaque baton de notre diagramme.\n\nL'opération de \\`rendu\\` détaille au plan de scène (*scenegraph*) les éléments qui ont été modifiés. En retour, les dessinateurs (moteur de rendu) effectuent des mise à jour incrémentales efficientes soit en redessinant seulement certains pixels du Canvas (damage/redraw) ou en modifant les éléments approprié du SVG.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md`

\n## Ajouter un axe\n\nLa discussion ci-dessus concerne un example simple qui ne comprend que trois rectangles. Considérons maintenant un exemple plus réaliste en ajoutant l'axe des ordonnées:\n\n\\`\\`\\`json\n${JSON.stringify(axisDef, 0, 2)}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"viewof view2 = {\n const div = document.createElement('div');\n div.value = new vega.View(vega.parse(vega.extend({}, inputSpec, +axisSelector ? axisDef : null)))\n .initialize(div)\n .run();\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof axisSelector = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"md`\nTitillez le menu \\`axisSelector\\` pour basculer entre le diagramme original et le nouveau avec l'axe des y. Notez, comme le réseau se complexifie lorsque l'axe est ajouté. [Ajouter des axes et légendes est une tâche crutiale pour les visualisations, mais étonnamment complexe](https://beta.observablehq.com/@jheer/a-guide-to-guides-axes-legends-in-vega)\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"dot`${view2dot(view2)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"md`En interne, l'analyseur Vega traite les définitions des axes pour générer, un groupe axe, une source de données \\`axisticks\\` (paramétré par \\`yscale\\`), codage visuel pour les tick, les labels, et les lignes de grille. Vega utilise une approche similiare pour générer la légende.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"scene2 = JSON.parse(view2.scenegraph().toJSON())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"dot`${scene2dot(view2)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md`Quand on ajoute l'axe-y (_y-axis_), l'objet \\`scene2\\` _scenegraph_ est inclus et le groupe markeur contenant l'élément axe vient sous \\`scene2.items[0].items[0]\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md`

\n## Imports & Extras`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"axisDef = {\n return {\n \"axes\": [\n {\n \"orient\": \"left\",\n \"scale\": \"yscale\",\n \"grid\": true,\n \"tickCount\": 5\n }\n ]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"// headless view to use so that other cells don't update in\n// response to signal updates on the initial view cell\nviewHide = {\n const view = new vega.View(parsedSpec).initialize();\n view.runAsync().then(function(view) {\n view.signal('scalePadding', 0.5).run();\n });\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"vega = require('https://cdn.jsdelivr.net/npm/vega@4.1.0/build/vega.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"dot = require(\"@observablehq/graphviz@0.0.2/dist/graphviz.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"import {scene2dot, view2dot} from '@jheer/vega2dot'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2a:"$29:body"