Voir la source de Graph test

<languages/>
__TOC__

<translate>
This page shows some examples of what [[Extension:Graph | Graph extension]] can produce. Graphs use [http://vega.github.io/vega/ Vega grammar] ([https://github.com/vega/vega/wiki documentation]) as underlying technology. Vega team is working on  [http://vega.github.io/ other tools] to make Graphs easier to use. For interactive graphs [https://github.com/vega/vega/wiki/Tutorial this tutorial] will explain building graphs step by step. For other graph ideas, see [http://vega.github.io/vega-editor/?spec=bar Vega examples].

== Graph templates ==

The easiest way to use graphs is via pre-built templates such as the [[:en:Template:Graph:Chart|Graph:Chart]] (available on many Wikipedias), or more specialized [[:en:Template:Graph:PieChart|PieChart]]. Graph:Chart supports many common graph types such as line, area, and pie charts:</translate>

<pre style="font-size:90%;">{{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}}</pre>

{{Graph:Chart|width=400|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}}

<translate>
== Vega 2.0 interactive examples ==

See [[Extension:Graph/Interactive Graph Tutorial|tutorial]] how to build this:</translate>
{{/HistoricalFertilityRates}}

[[/Dimpvis]]
{{/Dimpvis}}

[[/Airports]]
{{/Airports}}

[[/OverviewDetail]]
{{/OverviewDetail}}

[[/IndexChart]]
{{/IndexChart}}

<translate>
== Using RESTBase API ==

Show pageview graphs for a range of dates, using pageview analytics API.  See [[Template:Graph:PageViews]].

''' Current page and en.wikipedia.org's main page for the last 30 days'''</translate>
<pre>
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
</pre>
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}

<translate>
''' Current page and en.wikipedia main page for the last 30 days - per type'''</translate>
{{/Pageviews2|mediawiki|{{FULLPAGENAME}}|30}}
{{/Pageviews2|en.wikipedia|Main Page|30}}

<translate>
== Using MediaWiki API ==

This graph shows edit history for a wiki page. See {{template|Graph:PageHistory}}.</translate>
{|
! <translate>Current Page</translate>
! [[wikipedia:Albert Einstein|Albert Einstein]] <translate>from en.wikipedia.org</translate>
|-
| {{ Graph:PageHistory | width=500 | height=300 }}
| {{ Graph:PageHistory | Albert Einstein | wiki=en.wikipedia.org | width=500 | height=300 }}
|}

<translate>
This graph shows the number of pages in each subcategory. See [[/CategoryPie|graph source code]].</translate>
{|
! [[:Category:Extensions by category|Category:'''Extensions by category''']].
! [[:en:Category:People|Category:'''People''']] <translate>from en.wikipedia.org</translate>
|-
| {{/CategoryPie|Extensions by category}}
| {{/CategoryPie|People|en.wikipedia.org}}
|}

<translate>
== Using Wikidata Query Service API ==

See [[Extension:Graph/Demo/Sparql|more examples]].</translate>

{{/Sparql/Largest disasters}}

<translate>
== Trees ==

=== Cartesian tree ===
</translate>
[[/CartesianTree]]

{{/CartesianTree}}

<translate>
=== Radial tree ===
</translate>
[[/RadialTree]]

{{/RadialTree}}
=== Dendrogram ===
<graph>
{
  "width": 500,
  "height": 50,
  "data": [
    {
      "name": "tree",
      "values": [
        {"A": "Mammal","B": "Herbivore","C": "Cow" },
        {"A": "Mammal","B": "Herbivore","C": "Goat" },
        {"A": "Mammal","B": "Omnivore","C": "Human"},
        {"A": "Mammal","B": "Omnivore","C": "Bat"},
        {"A": "Fish","B": "Carnivore","C": "Shark"},
        {"A": "Fish","B": "Carnivore","C": "Electric Eel"},
        {"A": "Fish","B": "Omnivore","C": "Piranha "},
        {"A": "Fish","B": "Omnivore","C": "catfish "}
      ],
      "transform": [
        {"type": "treeify","groupby": ["A","B"]},
        {
          "type": "hierarchy",
          "mode": "cluster",
          "nodesize": [11,200]
        },
        {
          "type": "formula",
          "field": "align",
          "expr": "datum.children ? 'right' : 'left'"
        },
        {
          "type": "formula",
          "field": "offset",
          "expr": "datum.children ? -5 : 5"
        }
      ]
    }
  ],
  "marks": [
    {
      "type": "path",
      "from": {
        "data": "tree",
        "transform": [
          {"type": "filter","test": "datum.parent"},
          {
            "type": "linkpath",
            "sourceX": "parent.layout_y",
            "sourceY": "parent.layout_x",
            "targetX": "layout_y",
            "targetY": "layout_x",
            "shape": "cornerX"
          }
        ]
      },
      "properties": {
        "enter": {
          "path": {"field": "layout_path"},
          "stroke": {"value": "#ddd"}
        }
      }
    },
    {
      "type": "text",
      "from": {
        "data": "tree",
        "transform": [
          {
            "type": "formula",
            "field": "ff_node_label",
            "expr": "if(datum.layout_depth == 0, 'Animals', if(datum.layout_depth == 1, datum.A, if(datum.layout_depth == 2, datum.B, if(datum.layout_depth == 3, datum.C, ''))))"
          }
        ]
      },
      "properties": {
        "enter": {
          "x": {"field": "layout_y"},
          "dx": {"field": "offset"},
          "y": {"field": "layout_x"},
          "font": {"value": "Helvetica Neue"},
          "fontSize": {"value": 10},
          "align": {"field": "align"},
          "baseline": {"value": "middle"},
          "fill": {"value": "#000"},
          "text": {"field": "ff_node_label"}
        }
      }
    }
  ]
}</graph>
<translate>
==Timeline / lifeline==
</translate>
<graph>
{
  "width": 800,
  "height": 200,
  "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":"July 4, 1776"},
        {"name":"U.S. Constitution",     "when":"3/4/1789"},
        {"name":"Louisiana Purchase",    "when":"April 30, 1803"},
        {"name":"Monroe Doctrine",       "when":"Dec 2, 1823"}
      ]
    }

  ],
  "scales": [
    {
      "name": "y",
      "type": "ordinal",
      "range": "height",
      "domain": {"data": "people", "field": "label"}
    },
    {
      "name": "x",
      "type": "time",
      "range": "width",
      "round": true,
      "nice": "year",
      "domain": {"data": "people", "field": ["born", "died"]}
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "x",
      "properties": {"labels": {"fontSize": {"value": 18}}}
    }
  ],
  "marks": [
    {
      "type": "text",
      "from": {"data": "events"},
      "properties": {
        "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"},
      "properties": {
        "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"},
      "properties": {
        "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"},
      "properties": {
        "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"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "enter"},
          "x2": {"scale": "x", "field": "leave"},
          "y": {"scale": "y", "field": "label", "offset":-1},
          "height": {"value": 4},
          "fill": {"value": "#e44"}
        }
      }
    }
  ]
}</graph>
<translate>

