Extension:Graph/Demo

More examples of using the Graph extension extension demo

See Vega JS for tutorial and other documentation

Interactive map
This transcludes the page Graph:Examples:Map. Because it's in the special   namespace, MediaWiki knows this page holds data for the Graph extension and must contain only JSON data, so it needs no   tag. The graph data specifies that its  data comes from a separate file, RawData:WorldMap-json. (MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.) A second data source (part of the graph definition, but it could be template parameters or another page) drives how to highlight each country.

Other graphs
Contributions counts - Douglas Adams is a count of user contributions, with top 20 shown. The spike was due to Google Doodle.

Contributions by diff - Barack Obama graphs edits that changed article size, excluding vandalism/rollbacks.

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, this invokes the Graph:Examples:Template page as a template. The graph specification, instead of hardcoding a fill color for, sets it to. So passing no parameter results in color, otherwise the first template parameter specifies the color. 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.