View source for Extension:Graph/Demo

__TOC__



This page shows some examples of what [[Extension:Graph | Graph extension]] can produce.


Graphs use [<tvar|url1>http://vega.github.io/vega/ Vega grammar] ([<tvar|url2>https://github.com/vega/vega/wiki documentation]) as underlying technology.


Vega team is working on [<tvar|url>http://vega.github.io/ other tools] to make Graphs easier to use.


For interactive graphs [<tvar|url>https://github.com/vega/vega/wiki/Tutorial this tutorial] will explain building graphs step by step.


For other graph ideas, see [<tvar|url>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:


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


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

[[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 <tvar|1>{{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 <tvar|1>{{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 [[<tvar|1>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 [[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>
{
  "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>


== More maps examples == 


This transcludes the page <tvar|1>[[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>:

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



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:

<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:source|
{{#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 [[Help:Templates#Parameters|parameters]] to it, like any other MediaWiki template.


As an example, the graph specification in [[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 [[Extension:Graph/Demo/falkensee|code]].

{{Extension:Graph/Demo/falkensee}}


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


This example is a <code><nowiki><graph></nowiki></code> 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>


== Horizontal bar graph == 

[[Extension:Graph/Demo/HorizontalBarGraphSample]]

{{Extension:Graph/Demo/HorizontalBarGraphSample}}


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


[[Category:Extension:Graph|Demo]]