4,000
edits
Changes
Created page with "<languages/> __TOC__ <translate> <!--T:1--> This page shows some examples of what Graph extension can produce.</translate> <translate> <!--T:2--> Graphs..."
<languages/>
__TOC__
<translate>
<!--T:1-->
This page shows some examples of what [[Extension:Graph | Graph extension]] can produce.</translate>
<translate>
<!--T:2-->
Graphs use [<tvar|url1>http://vega.github.io/vega/</> Vega grammar] ([<tvar|url2>https://github.com/vega/vega/wiki</> documentation]) as underlying technology.</translate>
<translate>
<!--T:3-->
Vega team is working on [<tvar|url>http://vega.github.io/</> other tools] to make Graphs easier to use.</translate>
<translate>
<!--T:4-->
For interactive graphs [<tvar|url>https://github.com/vega/vega/wiki/Tutorial</> this tutorial] will explain building graphs step by step.</translate>
<translate>
<!--T:5-->
For other graph ideas, see [<tvar|url>http://vega.github.io/vega-editor/?spec=bar</> Vega examples].
== Graph templates == <!--T:6-->
<!--T:7-->
The easiest way to use graphs is via pre-built templates such as the [[:en:Template:Graph:Chart|Graph:Chart]] (available on many Wikipedias), or more specialized [[:en:Template:Graph:PieChart|PieChart]].</translate>
<translate>
<!--T:8-->
Graph:Chart supports many common graph types such as line, area, and pie charts:
</translate>
<pre style="font-size:90%;">{{Graph:Chart|width=600|height=100|xAxisTitle=X|yAxisTitle=Y
|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende
|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200
|y2=7,8,9,8,8,9,10,9,5|showValues=}}
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
|y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}</pre>
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende
|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200
|y2=7,8,9,8,8,9,10,9,5|showValues=}}
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
|y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}
<translate>
== Vega 2.0 interactive examples == <!--T:9-->
<!--T:10-->
See [[Extension:Graph/Interactive Graph Tutorial|tutorial]] how to build this:</translate>
{{Extension:Graph/Demo/HistoricalFertilityRates}}
[[Extension:Graph/Demo/Dimpvis]]
{{Extension:Graph/Demo/Dimpvis}}
[[Extension:Graph/Demo/Airports]]
{{Extension:Graph/Demo/Airports}}
[[Extension:Graph/Demo/OverviewDetail]]
{{Extension:Graph/Demo/OverviewDetail}}
[[Extension:Graph/Demo/IndexChart]]
{{Extension:Graph/Demo/IndexChart}}
<translate>
== Using RESTBase API == <!--T:11-->
<!--T:12-->
Show pageview graphs for a range of dates, using pageview analytics API.</translate>
<translate>
<!--T:13-->
See <tvar|1>{{ll|Template:Graph:PageViews}}</>.
</translate>
'''<translate><!--T:14--> Current page and en.wikipedia.org's main page for the last 30 days</translate>'''
<pre>
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
</pre>
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
<translate>
<!--T:15-->
''' Current page and en.wikipedia main page for the last 30 days - per type'''</translate>
{{Extension:Graph/Demo/Pageviews2|mediawiki|{{FULLPAGENAME}}|30}}
{{Extension:Graph/Demo/Pageviews2|en.wikipedia|Main Page|30}}
<translate>
== Using MediaWiki API == <!--T:16-->
<!--T:17-->
This graph shows edit history for a wiki page.</translate>
<translate>
<!--T:18-->
See <tvar|1>{{template|Graph:PageHistory}}</>.
</translate>
{|
! <translate><!--T:19--> Current Page</translate>
! [[wikipedia:Albert Einstein|Albert Einstein]] <translate><!--T:20--> from en.wikipedia.org</translate>
|-
| {{ Graph:PageHistory | width=500 | height=300 }}
| {{ Graph:PageHistory | Albert Einstein | wiki=en.wikipedia.org | width=500 | height=300 }}
|}
<translate>
<!--T:21-->
This graph shows the number of pages in each subcategory.</translate>
<translate>
<!--T:22-->
See [[<tvar|1>Special:MyLanguage/Extension:Graph/Demo/CategoryPie</>|graph source code]].
</translate>
{|
! [[:Category:Extensions by category|Category:'''Extensions by category''']].
! [[:en:Category:People|Category:'''People''']] <translate><!--T:23--> from en.wikipedia.org</translate>
|-
| {{Extension:Graph/Demo/CategoryPie|Extensions by category}}
| {{Extension:Graph/Demo/CategoryPie|People|en.wikipedia.org}}
|}
<translate>
== Using Wikidata Query Service API == <!--T:24-->
<!--T:25-->
See [[Extension:Graph/Demo/Sparql|more examples]].</translate>
{{Extension:Graph/Demo/Sparql/Largest disasters}}
<translate>
== Trees == <!--T:26-->
=== Cartesian tree === <!--T:27-->
</translate>
[[Extension:Graph/Demo/CartesianTree]]
{{Extension:Graph/Demo/CartesianTree}}
<translate>
=== Radial tree === <!--T:28-->
</translate>
[[Extension:Graph/Demo/RadialTree]]
{{Extension:Graph/Demo/RadialTree}}
=== Dendrogram ===
[[Extension:Graph/Demo/Dendrogram]]
{{Extension:Graph/Demo/Dendrogram}}
<translate>
==Timeline / lifeline== <!--T:29-->
</translate>
<graph>
{
"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"}
}
}
}
]
}</graph>
<translate>
== More maps examples == <!--T:30-->
<!--T:31-->
This transcludes the page <tvar|1>[[Extension:Graph/Demo/Map]]</>.</translate>
<translate>
<!--T:32-->
The <code><nowiki><graph></nowiki></code> tag's JSON data on that page specifies that its <code>countries</code> data comes from a separate URL, [[Extension:Graph/Demo/RawData:WorldMap-iso2-json]], that contains map data in JSON format.</translate>
<translate>
<!--T:33-->
(MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.)
<!--T:34-->
One of the elements in the <code><nowiki><graph></nowiki></code> tag's JSON data specifies a highlight color for each country, in the format <code>"''country-code''":"''highlight-color''"</code>:</translate>
<source lang="javascript">
{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}
</source>
<translate>
<!--T:35-->
Vega usually works with data in the format <source lang="javascript" inline>[{"id":"country-code", "v":"highlight-color"}, ...]</source>, so I created a helper Lua function to convert the data:</translate>
<pre>{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}</pre>
<translate>
<!--T:36-->
The Lua function's output is data in Vega's format:</translate>
{{#tag:source|
{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}
|lang=javascript
}}
{{Extension:Graph/Demo/Map|{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }} | scale=90}}
<translate>
<!--T:37-->
Here is a more complex data processing example: [[Extension:Graph/Demo/MapTemplate|MapTemplate]] is expanded with the data from Lua which takes it from the 2010 population distribution in the world (data based on [http://esa.un.org/wpp/ UN data]).</translate>
<translate>
<!--T:38-->
To generate this graph, I use Lua module [[:Module:Graph:Utils|Graph:Utils]]'s function <code>parseCsv</code> 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 [[Extension:Graph/Demo/MapTemplate|MapTemplate]] graph.</translate>
<translate>
<!--T:39-->
Additional optional parameter specifies that it should be scaled to 80%.
</translate>
<pre style="font-size:90%;">{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}</pre>
{{Extension:Graph/Demo/MapTemplate|type=sqrt|colors=["#ffff65","#cb0000"]|scale=180}}
<translate>
<!--T:40-->
Note how the legend it wrongly positioned.</translate>
<translate>
<!--T:41-->
That won't happen at lower scales.
== Passing MediaWiki template parameters == <!--T:42-->
<!--T:43-->
If you're using a wiki page as a template, you can pass [[Help:Templates#Parameters|parameters]] to it, like any other MediaWiki template.
<!--T:44-->
As an example, the graph specification in [[Extension:Graph/Demo/TemplateSample|TemplateSample]] does not hardcode a fill color for <code>marks.properties.update.fill.value</code>; instead it sets the fill color to <code><nowiki>{{{1|#ccc}}}</nowiki></code>.</translate>
<translate>
<!--T:45-->
So if you visit that page or transclude it with no parameter, the graph fills with color <code style="background-color:#ccc">#ccc</code>; but if you transclude that page you can specify the fill color as the first template parameter.
</translate>
<pre style="font-size:90%;">
{{Extension:Graph/Demo/TemplateSample}}
{{Extension:Graph/Demo/TemplateSample | blue}}
{{Extension:Graph/Demo/TemplateSample | #f00dee}}
</pre>
{{Extension:Graph/Demo/TemplateSample}}
{{Extension:Graph/Demo/TemplateSample |blue}}
{{Extension:Graph/Demo/TemplateSample |#f00dee}}
<translate>
=== Using a template for repeated graphs === <!--T:46-->
<!--T:47-->
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. [[Talk:MediaWiki Developer Summit 2015/Lessons learned#Template_test | See a sample of this approach]].
== Overlaying two types of data == <!--T:48-->
<!--T:49-->
Falkensee graph sample, see [[Extension:Graph/Demo/falkensee|code]].</translate>
{{Extension:Graph/Demo/falkensee}}
<translate>
== Embedded directly with <nowiki><graph></nowiki> == <!--T:50-->
<!--T:51-->
This example is a <code><nowiki><graph></nowiki></code> tag containing the graph JSON inside the current page.
</translate>
<graph>
{
"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"}
}
}
}
]
}</graph>
<translate>
== Horizontal bar graph == <!--T:52-->
</translate>
[[Extension:Graph/Demo/HorizontalBarGraphSample]]
{{Extension:Graph/Demo/HorizontalBarGraphSample}}
<translate>
== Editing graph data == <!--T:53-->
<!--T:54-->
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/vega-editor/ Vega Live Editor] to edit JSON before you copy and paste it into the wiki page. If the <code><nowiki><graph></nowiki></code> 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.
</translate>
[[Category:Extension:Graph{{#translation:}}|Demo]]
__TOC__
<translate>
<!--T:1-->
This page shows some examples of what [[Extension:Graph | Graph extension]] can produce.</translate>
<translate>
<!--T:2-->
Graphs use [<tvar|url1>http://vega.github.io/vega/</> Vega grammar] ([<tvar|url2>https://github.com/vega/vega/wiki</> documentation]) as underlying technology.</translate>
<translate>
<!--T:3-->
Vega team is working on [<tvar|url>http://vega.github.io/</> other tools] to make Graphs easier to use.</translate>
<translate>
<!--T:4-->
For interactive graphs [<tvar|url>https://github.com/vega/vega/wiki/Tutorial</> this tutorial] will explain building graphs step by step.</translate>
<translate>
<!--T:5-->
For other graph ideas, see [<tvar|url>http://vega.github.io/vega-editor/?spec=bar</> Vega examples].
== Graph templates == <!--T:6-->
<!--T:7-->
The easiest way to use graphs is via pre-built templates such as the [[:en:Template:Graph:Chart|Graph:Chart]] (available on many Wikipedias), or more specialized [[:en:Template:Graph:PieChart|PieChart]].</translate>
<translate>
<!--T:8-->
Graph:Chart supports many common graph types such as line, area, and pie charts:
</translate>
<pre style="font-size:90%;">{{Graph:Chart|width=600|height=100|xAxisTitle=X|yAxisTitle=Y
|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende
|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200
|y2=7,8,9,8,8,9,10,9,5|showValues=}}
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
|y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}</pre>
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende
|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200
|y2=7,8,9,8,8,9,10,9,5|showValues=}}
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
|y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}
<translate>
== Vega 2.0 interactive examples == <!--T:9-->
<!--T:10-->
See [[Extension:Graph/Interactive Graph Tutorial|tutorial]] how to build this:</translate>
{{Extension:Graph/Demo/HistoricalFertilityRates}}
[[Extension:Graph/Demo/Dimpvis]]
{{Extension:Graph/Demo/Dimpvis}}
[[Extension:Graph/Demo/Airports]]
{{Extension:Graph/Demo/Airports}}
[[Extension:Graph/Demo/OverviewDetail]]
{{Extension:Graph/Demo/OverviewDetail}}
[[Extension:Graph/Demo/IndexChart]]
{{Extension:Graph/Demo/IndexChart}}
<translate>
== Using RESTBase API == <!--T:11-->
<!--T:12-->
Show pageview graphs for a range of dates, using pageview analytics API.</translate>
<translate>
<!--T:13-->
See <tvar|1>{{ll|Template:Graph:PageViews}}</>.
</translate>
'''<translate><!--T:14--> Current page and en.wikipedia.org's main page for the last 30 days</translate>'''
<pre>
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
</pre>
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
<translate>
<!--T:15-->
''' Current page and en.wikipedia main page for the last 30 days - per type'''</translate>
{{Extension:Graph/Demo/Pageviews2|mediawiki|{{FULLPAGENAME}}|30}}
{{Extension:Graph/Demo/Pageviews2|en.wikipedia|Main Page|30}}
<translate>
== Using MediaWiki API == <!--T:16-->
<!--T:17-->
This graph shows edit history for a wiki page.</translate>
<translate>
<!--T:18-->
See <tvar|1>{{template|Graph:PageHistory}}</>.
</translate>
{|
! <translate><!--T:19--> Current Page</translate>
! [[wikipedia:Albert Einstein|Albert Einstein]] <translate><!--T:20--> from en.wikipedia.org</translate>
|-
| {{ Graph:PageHistory | width=500 | height=300 }}
| {{ Graph:PageHistory | Albert Einstein | wiki=en.wikipedia.org | width=500 | height=300 }}
|}
<translate>
<!--T:21-->
This graph shows the number of pages in each subcategory.</translate>
<translate>
<!--T:22-->
See [[<tvar|1>Special:MyLanguage/Extension:Graph/Demo/CategoryPie</>|graph source code]].
</translate>
{|
! [[:Category:Extensions by category|Category:'''Extensions by category''']].
! [[:en:Category:People|Category:'''People''']] <translate><!--T:23--> from en.wikipedia.org</translate>
|-
| {{Extension:Graph/Demo/CategoryPie|Extensions by category}}
| {{Extension:Graph/Demo/CategoryPie|People|en.wikipedia.org}}
|}
<translate>
== Using Wikidata Query Service API == <!--T:24-->
<!--T:25-->
See [[Extension:Graph/Demo/Sparql|more examples]].</translate>
{{Extension:Graph/Demo/Sparql/Largest disasters}}
<translate>
== Trees == <!--T:26-->
=== Cartesian tree === <!--T:27-->
</translate>
[[Extension:Graph/Demo/CartesianTree]]
{{Extension:Graph/Demo/CartesianTree}}
<translate>
=== Radial tree === <!--T:28-->
</translate>
[[Extension:Graph/Demo/RadialTree]]
{{Extension:Graph/Demo/RadialTree}}
=== Dendrogram ===
[[Extension:Graph/Demo/Dendrogram]]
{{Extension:Graph/Demo/Dendrogram}}
<translate>
==Timeline / lifeline== <!--T:29-->
</translate>
<graph>
{
"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"}
}
}
}
]
}</graph>
<translate>
== More maps examples == <!--T:30-->
<!--T:31-->
This transcludes the page <tvar|1>[[Extension:Graph/Demo/Map]]</>.</translate>
<translate>
<!--T:32-->
The <code><nowiki><graph></nowiki></code> tag's JSON data on that page specifies that its <code>countries</code> data comes from a separate URL, [[Extension:Graph/Demo/RawData:WorldMap-iso2-json]], that contains map data in JSON format.</translate>
<translate>
<!--T:33-->
(MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.)
<!--T:34-->
One of the elements in the <code><nowiki><graph></nowiki></code> tag's JSON data specifies a highlight color for each country, in the format <code>"''country-code''":"''highlight-color''"</code>:</translate>
<source lang="javascript">
{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}
</source>
<translate>
<!--T:35-->
Vega usually works with data in the format <source lang="javascript" inline>[{"id":"country-code", "v":"highlight-color"}, ...]</source>, so I created a helper Lua function to convert the data:</translate>
<pre>{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}</pre>
<translate>
<!--T:36-->
The Lua function's output is data in Vega's format:</translate>
{{#tag:source|
{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}
|lang=javascript
}}
{{Extension:Graph/Demo/Map|{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }} | scale=90}}
<translate>
<!--T:37-->
Here is a more complex data processing example: [[Extension:Graph/Demo/MapTemplate|MapTemplate]] is expanded with the data from Lua which takes it from the 2010 population distribution in the world (data based on [http://esa.un.org/wpp/ UN data]).</translate>
<translate>
<!--T:38-->
To generate this graph, I use Lua module [[:Module:Graph:Utils|Graph:Utils]]'s function <code>parseCsv</code> 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 [[Extension:Graph/Demo/MapTemplate|MapTemplate]] graph.</translate>
<translate>
<!--T:39-->
Additional optional parameter specifies that it should be scaled to 80%.
</translate>
<pre style="font-size:90%;">{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}</pre>
{{Extension:Graph/Demo/MapTemplate|type=sqrt|colors=["#ffff65","#cb0000"]|scale=180}}
<translate>
<!--T:40-->
Note how the legend it wrongly positioned.</translate>
<translate>
<!--T:41-->
That won't happen at lower scales.
== Passing MediaWiki template parameters == <!--T:42-->
<!--T:43-->
If you're using a wiki page as a template, you can pass [[Help:Templates#Parameters|parameters]] to it, like any other MediaWiki template.
<!--T:44-->
As an example, the graph specification in [[Extension:Graph/Demo/TemplateSample|TemplateSample]] does not hardcode a fill color for <code>marks.properties.update.fill.value</code>; instead it sets the fill color to <code><nowiki>{{{1|#ccc}}}</nowiki></code>.</translate>
<translate>
<!--T:45-->
So if you visit that page or transclude it with no parameter, the graph fills with color <code style="background-color:#ccc">#ccc</code>; but if you transclude that page you can specify the fill color as the first template parameter.
</translate>
<pre style="font-size:90%;">
{{Extension:Graph/Demo/TemplateSample}}
{{Extension:Graph/Demo/TemplateSample | blue}}
{{Extension:Graph/Demo/TemplateSample | #f00dee}}
</pre>
{{Extension:Graph/Demo/TemplateSample}}
{{Extension:Graph/Demo/TemplateSample |blue}}
{{Extension:Graph/Demo/TemplateSample |#f00dee}}
<translate>
=== Using a template for repeated graphs === <!--T:46-->
<!--T:47-->
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. [[Talk:MediaWiki Developer Summit 2015/Lessons learned#Template_test | See a sample of this approach]].
== Overlaying two types of data == <!--T:48-->
<!--T:49-->
Falkensee graph sample, see [[Extension:Graph/Demo/falkensee|code]].</translate>
{{Extension:Graph/Demo/falkensee}}
<translate>
== Embedded directly with <nowiki><graph></nowiki> == <!--T:50-->
<!--T:51-->
This example is a <code><nowiki><graph></nowiki></code> tag containing the graph JSON inside the current page.
</translate>
<graph>
{
"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"}
}
}
}
]
}</graph>
<translate>
== Horizontal bar graph == <!--T:52-->
</translate>
[[Extension:Graph/Demo/HorizontalBarGraphSample]]
{{Extension:Graph/Demo/HorizontalBarGraphSample}}
<translate>
== Editing graph data == <!--T:53-->
<!--T:54-->
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/vega-editor/ Vega Live Editor] to edit JSON before you copy and paste it into the wiki page. If the <code><nowiki><graph></nowiki></code> 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.
</translate>
[[Category:Extension:Graph{{#translation:}}|Demo]]