Extension:Graph/Demo

This page shows some examples of what 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 Graph:Chart (available on many Wikipedias), or more specialized PieChart. Graph:Chart supports many common graph types such as line, area, and pie charts:



Vega 2.0 interactive examples
See tutorial how to build this:

Extension:Graph/Demo/Dimpvis

Extension:Graph/Demo/Airports

Extension:Graph/Demo/OverviewDetail

Extension:Graph/Demo/IndexChart

Using RESTBase API
Show pageview graphs for a range of dates, using pageview analytics API. See .

 Current page and en.wikipedia.org's main page for the last 30 days 

 Current page and en.wikipedia main page for the last 30 days - per type

Using MediaWiki API
This graph shows edit history for a wiki page. See .

This graph shows the number of pages in each subcategory. See 1>Special:MyLanguage/Extension:Graph/Demo/CategoryPie|graph source code.

Using Wikidata Query Service API
See more examples.

Cartesian tree
Extension:Graph/Demo/CartesianTree

Radial tree
Extension:Graph/Demo/RadialTree

Dendrogram
Extension:Graph/Demo/Dendrogram

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

More maps examples
This transcludes the page <tvar|1>Extension:Graph/Demo/Map</>. The <tvar|1></> tag's JSON data on that page specifies that its  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 <tvar|1></> tag's JSON data specifies a highlight color for each country, in the format :

Vega usually works with data in the format, so I created a helper Lua function to convert the data:

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

Here is a more complex data processing example: MapTemplate is expanded with the data from Lua which takes it from the 2010 population distribution in the world (data based on UN data). To generate this graph, I use Lua module Graph:Utils's function  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 graph. Additional optional parameter specifies that it should be scaled to 80%.

<pre style="font-size:90%;">

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 parameters to it, like any other MediaWiki template.

As an example, the graph specification in does not hardcode a fill color for  ; instead it sets the fill color to. So if you visit that page or transclude it with no parameter, the graph fills with color  ; but if you transclude that page you can specify the fill color as the first template parameter.

<pre style="font-size:90%;">

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. See a sample of this approach.

Overlaying two types of data
Falkensee graph sample, see code.

Embedded directly with <tvar|1></>
This example is a <tvar|1></> tag containing the graph JSON inside the current page.

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

Horizontal bar graph
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/editor/ Vega Live Editor] to edit JSON before you copy and paste it into the wiki page. If the <tvar|1></> 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.