Extension:Graph/Demo/fr

This page is a translated version of the page Extension:Graph/Demo and the translation is 100% complete.

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

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.