Extension:Graph/Demo

These examples using the Graph extension will help you understand how you can use it.

See Vega JS for tutorial and other documentation

Maps
This transcludes the page Extension:Graph/Demo/Map. The  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. (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  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%. The code to invoke it is

Graph data from a URL
The Vega graphing library can use an external URL as a data source. It can be in JSON, csv, or topojson format. So a graph can reference an external URL as a data source, either a wiki page in raw format or the result of an API call.

The page Extension:Graph/Demo/AdamsCountData contains CSV information counting user contributions. Contributions counts - Douglas Adams graphs this data, with top 20 shown. To do this, the JSON in its  tag specifies the data page with  ; action=raw page parameter retrieves only the data, not the surrounding page. The spike was due to Google Doodle.

Similarly, the page Extension:Graph/Demo/ObamaSizeChangesData contains CSV information about article changes: date, user, and change in size (excluding vandalism/rollbacks). The page Contributions by diff - Barack Obama graphs this.

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 Graph:Examples:Template 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. Thus the wiki markup:
 *    

produces:

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.

Embedded directly with
This example is a  tag containing the graph JSON inside the current page.

{ "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": "data.x"} },   {      "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "data.y"} } ],  "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ {     "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "data.x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "data.y"}, "y2": {"scale": "y", "value": 0} },       "update": { "fill": {"value": "steelblue"} },       "hover": { "fill": {"value": "red"} }     }    }  ] }

Here's the JSON defining the above graph, from inside its  tag. Editing JSON by hand is fiddly and prone to error, so you should use a JSON checker such as JSONLint or a JSON editor such as the Vega Live Editor to edit the JSON before you copy and paste it into the wiki page.