== More maps examples ==

This transcludes the page [[Extension:Graph/Demo/Map]]. The <code><nowiki><graph></nowiki></code> tag's JSON data on that page specifies that its <code>countries</code> data comes from a separate URL, [[Extension:Graph/Demo/RawData:WorldMap-iso2-json]], that contains map data in JSON format. (MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.)

One of the elements in the <code><nowiki><graph></nowiki></code> tag's JSON data specifies a highlight color for each country, in the format <code>"''country-code''":"''highlight-color''"</code>:</translate>

<source lang="javascript">
{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}
</source>

<translate>
Vega usually works with data in the format <source lang="javascript" inline>[{"id":"country-code", "v":"highlight-color"}, ...]</source>, so I created a helper Lua function to convert the data:</translate>

<pre>{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}</pre>

<translate>
The Lua function's output is data in Vega's format:</translate>

{{#tag:source|
{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}
|lang=javascript
}}

{{/Map|{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }} | scale=90}}

<translate>
Here is a more complex data processing example: [[/MapTemplate|MapTemplate]] is expanded with the data from Lua which takes it from the 2010 population distribution in the world (data based on [http://esa.un.org/wpp/ UN data]). To generate this graph, I use Lua module [[:Module:Graph:Utils|Graph:Utils]]'s function <code>parseCsv</code> to extract the year 2010 column from the [[Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv]] page (in csv format), and pass that data as the first unnamed parameter to the [[/MapTemplate|MapTemplate]] graph. Additional optional parameter specifies that it should be scaled to 80%.</translate>

<pre style="font-size:90%;">{{/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}</pre>

{{/MapTemplate|type=sqrt|colors=["#ffff65","#cb0000"]|scale=180}}

Note how the legend it wrongly positioned. That won't happen at lower scales.

<translate>

== Passing MediaWiki template parameters ==

If you're using a wiki page as a template, you can pass [[Help:Templates#Parameters|parameters]] to it, like any other MediaWiki template.

As an example, the graph specification in [[/TemplateSample|TemplateSample]] does not hardcode a fill color for <code>marks.properties.update.fill.value</code>; instead it sets the fill color to <code><nowiki>{{{1|#ccc}}}</nowiki></code>. So if you visit that page or transclude it with no parameter, the graph  fills with color <code style="background-color:#ccc">#ccc</code>; but if you transclude that page you can specify the fill color as the first template parameter.</translate>

<pre style="font-size:90%;">{{/TemplateSample}}
{{/TemplateSample | blue}}
{{/TemplateSample | #f00dee}}</pre>

{{/TemplateSample}}
{{/TemplateSample |blue}}
{{/TemplateSample |#f00dee}}

<translate>
=== Using a template for repeated graphs ===

This is very useful if you have multiple graphs of the same form: you can put the verbose graph JSON and additional repetive wikitext in a template and only pass the parameters to it that vary, such as title and values.  [[Talk:MediaWiki Developer Summit 2015/Lessons learned#Template_test | See a sample of this approach]].

== Overlaying two types of data ==

Falkensee graph sample, see [[/falkensee|code]].</translate>

{{/falkensee}}

<translate>
== Embedded directly with <nowiki><graph></nowiki> ==

This example is a <code><nowiki><graph></nowiki></code> tag containing the graph JSON inside the current page.
</translate>

<graph>
{
  "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"}
        }
      }
    }
  ]
}</graph>

<translate>
== Horizontal bar graph ==
</translate>
[[/HorizontalBarGraphSample]]

{{/HorizontalBarGraphSample}}

<translate>
== Editing graph data ==

Editing JSON by hand is fiddly and prone to error. so you should use a JSON checker such as [http://jsonlint.com/ JSONLint] or a JSON editor such as the [http://vega.github.io/vega-editor/ Vega Live Editor] to edit JSON before you copy and paste it into the wiki page. If the <code><nowiki><graph></nowiki></code> tag's data is directly embedded in the page such as the example above, then if you use VisualEditor to edit the page you can directly edit graph data.
</translate>

[[Category:Graph extensions|Demo]]