36:["$","title",null,{"children":"Tuto Vega. Les aéroports des USA 2008 | Malik Koné | Observable"}] 3e:T451,md`# Tuto Vega. Les aéroports des USA 2008 Voici ma réalisation en suivant le tuto officiel du site [Vega](https://vega.github.io/vega/tutorials/airports/) Nous allons voir comment: - transformer les données, combiner plusieurs jeux de données, gérer l'interaction avec l'utilisateur, la cartographie et incorporer à la fois des données tabulées et en réseaux. Les étapes à suivre sont: 1. Reconnaitre les données 2. Mise à l'échelle 3. Dessiner la carte des USA 4. Ajouter les aéroports 5. Filtrer les aéroports selon leur fréquentation 6. Ajuster la taille des aéroports à leur fréquentation 7. Afficher les noms des aéroports lors d'un survol avec la souris 8. Trier les aéroports par taille 9. Marquer les connexions entre les aéroports 10. Afficher les connexion lors du survol de la souris 11. Accelerer la selection souris grâces à des cellules Voronoi 12. Une dernière chose… Vous pouvez refaire se tuto ici dans observablehq en important la librairie vega (voir ci-dessous) ou vous pouvez le refaire avec [l'éditeur vega en ligne](https://vega.github.io/editor)`3f:T168a,vega({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "autosize": "none", "padding": {"top": 25,"left": 0, "right": 0, "bottom": 0}, "signals": [{"name" : "survol", // Pour les interactions "value": null, "on": [{"events": "@cellule:mouseover", "update": "datum"}, {"events": "@cellule:mouseout", "update": "null"}]}, {"name": "titre", "value": "Aéroports US 2008", "update": "survol ? survol.name + ' (' + survol.iata + ')' : 'Aéroports US 2008'"}, {"name": "voir_pavage", "value": null, "on": [{"events": "dblclick", "update": "voir_pavage ? null : 'brown'"}, {"events": "mousedown!", "update": "voir_pavage"}] }], /* Les jeux de données * Certains sont construits à la volé */ "data": [{ "name": "étatsUS", "url": url.carteUS, "format": {"type": "topojson", "feature": "states"}, "transform": [{ "type": "geopath", "projection": "prjAlber"}]}, {"name": "trafic", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "aggregate", "groupby": ["origin"], "fields": ["count"], "ops": ["sum"], "as": ["vols"]}]}, {"name": "aéroports", "url": url.aeroports, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "trafic", "key": "origin", "fields": ["iata"], "as": ["trafic"]}, {"type": "filter", "expr": "datum.trafic != null"}, {"type": "geopoint", "projection": "prjAlber", "fields": ["longitude", "latitude"]}, {"type": "filter", "expr": "datum.x != null && datum.y != null"}, {"type": "voronoi", "x":"x", "y":"y"}, {"type": "collect", "sort": {"field": "trafic.vols", "order": "descending"}}]}, {"name": "trajets", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "aéroports", "key": "iata", "fields": ["origin", "destination"], "as": ["source", "target"]}, {"type": "filter", "expr": "datum.source && datum.target"}, {"type": "linkpath", "orient": orient, "shape": shape}, { "type": "filter", "expr": "survol && survol.iata == datum.origin"}] }], "scales": [{"name": "taille", // pour la taille des disques "type": "linear", "domain": {"data": "trafic", "field": "vols"}, "range": [16, 1000] }], "projections": [{"name": "prjAlber", // pour l'ajustement de la carte à la 2D "type": "albersUsa", "scale": 1200, "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] }], "marks": [{"type": "path", // pour la carte "from": { "data": "étatsUS"}, "encode": {"enter": {"fill": {"value": "#dedede"}, "stroke": {"value": "white"}}, "update": {"path": {"field": "path"}}}}, {"type": "symbol", // pour les aéroports "from": {"data": "aéroports"}, "encode": {"enter": {"size": {"scale": "taille", "field": "trafic.vols"}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.8}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1.5}}, "update": {"x": {"field": "x"}, "y": {"field": "y"}}}}, {"type": "path", // pour les cellule de voronoï "name": "cellule", "from": {"data": "aéroports"}, "encode": {"enter": {"fill": {"value": "transparent"}, "strokeWidth": 0.35}, "update": {"path": {"field": "path"}, "stroke": {"signal": "voir_pavage"}}}}, {"type": "text", // pour le titre "interactive": false, "encode": {"enter": {"fill": {"value": "black"}, "fontSize": {"value": 20}, "align": {"value": "right"}, "x": {"signal": "width", "offset": -5}, "y": {"value": 0}}, "update": {"text": {"signal": "titre"}}}}, // pour les trajets {"type": "path", "interactive": false, "from": {"data":"trajets"}, "encode": {"enter": {"stroke": {"value": "black"}, "strokeOpacity": {"value": 0.35}, "path": {"field": "path"}}} }] }) 40:T654,md`

## 1. Reconnaître les données Il y a trois jeux de données: + [us-10m.json](https://gist.githubusercontent.com/maliky/666c694c06de1dc3a9beb77b6026ff3a/raw/dfbf6fc2ca218649281b505664a3dfb4d57d256b/us-10m.json) : un fichier TopoJSON qui contient le découpages des états des USA à l'échelle 1:10 000 000. C'est possible de récupérer des TopoJSON de n'import où avec des outils de l'Atlas TopoJSON ou en ligne. + aeroports.csv ou [carteUS](https://gist.githubusercontent.com/maliky/666c694c06de1dc3a9beb77b6026ff3a/raw/dfbf6fc2ca218649281b505664a3dfb4d57d256b/aeroports.csv) : un fichier CSV (Valeurs Séparées par Comma ',') qui liste les aéroports des USA ainsi que leurs noms, lieu et coordonnées (latitude, longitude). Exemple, \`\`\`csv iata,name,city,state,country,latitude,longitude 00M,Thigpen,Bay Springs,MS,USA,31.95376472,-89.23450472 00R,Livingston Municipal,Livingston,TX,USA,30.68586111,-95.01792778 00V,Meadow Lake,Colorado Springs,CO,USA,38.94574889,-104.5698933 01G,Perry-Warsaw,Perry,NY,USA,42.74134667,-78.05208056 \`\`\` + flights-airports.csv ou [vols] (https://gist.githubusercontent.com/maliky/666c694c06de1dc3a9beb77b6026ff3a/raw/dfbf6fc2ca218649281b505664a3dfb4d57d256b/flights-airports.csv) : Un fichier avec des données sur les vols de l'année 2008. Chaque enregistrement est composé d'un couple d'aéroports (origin, destination) identifiés par leur code IATA et le nombre de vols sur se trajet. Cela nous sera utile pour calculer la fréquentaion des aéroports. Exemple, \`\`\`csv origin,destination,count ABE,ATL,853 ABE,BHM,1 ABE,CLE,805 ABE,CLT,465 \`\`\` `41:T6ae,vega({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "padding": {"top": 0, "left": 0, "right": 0, "bottom": 0}, "signals": [], "data": [{ /* 1) on ajoute le jeu de donnée */ "name": "etatsUS", // un nom pour ce jeu de donées "url": url.carteUS, // où trouver les données "format": {"type": "topojson", "feature": "states"} // des infos sur le jeux de données qui facilite le traitement automatique. 'features' correspond au 'champs' ou a un nom de colonnes , /* 3) On lie, ou applique,la transformation définie en 2 à notre jeu de données */ "transform": [{ "type": "geopath", "projection": "prjAlber"}] }], "scales": [], "projections": [{ /* 2) On définie une transformation */ "name": "prjAlber", // nom comme vous voulez "type": "albersUsa", // son type "scale": 1200, // l'échelle finale "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] // on centre la carte... pourquoi signal ? }], "marks": [{ /* 4) Dire comment tracer les frontières ? */ "type": "path", // le type de traçage "from": {"data": "etatsUS"}, // le jeux de données "encode": { "enter": { // Ce qu'il faut faire pour les données entrantes "fill": {"value": "#dedede"}, // couleur de remplissage "stroke": {"value": "white"}}, // couleur de la bordure "update": { // Ce qu'il faut faire pour les mise à jour "path": {"field": "path"} // trace les données du champs path. On met ça ici pour que le graphique se met à jour en cas de changement de taille de la fenêtre. } } }] })42:T96d,vega({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "padding": {"top": 0, "left": 0, "right": 0, "bottom": 0}, "signals": [], "data": [{ "name": "étatsUS", "url": url.carteUS, "format": {"type": "topojson", "feature": "states"}, "transform": [{ "type": "geopath", "projection": "prjAlber"}] },{ // notez la format du tableau JSON '[{...}, {...}, ..., {...}]' /* 1) on ajoute un nouveau jeu de donnés */ "name": "aéroports", "url": url.aeroports, "format": {"type": "csv", "parse": "auto"}, /* 2) on transforme nos (latitude, longitude) en points sur le graph. On utilise pour cela la projection 'prjAlber' déjà déclarée */ "transform": [{ "type": "geopoint", // on projette des points pas des chemins (paths) "projection": "prjAlber", "fields": ["longitude", "latitude"] // les champs à transformer (ou projeter) par défaut dans x et y },{ /* On ajoute une autre transformation pour ce jeu de données. Il s'agit d'enlever les points null */ "type": "filter", "expr": "datum.x != null && datum.y != null" }] }], "scales": [], "projections": [{ // notez le 's' à projections "name": "prjAlber", "type": "albersUsa", "scale": 1200, "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] }], "marks": [{ // et de 'marks' "type": "path", "from": {"data": "étatsUS"}, "encode": { "enter": { "fill": {"value": "#dedede"}, "stroke": {"value": "white"}}, "update": { "path": {"field": "path"}}} },{ /* 3) On ajoute un marqueur pour les aéroports, par défaut le symbol sera un disque */ "type": "symbol", "from": {"data": "aéroports"}, "encode": { "enter": { // on définie la création des points, leur taille, leur couleur, leur opacité et leur bordure "size": {"value": 16}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.8}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1.5} }, "update": { // comme précédement la position est dans l'update pour se mettre à jour en cas de redimensionnement de la fenêtre "x": {"field": "x"}, "y": {"field": "y"} } } }] }) 43:T9b2,vega({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "padding": {"top": 0, "left": 0, "right": 0, "bottom": 0}, "signals": [], "data": [{ "name": "étatsUS", "url": url.carteUS, "format": {"type": "topojson", "feature": "states"}, "transform": [{ "type": "geopath", "projection": "prjAlber"}]}, { "name": "trafic", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{ "type": "aggregate", "groupby": ["origin"], "fields": ["count"], "ops": ["sum"], "as": ["vols"] }] }, { "name": "aéroports", "url": url.aeroports, "format": {"type": "csv", "parse": "auto"}, "transform": [{ "type": "lookup", "from": "trafic", "key": "origin", "fields": ["iata"], "as": ["vols"] },{ "type": "filter", "expr": "datum.vols != null" },{ "type": "geopoint", "projection": "prjAlber", "fields": ["longitude", "latitude"]}, { "type": "filter", "expr": "datum.x != null && datum.y != null"}] }], "scales": [], "projections": [{ "name": "prjAlber", "type": "albersUsa", "scale": 1200, "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] }], "marks": [{"type": "path", "from": { "data": "étatsUS"}, "encode": {"enter": {"fill": {"value": "#dedede"}, "stroke": {"value": "white"}}, "update": {"path": {"field": "path"}}}}, {"type": "symbol", "from": {"data": "aéroports"}, "encode": {"enter": {"size": {"value": 16}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.8}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1.5}}, "update": {"x": {"field": "x"}, "y": {"field": "y"} } } }] }) 44:Tba7,vega({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "padding": {"top": 0, "left": 0, "right": 0, "bottom": 0}, "signals": [], "data": [{ "name": "étatsUS", "url": url.carteUS, "format": {"type": "topojson", "feature": "states"}, "transform": [{ "type": "geopath", "projection": "prjAlber"}]}, {"name": "trafic", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "aggregate", "groupby": ["origin"], "fields": ["count"], "ops": ["sum"], "as": ["vols"]}]}, {"name": "aéroports", "url": url.aeroports, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "trafic", "key": "origin", // attention ! on dirait le nom de table trafic ici "fields": ["iata"], "as": ["trafic"]}, {"type": "filter", "expr": "datum.trafic != null"}, {"type": "geopoint", "projection": "prjAlber", "fields": ["longitude", "latitude"]}, { "type": "filter", "expr": "datum.x != null && datum.y != null"}] }], "scales": [{ // 1) on crée une échelle entre le trafic et l'aire des points "name": "taille", "type": "linear", "domain": {"data": "trafic", "field": "vols"}, "range": [16, 1000] }], "projections": [{"name": "prjAlber", "type": "albersUsa", "scale": 1200, "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] }], "marks": [{"type": "path", "from": { "data": "étatsUS"}, "encode": {"enter": {"fill": {"value": "#dedede"}, "stroke": {"value": "white"}}, "update": {"path": {"field": "path"}}}}, {"type": "symbol", "from": {"data": "aéroports"}, // 2) on met à jour la taille des marqueurs points... "encode": {"enter": {"size": {"scale": "taille", "field": "trafic.vols"}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.8}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1.5}}, "update": {"x": {"field": "x"}, "y": {"field": "y"} } } }] })45:T1302,vega({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "padding": {"top": 25, // 3) On ajoute cela pour que le texte soit bien dessiner dans le chart et pas au dessus. "left": 0, "right": 0, "bottom": 0}, // 1) Ajouter les signaux "signals": [{ "name" : "survol", // un nom pour ce signal "value": null, // valeur de départ "on": [{ // doit correspondre à un évenement JavaScript ?? voir doc "events": "symbol:mouseover", // on spécify l'événement "update": "datum" // on envois alors le datum à update du symbol survolé },{ "events": "symbol:mouseout", // au moment de la sortie "update": "null" // l'update devient null, noter qu'ici "null" est entre guillement pas comme pour value au dessus }] },{ // On ajoute un deuxième signale qui prétraite le premier avant de l'envoyer vers le marquer text "name": "titre", "value": "Aéroports US 2008", // le signal titre sera mis à jour lorsque le sourisSurvol sera mis à jour et titre prendra la valeur de l'expression.. c'est un if else concis. "update": "survol ? survol.name + ' (' + survol.iata + ')' : 'Aéroports US 2008'" }], "data": [{ "name": "étatsUS", "url": url.carteUS, "format": {"type": "topojson", "feature": "states"}, "transform": [{ "type": "geopath", "projection": "prjAlber"}]}, {"name": "trafic", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "aggregate", "groupby": ["origin"], "fields": ["count"], "ops": ["sum"], "as": ["vols"]}]}, {"name": "aéroports", "url": url.aeroports, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "trafic", "key": "origin", "fields": ["iata"], "as": ["trafic"]}, {"type": "filter", "expr": "datum.trafic != null"}, {"type": "geopoint", "projection": "prjAlber", "fields": ["longitude", "latitude"]}, { "type": "filter", "expr": "datum.x != null && datum.y != null"}] }], "scales": [{"name": "taille", "type": "linear", "domain": {"data": "trafic", "field": "vols"}, "range": [16, 1000] }], "projections": [{"name": "prjAlber", "type": "albersUsa", "scale": 1200, "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] }], "marks": [{"type": "path", "from": { "data": "étatsUS"}, "encode": {"enter": {"fill": {"value": "#dedede"}, "stroke": {"value": "white"}}, "update": {"path": {"field": "path"}}}}, {"type": "symbol", "from": {"data": "aéroports"}, "encode": {"enter": {"size": {"scale": "taille", "field": "trafic.vols"}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.8}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1.5}}, "update": {"x": {"field": "x"}, "y": {"field": "y"}}}}, // 2) on ajoute le marqueur texte pour l'écriture du titre { "type": "text", // il n'y a pas de fron, donc un seul élément sera généré, "interactive": false, // pourquoi ? "encode": {"enter": {"fill": {"value": "black"}, "fontSize": {"value": 20}, "align": {"value": "right"}, // le x et y sont ici et pas dans update car pas besoin de mettre à jour la position du titre ? "x": {"signal": "width", // width est un signal automatique lié à la taille de la fenêtre du navigateur "offset": -5}, "y": {"value": 0}}, "update": { "text": {"signal": "titre"} // la valeur svg du text sera donc mis à jour avec celle du signal titre } } } ] })46:T1066,vega({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "padding": {"top": 25,"left": 0, "right": 0, "bottom": 0}, "signals": [{"name" : "survol", "value": null, "on": [{"events": "symbol:mouseover", "update": "datum"}, {"events": "symbol:mouseout", "update": "null"}]}, {"name": "titre", "value": "Aéroports US 2008", "update": "survol ? survol.name + ' (' + survol.iata + ')' : 'Aéroports US 2008'" }], "data": [{ "name": "étatsUS", "url": url.carteUS, "format": {"type": "topojson", "feature": "states"}, "transform": [{ "type": "geopath", "projection": "prjAlber"}]}, {"name": "trafic", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "aggregate", "groupby": ["origin"], "fields": ["count"], "ops": ["sum"], "as": ["vols"]}]}, {"name": "aéroports", "url": url.aeroports, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "trafic", "key": "origin", "fields": ["iata"], "as": ["trafic"]}, {"type": "filter", "expr": "datum.trafic != null"}, {"type": "geopoint", "projection": "prjAlber", "fields": ["longitude", "latitude"]}, {"type": "filter", "expr": "datum.x != null && datum.y != null"}, // On rajoute notre tri ici { "type": "collect", // c'est un type collect, ie qui va récupérer toutes les données "sort": {"field": "trafic.vols", // et trier selon ce champs "order": "descending"} // dans cet ordre } ] }], "scales": [{"name": "taille", "type": "linear", "domain": {"data": "trafic", "field": "vols"}, "range": [16, 1000] }], "projections": [{"name": "prjAlber", "type": "albersUsa", "scale": 1200, "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] }], "marks": [{"type": "path", "from": { "data": "étatsUS"}, "encode": {"enter": {"fill": {"value": "#dedede"}, "stroke": {"value": "white"}}, "update": {"path": {"field": "path"}}}}, {"type": "symbol", "from": {"data": "aéroports"}, "encode": {"enter": {"size": {"scale": "taille", "field": "trafic.vols"}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.8}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1.5}}, "update": {"x": {"field": "x"}, "y": {"field": "y"}}}}, { "type": "text", "interactive": false, "encode": {"enter": {"fill": {"value": "black"}, "fontSize": {"value": 20}, "align": {"value": "right"}, "x": {"signal": "width", "offset": -5}, "y": {"value": 0}}, "update": { "text": {"signal": "titre"} } } } ] }) 47:T15cc,vega({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "padding": {"top": 25,"left": 0, "right": 0, "bottom": 0}, "signals": [{"name" : "survol", "value": null, "on": [{"events": "symbol:mouseover", "update": "datum"}, {"events": "symbol:mouseout", "update": "null"}]}, {"name": "titre", "value": "Aéroports US 2008", "update": "survol ? survol.name + ' (' + survol.iata + ')' : 'Aéroports US 2008'" }], "data": [{ "name": "étatsUS", "url": url.carteUS, "format": {"type": "topojson", "feature": "states"}, "transform": [{ "type": "geopath", "projection": "prjAlber"}]}, {"name": "trafic", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "aggregate", "groupby": ["origin"], "fields": ["count"], "ops": ["sum"], "as": ["vols"]}]}, {"name": "aéroports", "url": url.aeroports, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "trafic", "key": "origin", "fields": ["iata"], "as": ["trafic"]}, {"type": "filter", "expr": "datum.trafic != null"}, {"type": "geopoint", "projection": "prjAlber", "fields": ["longitude", "latitude"]}, {"type": "filter", "expr": "datum.x != null && datum.y != null"}, {"type": "collect", "sort": {"field": "trafic.vols", "order": "descending"}}]}, // 1) on ajoute une nouvelle source donnée, mais à partir d'un jeu existant { "name": "trajets", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{ // jointure "type": "lookup", // pour les jointures ce sont des lookup "from": "aéroports", "key": "iata", // on définie la clef de jointure "fields": ["origin", "destination"], "as": ["source", "target"] // on utlise ces nom de variables car ce sont celles utilisées par défaut lors de la transformation },{ // filtrage des aéroports avec des destination ou sources nulles "type": "filter", "expr": "datum.source && datum.target" },{ // on transform notre source target en ligne (droite ou courbe) "type": "linkpath", "shape": "line" // line est la valeur par défaut mais peut essayer "curve" pour voir la diff }] }], "scales": [{"name": "taille", "type": "linear", "domain": {"data": "trafic", "field": "vols"}, "range": [16, 1000] }], "projections": [{"name": "prjAlber", "type": "albersUsa", "scale": 1200, "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] }], "marks": [{"type": "path", "from": { "data": "étatsUS"}, "encode": {"enter": {"fill": {"value": "#dedede"}, "stroke": {"value": "white"}}, "update": {"path": {"field": "path"}}}}, {"type": "symbol", "from": {"data": "aéroports"}, "encode": {"enter": {"size": {"scale": "taille", "field": "trafic.vols"}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.8}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1.5}}, "update": {"x": {"field": "x"}, "y": {"field": "y"}}}}, {"type": "text", "interactive": false, "encode": {"enter": {"fill": {"value": "black"}, "fontSize": {"value": 20}, "align": {"value": "right"}, "x": {"signal": "width", "offset": -5}, "y": {"value": 0}}, "update": { "text": {"signal": "titre"} } } }, { // 2) on ajoute de nouveaux marqueurs pour les trajets "type": "path", "interactive": false, // pour ne pas interagir avec la souris "from": {"data":"trajets"}, "encode": {"enter": {"stroke": {"value": "black"}, "strokeOpacity": {"value": 0.15}, "path": {"field": "path"} // path est probablement généré automatiquement par la transformation linkpath }} } ] }) 48:T14ad,vega({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "padding": {"top": 25,"left": 0, "right": 0, "bottom": 0}, "signals": [{"name" : "survol", "value": null, "on": [{"events": "symbol:mouseover", "update": "datum"}, {"events": "symbol:mouseout", "update": "null"}]}, {"name": "titre", "value": "Aéroports US 2008", "update": "survol ? survol.name + ' (' + survol.iata + ')' : 'Aéroports US 2008'" }], "data": [{ "name": "étatsUS", "url": url.carteUS, "format": {"type": "topojson", "feature": "states"}, "transform": [{ "type": "geopath", "projection": "prjAlber"}]}, {"name": "trafic", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "aggregate", "groupby": ["origin"], "fields": ["count"], "ops": ["sum"], "as": ["vols"]}]}, {"name": "aéroports", "url": url.aeroports, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "trafic", "key": "origin", "fields": ["iata"], "as": ["trafic"]}, {"type": "filter", "expr": "datum.trafic != null"}, {"type": "geopoint", "projection": "prjAlber", "fields": ["longitude", "latitude"]}, {"type": "filter", "expr": "datum.x != null && datum.y != null"}, {"type": "collect", "sort": {"field": "trafic.vols", "order": "descending"}}]}, { "name": "trajets", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "aéroports", "key": "iata", "fields": ["origin", "destination"], "as": ["source", "target"]}, {"type": "filter", "expr": "datum.source && datum.target"}, {"type": "linkpath", "orient": orient, "shape": shape}, // 1) On rajoute notre filtre avec le signal survol qui existe déjà { "type": "filter", // on doit survoler un objet et le iata de l'objet survolé doit être == origin "expr": "survol && survol.iata == datum.origin" } ] }], "scales": [{"name": "taille", "type": "linear", "domain": {"data": "trafic", "field": "vols"}, "range": [16, 1000] }], "projections": [{"name": "prjAlber", "type": "albersUsa", "scale": 1200, "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] }], "marks": [{"type": "path", "from": { "data": "étatsUS"}, "encode": {"enter": {"fill": {"value": "#dedede"}, "stroke": {"value": "white"}}, "update": {"path": {"field": "path"}}}}, {"type": "symbol", "from": {"data": "aéroports"}, "encode": {"enter": {"size": {"scale": "taille", "field": "trafic.vols"}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.8}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1.5}}, "update": {"x": {"field": "x"}, "y": {"field": "y"}}}}, {"type": "text", "interactive": false, "encode": {"enter": {"fill": {"value": "black"}, "fontSize": {"value": 20}, "align": {"value": "right"}, "x": {"signal": "width", "offset": -5}, "y": {"value": 0}}, "update": { "text": {"signal": "titre"}}}}, {"type": "path", "interactive": false, "from": {"data":"trajets"}, "encode": {"enter": {"stroke": {"value": "black"}, // on ajoute de l'opacité "strokeOpacity": {"value": 0.35}, "path": {"field": "path"} }} } ] }) 49:T17dc,vega({ // découpage sur chaque virgule si plus de 4 mots dans les parenthèse (ou alors mots très court) "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 900, "height": 560, "autosize": "none", // important au moment de l'ajout du pavage de vornoi "padding": {"top": 25,"left": 0, "right": 0, "bottom": 0}, "signals": [{"name" : "survol", "value": null, // 3) on ce n'est plus le symbol qui reçoit l'événement mais la cellule // du pavage. le '@' permet de référence un marqueur à l'aide de son nom. "on": [{"events": "@cellule:mouseover", "update": "datum"}, {"events": "@cellule:mouseout", "update": "null"}]}, {"name": "titre", "value": "Aéroports US 2008", "update": "survol ? survol.name + ' (' + survol.iata + ')' : 'Aéroports US 2008'" }], "data": [{ "name": "étatsUS", "url": url.carteUS, "format": {"type": "topojson", "feature": "states"}, "transform": [{ "type": "geopath", "projection": "prjAlber"}]}, {"name": "trafic", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "aggregate", "groupby": ["origin"], "fields": ["count"], "ops": ["sum"], "as": ["vols"]}]}, {"name": "aéroports", "url": url.aeroports, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "trafic", "key": "origin", "fields": ["iata"], "as": ["trafic"]}, {"type": "filter", "expr": "datum.trafic != null"}, {"type": "geopoint", "projection": "prjAlber", "fields": ["longitude", "latitude"]}, {"type": "filter", "expr": "datum.x != null && datum.y != null"}, // 1) On ajoute une nouvelle transformation de ce jeu de donnée {"type": "voronoi", "x":"x", "y":"y"}, // avant le sort {"type": "collect", "sort": {"field": "trafic.vols", "order": "descending"}}]}, {"name": "trajets", "url": url.trafic, "format": {"type": "csv", "parse": "auto"}, "transform": [{"type": "lookup", "from": "aéroports", "key": "iata", "fields": ["origin", "destination"], "as": ["source", "target"]}, {"type": "filter", "expr": "datum.source && datum.target"}, {"type": "linkpath", "orient": orient, "shape": shape}, { "type": "filter", "expr": "survol && survol.iata == datum.origin"}] }], "scales": [{"name": "taille", "type": "linear", "domain": {"data": "trafic", "field": "vols"}, "range": [16, 1000] }], "projections": [{"name": "prjAlber", "type": "albersUsa", "scale": 1200, "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] }], "marks": [{"type": "path", "from": { "data": "étatsUS"}, "encode": {"enter": {"fill": {"value": "#dedede"}, "stroke": {"value": "white"}}, "update": {"path": {"field": "path"}}}}, {"type": "symbol", "from": {"data": "aéroports"}, "encode": {"enter": {"size": {"scale": "taille", "field": "trafic.vols"}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.8}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1.5}}, "update": {"x": {"field": "x"}, "y": {"field": "y"}}}}, // 2) Trace le pavage mais avec un marqueur invisible {"type": "path", "name": "cellule", // le nom du marqueur pour le référencer plus facilement "from": {"data": "aéroports"}, "encode": {"enter": {"fill": {"value": "transparent"}}, //"strokeWidht": {"value": 0.35}}, // remplissage transparent mais existe et réagira // aux interactions avec la souris "update": {"path": {"field": "path"}}}}, // "stroke": {"signal": "cell_stroke"}} // le dessin à lieu ici {"type": "text", "interactive": false, "encode": {"enter": {"fill": {"value": "black"}, "fontSize": {"value": 20}, "align": {"value": "right"}, "x": {"signal": "width", "offset": -5}, "y": {"value": 0}}, "update": { "text": {"signal": "titre"}}}}, {"type": "path", "interactive": false, "from": {"data":"trajets"}, "encode": {"enter": {"stroke": {"value": "black"}, "strokeOpacity": {"value": 0.35}, "path": {"field": "path"} }} } ] }) 4a:[] 3a:{"id":"eaca18a5ce2a2e9c","slug":"untitled/2","title":"Tuto Vega. Les aéroports des USA 2008","thumbnail":"89fc97403dd46037c724d02aeb3d69277fb318ee84173cb52606b3d777533789","access_level":"public","create_time":"$D2019-02-07T19:53:56.713Z","update_time":"$D2019-02-10T13:30:58.551Z","view_time":null,"first_public_time":"$D2019-02-09T22:11:35.054Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024","bio":"seed, teach, grow","followed_by_you":false,"follows_you":false},"version":287,"publish_version":287,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"bio":"seed, teach, grow","followed_by_you":false,"follows_you":false}],"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":1,"collection":{"id":"33332922de5e29a1","slug":"seeds","title":"Seeds","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"titling":"auto","title":"Tuto Vega. Les aéroports des USA 2008","cells":[{"id":0,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"vega = require(\"vega-embed\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"url = ({ carteUS:\"https://gist.githubusercontent.com/maliky/666c694c06de1dc3a9beb77b6026ff3a/raw/dfbf6fc2ca218649281b505664a3dfb4d57d256b/us-10m.json\",\n aeroports: \"https://gist.githubusercontent.com/maliky/666c694c06de1dc3a9beb77b6026ff3a/raw/dfbf6fc2ca218649281b505664a3dfb4d57d256b/aeroports.csv\",\n trafic:\"https://gist.githubusercontent.com/maliky/666c694c06de1dc3a9beb77b6026ff3a/raw/dfbf6fc2ca218649281b505664a3dfb4d57d256b/flights-airports.csv\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`

\n## 2. Mise en place\n(_scaffolding_ ~ échafaudage)\nOn initialise la zone de dessin, les marges et les différentes rubriques (tableaux ou array JSON). Ils seront remplis au fur et à mesure du tutos.\n\\`\\`\\`json\nvega({\n \"$schema\": \"https://vega.github.io/schema/vega/v4.json\",\n \"width\": 900, // largeur\n \"height\": 560, // et hauteur de la vue\n \"padding\": {\"top\": 0, \"left\": 0, \"right\": 0, \"bottom\": 0}, // les marges \n \"signals\": [], // pour les variables qui réactivées par les utilisateurs\n \"data\": [], // pour charger et transformer nos données\n \"scales\": [], // pour les échelles (associe les données à des variables visuelles\n \"projections\": [], // pour dessiner la carte\n \"marks\": [] // pour les éléments graphique affichant les données\n})\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"vega({\n \"$schema\": \"https://vega.github.io/schema/vega/v4.json\",\n \"width\": 900, // largeur\n \"height\": 560, // et hauteur de la vue\n \"padding\": {\"top\": 0, \"left\": 0, \"right\": 0, \"bottom\": 0}, // les marges \n \"signals\": [], // pour les variables qui réactivées par les utilisateurs\n \"data\": [], // pour charger et transformer nos données\n \"scales\": [], // pour les échelles (associe les données à des variables visuelles\n \"projections\": [], // pour dessiner la carte\n \"marks\": [] // pour les éléments graphique affichant les données\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`

\n## 3. Dessiner la carte des USA\nEn quatres étapes:\n+ on ajoute un jeu de données,\n+ on défini un type de transformation, ici une projection topographique de type [Albers](https://fr.wikipedia.org/wiki/Projection_d%27Albers),\n+ on lie la transformation au jeu de données\n+ reste à tracer les frontières.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`

\n## 4. Ajouter les aéroports\nPour cela il y a trois choses à faire:\n+ référencer le jeu de données avec les aéroports\n+ lier les coordonnées (latitude, longitude) à des points sur la carte\n+ dessiner les points à l'aide d'un marqueur 'disque'`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`_note_: J'ai ajouté des accents aux varialbes 'étatsUS' et 'aéroports'. Par ailleurs, n'hésitez pas à remonter voir les jeux de données. La visualisiation des données passe par une très bonnes connaissance des jeux de données brutes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`

\n## 5. Filtrer les aéroports selon leur fréquentation\nIl y a trois choses à faire:\n+ Ajouter le jeu de données brutes avec les information sur les vols en 2008\n+ calculer, à partir de ces données, le nombre de vols au départ de chaque aéroports et (*joindre*) associer ce nombre au nom de l'aéroport\n+ Supprimer de la carte les aéroports sans vols au départ en 2008`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`

\n## 6. Ajuster la taille des aéroports à leur fréquentation\nIci il suffit:\n+ de créer une échelle qui associe au nombre de vols, une taille de disque,\n+ modifier les marqueurs des aéroports (les points)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`

\n## 7. Afficher les noms des aéroports lors d'un survol avec la souris\nPour cela nous devons:\n+ ajouter de l'interactivité en définissant des signaux\n+ afficher le titre en fonction des interactions utilisateurs\n+ ajuster l'affichage des titres`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`

\n## 8. Trier les aéroports par taille\nOn va simple ajouer une transformation au jeu de données aéorports pour que les gros aéroports soient dessiner avant les petits`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`Et voilà ! Les petits points sont sur les gros.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`

\n## 9. Marquer les trajets entre les aéroports\nIl y a 3 choses à faire:\n+ récupérer les données grâce à une jointure\n+ générer les trajets (les lignes ou courbes ) SVG\n+ les tracer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`

\n## 10. Afficher les connexion lors du survol de la souris\nTous est en place est c'est relativement simple d'ajouter un filtre pour que seul les trajets au départ de l'aéroport survolé s'affiche.\n+ ajoutons un filtre aux trajets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`##### Bonus\nAmusons nous à changer la forme des connexions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"viewof shape = radio({\n title: 'Forme des connexions',\n description: 'choisir une forme,, une orientation, puis survolez un aéroport',\n options: [\n { label: 'ligne', value: 'line' },\n { label: 'courbe', value: 'curve' },\n { label: 'arc', value: 'arc' },\n { label: 'diagonale', value: 'diagonal' },\n { label: 'orthogonal', value: 'orthogonal' },\n ],\n value: 'line'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"viewof orient = radio({\n title: 'Orientations',\n description: 'avec radial x et y sont interprétés comme angle et rayon',\n options: [\n { label: 'vertical (défaut)', value: 'vertical' },\n { label: 'horizontal', value: 'horizontal' },\n { label: 'radial', value: 'radial' },\n ],\n value: 'vertical'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`

\n## 11. Accelerer la selection souris grâces à des cellules Voronoi\nPour faciliter la selection des petits aéroports nous allons ajouté un cadrillage invisible appellé [pavage de Voronoï](https://fr.wikipedia.org/wiki/Diagramme_de_Vorono%C3%AF). Pour cela trois choses:\n+ Générer le pavage en ajoutant une transformation au jeu de donnée des aéroports\n+ tracer le pavage (mais de façon invisible)\n+ mettre à jour l'interaction avec la souris.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`

\n## 12. Une dernière chose…\nIl y a une supprise si vous double-cliquez sur la première carte tout en haut. Regardez alors le code et voyez ce qui a été ajouté.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 35:null