Extension:Graph/Demo/fr

Cette page donne quelques exemples de ce que peut faire l'extension. Les graphiques utilisent la grammaire Vega (documentation) comme technologie sous-jacente. L'équipe Vega travaille sur d'autres outils pour faciliter l'utilisation des graphiques. Pour les graphiques interactifs ce tutoriel expliquera étape par étape leur construction. Pour d'autres idées de graphiques, voir les exemples Vega.



Modèles de Graph
Le moyen le plus simple d'utiliser des graphiques consiste à utiliser des modèles prédéfinis tels que Graph:Chart (disponible sur de nombreux Wikipédias), ou des modèles plus spécialisés Graphique circulaire. Graph:Chart prend en charge de nombreux types de graphiques courants, tels que les graphiques linéaires, les aires et les secteurs :





Exemples interactifs de Vega 2.0
Extension:Graph/Demo/Dimpvis

Extension:Graph/Demo/Airports

Extension:Graph/Demo/OverviewDetail

Extension:Graph/Demo/IndexChart



Utiliser l'API RESTBase
Affichez les graphiques des pages vues pendant une plage de dates, à l'aide de l'API d'analyse des pages vues. Voir.

Page actuelle et page principale de en.wikipedia.org des 30 derniers jours

Page actuelle et page principale de en.wikipedia des 30 derniers jours - par type



Utiliser l'API MediaWiki
Ce graphique montre l'historique des modifications d'une page wiki. Voir.

Ce graphique montre le nombre de pages dans chaque sous-catégorie. Voir code source du graphique.



Utiliser l'API de requête de service Wikidata
Voir plus d'exemples.

Arbres


Arbre cartésien
Extension:Graph/Demo/CartesianTree



Arbre radial
Extension:Graph/Demo/RadialTree

Dendrogramme
Extension:Graph/Demo/Dendrogram



Agenda /cycle de vie
{ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 800, "height": 200, "autosize": { "type": "fit", "resize": false, "contains": "padding" },

"data": [ {     "name": "people", "values": [ {         "label": "Washington", "born": -7506057600000, "died": -5366196000000, "enter": -5701424400000, "leave": -5453884800000 },       {          "label": "Adams", "born": -7389766800000, "died": -4528285200000, "enter": -5453884800000, "leave": -5327740800000 },       {          "label": "Jefferson", "born": -7154586000000, "died": -4528285200000, "enter": -5327740800000, "leave": -5075280000000 },       {          "label": "Madison", "born": -6904544400000, "died": -4213184400000, "enter": -5075280000000, "leave": -4822819200000 },       {          "label": "Monroe", "born": -6679904400000, "died": -4370518800000, "enter": -4822819200000, "leave": -4570358400000 }     ]    },    {      "name": "events", "format": { "type": "json", "parse": { "when": "date" }     },      "values": [ {         "name": "Decl. of Independence", "when": -6106032422000 },       {          "name": "U.S. Constitution", "when": -5706346022000 },       {          "name": "Louisiana Purchase", "when": -5259744422000 },       {          "name": "Monroe Doctrine", "when": -4609930022000 }     ]    }  ],  "scales": [ {     "name": "y", "type": "band", "range": "height", "domain": { "data": "people", "fields": [ "label" ]     }    },    {      "name": "x", "type": "time", "range": "width", "round": true, "domain": { "data": "people", "fields": [ "born", "died" ]     }    }  ],  "axes": [ {     "encode": { "labels": { "update": { "fontSize": { "value": 18 }         }        }      },      "scale": "x", "orient": "bottom" } ],  "marks": [ {     "type": "text", "from": { "data": "events" },     "encode": { "enter": { "x": { "scale": "x", "field": "when" },         "y": { "value": -10 },         "angle": { "value": -25 },         "fill": { "value": "#000" },         "text": { "field": "name" },         "font": { "value": "Helvetica Neue" },         "fontSize": { "value": 20 }       }      }    },    {      "type": "rect", "from": { "data": "events" },     "encode": { "enter": { "x": { "scale": "x", "field": "when" },         "y": { "value": -8 },         "width": { "value": 1 },         "height": { "field": { "group": "height" },           "offset": 8 },         "fill": { "value": "#888" }       }      }    },    {      "type": "text", "from": { "data": "people" },     "encode": { "enter": { "x": { "scale": "x", "field": "born" },         "y": { "scale": "y", "field": "label", "offset": -3 },         "fill": { "value": "#000" },         "text": { "field": "label" },         "font": { "value": "Helvetica Neue" },         "fontSize": { "value": 20 }       }      }    },    {      "type": "rect", "from": { "data": "people" },     "encode": { "enter": { "x": { "scale": "x", "field": "born" },         "x2": { "scale": "x", "field": "died" },         "y": { "scale": "y", "field": "label" },         "height": { "value": 2 },         "fill": { "value": "#557" }       }      }    },    {      "type": "rect", "from": { "data": "people" },     "encode": { "enter": { "x": { "scale": "x", "field": "enter" },         "x2": { "scale": "x", "field": "leave" },         "y": { "scale": "y", "field": "label", "offset": -1 },         "height": { "value": 4 },         "fill": { "value": "#e44" }       }      }    }  ] }



