Extension:Graph/Demo

This page shows some examples of what Graph extension can produce.

https://github.com/vega/vega/wiki documentation]) as underlying technology.

http://vega.github.io/ other tools] to make Graphs easier to use.

https://github.com/vega/vega/wiki/Tutorial this tutorial] will explain building graphs step by step.

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:

,

     "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

Extension:Graph/Demo/Map.

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

{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}

, so I created a helper Lua function to convert the data:

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

[{"id":"US","v":"blue"},{"id":"AU","v":"purple"},{"id":"CN","v":"red"},{"id":"BR","v":"pink"},{"id":"DZ","v":"green"}]

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

Template:Extension:Graph/Demo/MapTemplate

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.

.

but if you transclude that page you can specify the fill color as the first template parameter.

Template:Extension:Graph/Demo/TemplateSample Template:Extension:Graph/Demo/TemplateSample Template:Extension:Graph/Demo/TemplateSample

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.

== 

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

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.