Extension:Graph

The Graph extension allows a  tag to describe data visualizations (demo) in a JSON format that renders a Vega-based graph.

General info

 * See demo page for many samples and usage tricks
 * TechTalk Video - a WMF tech talk discussing Graph extension, including a great demo of Lyra editor (also installed on labs).
 * You may also be interested in some of the Vega future capabilities (Keynote by Jeffrey Heer).
 * Guide - General recommendations on how to use graphs in Wiki.
 * Vega for devs - best place of all Vega resources

Known bugs & limitations

 * Total Graphs per page cannot be more than 64KB T100942.
 * Graph extension bugs
 * Graphoid service bugs

Internals
When parsing, graph extension expands all template parameters/expressions, and stores the complete graph definitions in the graph_specs page property, using graph hashes for IDs. This way graphs can be easily located on the wiki with propname=graph_specs the special page (or via API). The client browser receives graph definitions as JSON MW values. Additionally, HTML contains empty &lt;div> elements in place where graphs should go: Once everything is loaded into the browser, vega populates each &lt;div> with a graph canvas.

Additionally, graph extension inserts an &lt;img> tag with the HREF pointing to the. The image tag will only execute in case of the &lt;noscript> browser, or legacy browser that MediaWiki does not support by using document.write(...).

Alternativelly, Graph extension may be configured to always use just the &lt;img> tag, without adding the Vega libraries or graph definition JSON. This mode will not work during editing, since page_props do not get updated until after the save. Once saved, Graphoid service will be able to access the new definition via MW API.

Security Features
can be configured to disallow referencing untrusted data sources (e.g. Wikimedia only allows data from the Wikimedia sites). It can also send extra headers whenever accessing external data, e.g. Treat-as-Untrusted header that MediaWiki uses to prevent CSRF attacks.

License
Vega library is distributed under a modified BSD license acceptable under for us to use. This appears to be a copy of the BSD license, with some minor (acceptable) modifications. It's not a problem for us to use it, although ideally they would not make changes like this to the license. It's better if people do not make these changes to their license, to avoid confusion (like this) about whether the license is safe for open-source use.

wgGraphDataDomains
A list of domains (strings) that the vega code is allowed to pull data from, or false for no restrictions. An empty list disables any external data (inline only). Empty list by default.
 * NOTE: Setting this value to anything other than 'false' will also enable safe mode formula/filter evaluation

wgGraphUrlBlacklist
A list of regular expressions (JavaScript regex). All data URLs will be matched against this list, and the URL will be used only if it does not match any of the given regexes. false (default) to disable.

wgGraphIsTrusted
If false (default), passes Treat-as-Untrusted:1 header with all graph data requests

wgGraphImgServiceUrl
A format string to form a backend service request URL for the &lt;img> tag. For example: Would produce this URL: //graphoid.wikimedia.org/mediawiki.org/v1/png/Extension:Graph/0/be66c7016b9de3188ef6a585950f10dc83239837.png /{domain}/v1/png/{title}/{revid}/{hash}.png

Parameters will be supplied in this order: 1=server, 2=title, 3=revid, 4=graph-hash-id. All parameters will be escaped with rawurlencode. If the value is false (default), no urls will be generated

wgGraphImgServiceAlways
If true, and wgGraphImgServiceUrl</tt> is set, renders all graphs on the backend if possible.

Enabling Graph namespace
To store graph definitions as standalone pages in their own namespace, configure JsonConfig.

Graphoid service
Graphoid is a node.js  service that converts a graph definition into a PNG image using the same Vega library code that runs in advanced browsers. The service is available on the Wikimedia cluster at graphoid.wikimedia.org.

You can install it yourself: The service URLs contain the domain of the page (for example mediawiki.org), service version (v1), the title of the page with the graph (PageTitle), revision ID of the page (12345, but could be 0 for current), and a hash ID of the graph itself (also used in HTML page to identify graph definition), for example: http://localhost:19000/mediawiki.org/v1/PageTitle/12345/a64b022a8fa5b7fc5e40a2c95cd0a114b2ae1174.png http://graphoid.wikimedia.org/mediawiki.org/v1/png/Extension:Graph/0/be66c7016b9de3188ef6a585950f10dc83239837.png You configure the Graph extension to use the Graphoid service in LocalSettings.php with a line like You can further configure the service via its config file.

VisualEditor module
Since summer 2015, the Graph extension also comes with a module (ext.graph.VisualEditor) which enables graph editing within VisualEditor.

This module was a result of a Google Summer of Code 2015 project. See here for more details.

This module enables graph rendering within VisualEditor, allowing users to see graphs within the editor as opposed to alien extension nodes. Furthermore, users can open up a UI to edit a graph's type, data and padding. The UI also offers a way to edit the raw JSON specification within VE without having to switch to the classic wikitext editor, in case more advanced users want to tweak settings not supported by the UI.

This first step serves as a stepping stone for many possibilities with graph editing within VisualEditor, and there are a lot of ways in which the module can be improved and expanded.