D'autres exemples de cartes
Ceci transclut la page Extension:Graph/Demo/Map. Les données JSON de la balise sur cette page spécifient que ses données   proviennent d'une URL distincte, Extension:Graph/Demo/RawData:WorldMap-iso2-json, qui contient des données cartographiques au format JSON. L'un des éléments des données JSON de la balise spécifie une couleur de surbrillance pour chaque pays, au format   :

Vega fonctionne généralement avec des données au format  et il existe une fonction d'assistance Lua pour convertir les données :

La sortie de la fonction Lua est composée de données au format Vega :

Voici un exemple de traitement de données plus complexe : MapTemplate est étendu avec les données de Lua qui les tirent de la répartition de la population mondiale en 2010 (données basées sur données NU). Pour générer ce graphique, j'utilise la fonction  du module Lua Graph:Utils pour extraire la colonne de l'année 2010 de la page Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv (au format csv), et transmettre ces données comme premier paramètre non nommé du graphique MapTemplate. Un paramètre facultatif supplémentaire spécifie qu'il doit être mis à l'échelle de 80 %.



Notez comment la légende est mal positionnée. Cela ne se produira pas avec des échelles plus petites.



Passer les paramètres des modèles MediaWiki
Si vous utilisez une page wiki comme modèle, vous pouvez lui transmettre des paramètres, comme à n'importe quel autre modèle MediaWiki.

Par exemple, la spécification de graphique dans ne code pas en dur une couleur de remplissage pour   ; à la place, elle met la couleur de remplissage à. Ainsi, si vous visitez cette page ou la transcluez sans paramètre, le graphique se remplit de couleur  ; mais si vous transcluez cette page, vous pouvez spécifier la couleur de remplissage comme premier paramètre du modèle.





Utilisation de modèle pour les graphiques répétés
Ceci est très utile si vous avez plusieurs graphiques de la même forme : vous pouvez mettre le graphique détaillé JSON et un texte wiki répétitif supplémentaire dans un modèle et ne lui transmettre que les paramètres qui varient, tels que le titre et les valeurs. Voir un exemple de cette approche.



Recouvrement de deux types de données
Exemple de graphique Falkensee, voir le code.



Graphe avec barres horizontales
Extension:Graph/Demo/HorizontalBarGraphSample

Transclure directement avec
Cet exemple est une balise contenant le graphique JSON à l'intérieur de la page actuelle.

{ "version": 2, "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ {     "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2,  "y": 55}, {"x": 3, "y": 43}, {"x": 4,  "y": 91}, {"x": 5, "y": 81}, {"x": 6,  "y": 53}, {"x": 7, "y": 19}, {"x": 8,  "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ]   }  ],  "scales": [ {     "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} },   {      "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "y"} } ],  "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ {     "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0} },       "update": { "fill": {"value": "steelblue"} },       "hover": { "fill": {"value": "red"} }     }    }  ] }

<span id="Editing_graph_data">

Modifier les données du graphique
L'édition manuelle de JSON est fastidieuse et sujette aux erreurs. Vous devez donc utiliser un vérificateur JSON tel que JSONLint ou un éditeur JSON tel que Vega Live Editor pour modifier JSON avant de le copiez et de le coller dans la page wiki. Si les données de la balise sont directement incluses dans la page, comme dans l'exemple ci-dessus, alors en modifiant la page avec VisualEditor, vous pouvez modifier également les données du graphique.