View source for Extension:Graph/Demo/en

<languages />
__TOC__

This page shows some examples of what {{ll|Extension:Graph|Graph}} extension can produce.
Graphs use [http://vega.github.io/vega/ Vega grammar] ([https://github.com/nyurik/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/nyurik/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 {{ll|Template:Graph:Chart}} (available on many Wikipedias), or more specialized [[w:Template:Graph:PieChart|PieChart]].
Graph:Chart supports many common graph types such as line, area, and pie charts:

<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}}

== Vega 2.0 interactive examples ==
[[Extension:Graph/Demo/Dimpvis]]
{{Extension:Graph/Demo/Dimpvis}}

[[Extension:Graph/Demo/Airports]]
{{Extension:Graph/Demo/Airports}}

[[Extension:Graph/Demo/OverviewDetail]]
{{Extension:Graph/Demo/OverviewDetail}}

[[Extension:Graph/Demo/IndexChart]]
{{Extension:Graph/Demo/IndexChart}}

== Using RESTBase API ==
Show pageview graphs for a range of dates, using pageview analytics API.
See {{ll|Template:Graph:PageViews}}.

'''Current page and en.wikipedia.org's main page for the last 30 days'''
<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}}

''' Current page and en.wikipedia main page for the last 30 days - per type'''
{{Extension:Graph/Demo/Pageviews2|mediawiki|{{FULLPAGENAME}}|30}}
{{Extension:Graph/Demo/Pageviews2|en.wikipedia|Main Page|30}}

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

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

== Using Wikidata Query Service API ==

See [[Special:MyLanguage/Extension:Graph/Demo/Sparql|more examples]].

{{Extension:Graph/Demo/Sparql/Largest disasters}}

== Trees ==

=== Cartesian tree ===
[[Extension:Graph/Demo/CartesianTree]]

{{Extension:Graph/Demo/CartesianTree}}

=== Radial tree ===
[[Extension:Graph/Demo/RadialTree]]

{{Extension:Graph/Demo/RadialTree}}

=== Dendrogram ===
[[Extension:Graph/Demo/Dendrogram]]

{{Extension:Graph/Demo/Dendrogram}}

==Timeline / lifeline==
<graph>
{
  "$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"
          }
        }
      }
    }
  ]
}</graph>

== More maps examples ==
This transcludes the page [[Extension:Graph/Demo/Map]].
The {{tag|graph|open}} 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.
One of the elements in the {{tag|graph|open}} tag's JSON data specifies a highlight color for each country, in the format <code>"''country-code''":"''highlight-color''"</code>:

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

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

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

The Lua function's output is data in Vega's format:

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

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

Here is a more complex data processing example: [[Extension:Graph/Demo/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 [[Extension:Graph/Demo/MapTemplate|MapTemplate]] graph.
Additional optional parameter specifies that it should be scaled to 80%.

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

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

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

== Passing MediaWiki template parameters ==

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

As an example, the graph specification in {{ll|Extension:Graph/Demo/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.

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

{{Extension:Graph/Demo/TemplateSample}}
{{Extension:Graph/Demo/TemplateSample |blue}}
{{Extension:Graph/Demo/TemplateSample |#f00dee}}

=== 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 [[Special:MyLanguage/Extension:Graph/Demo/falkensee|code]].

{{Extension:Graph/Demo/falkensee}}

== Horizontal bar graph ==
[[Extension:Graph/Demo/HorizontalBarGraphSample]]

{{Extension:Graph/Demo/HorizontalBarGraphSample}}

== Embedded directly with {{tag|graph|open}} ==
This example is a {{tag|graph|open}} tag containing the graph JSON inside the current page.

<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>

== 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/editor/ Vega Live Editor] to edit JSON before you copy and paste it into the wiki page.
If the {{tag|graph|open}} 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.

[[Category:Extension:Graph{{#translation:}}|Demo]]