Extension:Graph/Demo/fr
Cette page donne quelques exemples de ce que peut faire l'extension Graph . 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 Template: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 :
{{Graph:Chart|width=600|height=100|xAxisTitle=X|yAxisTitle=Y |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}} {{Graph:Chart|width=100|height=100|type=pie|legend=Legende |x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200 |y2=7,8,9,8,8,9,10,9,5|showValues=}} {{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y |legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10 |y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}
Exemples interactifs de Vega 2.0
Extension:Graph/Demo/Dimpvis From https://vega.github.io/editor/#/examples/vega/global-development
Extension:Graph/Demo/Airports
From https://vega.github.io/editor/#/examples/vega/airport-connections
Extension:Graph/Demo/OverviewDetail
From https://vega.github.io/editor/#/examples/vega/overview-plus-detail
Extension:Graph/Demo/IndexChart
From https://vega.github.io/editor/#/examples/vega/stock-index-chart
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 Template:Graph:PageViews .
Page actuelle et page principale de en.wikipedia.org des 30 derniers jours
{{Template:Graph:PageViews}} {{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
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 {{Graph:PageHistory}}.
Page actuelle | Albert Einstein de fr.wikipedia.org |
---|---|
Ce graphique montre le nombre de pages dans chaque sous-catégorie. Voir code source du graphique.
Category:Extensions by category. | Category:People de fr.wikipedia.org |
---|---|
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
D'autres exemples de cartes
Ceci transclut la page Extension:Graph/Demo/Map.
Les données JSON de la balise <graph>
sur cette page spécifient que ses données countries
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 <graph>
spécifie une couleur de surbrillance pour chaque pays, au format "code du pays" : "couleur de surbrillance"
:
{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}
Vega fonctionne généralement avec des données au format [{"id":"country-code", "v":"highlight-color"}, ...]
et il existe une fonction d'assistance Lua pour convertir les données :
{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}
La sortie de la fonction Lua est composée de données au format Vega :
[{"id":"US","v":"blue"},{"id":"AU","v":"purple"},{"id":"CN","v":"red"},{"id":"BR","v":"pink"},{"id":"DZ","v":"green"}]
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 parseCsv
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 %.
{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}
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 TemplateSample ne code pas en dur une couleur de remplissage pour marks.properties.update.fill.value
; à la place, elle met la couleur de remplissage à {{{1|#ccc}}}
.
Ainsi, si vous visitez cette page ou la transcluez sans paramètre, le graphique se remplit de couleur #ccc
; mais si vous transcluez cette page, vous pouvez spécifier la couleur de remplissage comme premier paramètre du modèle.
{{Extension:Graph/Demo/TemplateSample}} {{Extension:Graph/Demo/TemplateSample | blue}} {{Extension:Graph/Demo/TemplateSample | #f00dee}}
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.
Copied from vega demo, which was modeled on this graph.
Graphe avec barres horizontales
Extension:Graph/Demo/HorizontalBarGraphSample
Transclure directement avec <graph>
Cet exemple est une balise <graph>
contenant le graphique JSON à l'intérieur de la page actuelle.
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 <graph>
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.