Difference between revisions of "Extension:Graph/Demo"
Joelmartin (talk | contribs) (Created page with "<languages/> __TOC__ <translate> <!--T:1--> This page shows some examples of what Graph extension can produce.</translate> <translate> <!--T:2--> Graphs...") |
Joelmartin (talk | contribs) m (Text replacement - "<translate>" to "") |
||
| Line 2: | Line 2: | ||
__TOC__ | __TOC__ | ||
| − | + | ||
<!--T:1--> | <!--T:1--> | ||
This page shows some examples of what [[Extension:Graph | Graph extension]] can produce.</translate> | This page shows some examples of what [[Extension:Graph | Graph extension]] can produce.</translate> | ||
| − | + | ||
<!--T:2--> | <!--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> | Graphs use [<tvar|url1>http://vega.github.io/vega/</> Vega grammar] ([<tvar|url2>https://github.com/vega/vega/wiki</> documentation]) as underlying technology.</translate> | ||
| − | + | ||
<!--T:3--> | <!--T:3--> | ||
Vega team is working on [<tvar|url>http://vega.github.io/</> other tools] to make Graphs easier to use.</translate> | Vega team is working on [<tvar|url>http://vega.github.io/</> other tools] to make Graphs easier to use.</translate> | ||
| − | + | ||
<!--T:4--> | <!--T:4--> | ||
For interactive graphs [<tvar|url>https://github.com/vega/vega/wiki/Tutorial</> this tutorial] will explain building graphs step by step.</translate> | For interactive graphs [<tvar|url>https://github.com/vega/vega/wiki/Tutorial</> this tutorial] will explain building graphs step by step.</translate> | ||
| − | + | ||
<!--T:5--> | <!--T:5--> | ||
For other graph ideas, see [<tvar|url>http://vega.github.io/vega-editor/?spec=bar</> Vega examples]. | For other graph ideas, see [<tvar|url>http://vega.github.io/vega-editor/?spec=bar</> Vega examples]. | ||
| Line 22: | Line 22: | ||
<!--T:7--> | <!--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> | 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> | ||
| − | + | ||
<!--T:8--> | <!--T:8--> | ||
Graph:Chart supports many common graph types such as line, area, and pie charts: | Graph:Chart supports many common graph types such as line, area, and pie charts: | ||
| Line 47: | Line 47: | ||
|y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}} | |y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}} | ||
| − | + | ||
== Vega 2.0 interactive examples == <!--T:9--> | == Vega 2.0 interactive examples == <!--T:9--> | ||
| Line 66: | Line 66: | ||
{{Extension:Graph/Demo/IndexChart}} | {{Extension:Graph/Demo/IndexChart}} | ||
| − | + | ||
== Using RESTBase API == <!--T:11--> | == Using RESTBase API == <!--T:11--> | ||
<!--T:12--> | <!--T:12--> | ||
Show pageview graphs for a range of dates, using pageview analytics API.</translate> | Show pageview graphs for a range of dates, using pageview analytics API.</translate> | ||
| − | + | ||
<!--T:13--> | <!--T:13--> | ||
See <tvar|1>{{ll|Template:Graph:PageViews}}</>. | 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> | <pre> | ||
{{Template:Graph:PageViews}} | {{Template:Graph:PageViews}} | ||
| Line 84: | Line 84: | ||
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}} | {{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}} | ||
| − | + | ||
<!--T:15--> | <!--T:15--> | ||
''' Current page and en.wikipedia main page for the last 30 days - per type'''</translate> | ''' Current page and en.wikipedia main page for the last 30 days - per type'''</translate> | ||
| Line 90: | Line 90: | ||
{{Extension:Graph/Demo/Pageviews2|en.wikipedia|Main Page|30}} | {{Extension:Graph/Demo/Pageviews2|en.wikipedia|Main Page|30}} | ||
| − | + | ||
== Using MediaWiki API == <!--T:16--> | == Using MediaWiki API == <!--T:16--> | ||
<!--T:17--> | <!--T:17--> | ||
This graph shows edit history for a wiki page.</translate> | This graph shows edit history for a wiki page.</translate> | ||
| − | + | ||
<!--T:18--> | <!--T:18--> | ||
See <tvar|1>{{template|Graph:PageHistory}}</>. | See <tvar|1>{{template|Graph:PageHistory}}</>. | ||
</translate> | </translate> | ||
{| | {| | ||
| − | ! | + | ! <!--T:19--> Current Page</translate> |
| − | ! [[wikipedia:Albert Einstein|Albert Einstein]] | + | ! [[wikipedia:Albert Einstein|Albert Einstein]] <!--T:20--> from en.wikipedia.org</translate> |
|- | |- | ||
| {{ Graph:PageHistory | width=500 | height=300 }} | | {{ Graph:PageHistory | width=500 | height=300 }} | ||
| Line 107: | Line 107: | ||
|} | |} | ||
| − | + | ||
<!--T:21--> | <!--T:21--> | ||
This graph shows the number of pages in each subcategory.</translate> | This graph shows the number of pages in each subcategory.</translate> | ||
| − | + | ||
<!--T:22--> | <!--T:22--> | ||
See [[<tvar|1>Special:MyLanguage/Extension:Graph/Demo/CategoryPie</>|graph source code]]. | See [[<tvar|1>Special:MyLanguage/Extension:Graph/Demo/CategoryPie</>|graph source code]]. | ||
| Line 116: | Line 116: | ||
{| | {| | ||
! [[:Category:Extensions by category|Category:'''Extensions by category''']]. | ! [[:Category:Extensions by category|Category:'''Extensions by category''']]. | ||
| − | ! [[:en:Category:People|Category:'''People''']] | + | ! [[:en:Category:People|Category:'''People''']] <!--T:23--> from en.wikipedia.org</translate> |
|- | |- | ||
| {{Extension:Graph/Demo/CategoryPie|Extensions by category}} | | {{Extension:Graph/Demo/CategoryPie|Extensions by category}} | ||
| Line 122: | Line 122: | ||
|} | |} | ||
| − | + | ||
== Using Wikidata Query Service API == <!--T:24--> | == Using Wikidata Query Service API == <!--T:24--> | ||
| Line 130: | Line 130: | ||
{{Extension:Graph/Demo/Sparql/Largest disasters}} | {{Extension:Graph/Demo/Sparql/Largest disasters}} | ||
| − | + | ||
== Trees == <!--T:26--> | == Trees == <!--T:26--> | ||
| Line 139: | Line 139: | ||
{{Extension:Graph/Demo/CartesianTree}} | {{Extension:Graph/Demo/CartesianTree}} | ||
| − | + | ||
=== Radial tree === <!--T:28--> | === Radial tree === <!--T:28--> | ||
</translate> | </translate> | ||
| Line 152: | Line 152: | ||
{{Extension:Graph/Demo/Dendrogram}} | {{Extension:Graph/Demo/Dendrogram}} | ||
| − | + | ||
==Timeline / lifeline== <!--T:29--> | ==Timeline / lifeline== <!--T:29--> | ||
</translate> | </translate> | ||
| Line 282: | Line 282: | ||
}</graph> | }</graph> | ||
| − | + | ||
== More maps examples == <!--T:30--> | == More maps examples == <!--T:30--> | ||
<!--T:31--> | <!--T:31--> | ||
This transcludes the page <tvar|1>[[Extension:Graph/Demo/Map]]</>.</translate> | This transcludes the page <tvar|1>[[Extension:Graph/Demo/Map]]</>.</translate> | ||
| − | + | ||
<!--T:32--> | <!--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> | 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> | ||
| − | + | ||
<!--T:33--> | <!--T:33--> | ||
(MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.) | (MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.) | ||
| Line 301: | Line 301: | ||
</source> | </source> | ||
| − | + | ||
<!--T:35--> | <!--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> | 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> | ||
| Line 307: | Line 307: | ||
<pre>{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}</pre> | <pre>{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}</pre> | ||
| − | + | ||
<!--T:36--> | <!--T:36--> | ||
The Lua function's output is data in Vega's format:</translate> | The Lua function's output is data in Vega's format:</translate> | ||
| Line 318: | Line 318: | ||
{{Extension:Graph/Demo/Map|{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }} | scale=90}} | {{Extension:Graph/Demo/Map|{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }} | scale=90}} | ||
| − | + | ||
<!--T:37--> | <!--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> | 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> | ||
| − | + | ||
<!--T:38--> | <!--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> | 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> | ||
| − | + | ||
<!--T:39--> | <!--T:39--> | ||
Additional optional parameter specifies that it should be scaled to 80%. | Additional optional parameter specifies that it should be scaled to 80%. | ||
| Line 333: | Line 333: | ||
{{Extension:Graph/Demo/MapTemplate|type=sqrt|colors=["#ffff65","#cb0000"]|scale=180}} | {{Extension:Graph/Demo/MapTemplate|type=sqrt|colors=["#ffff65","#cb0000"]|scale=180}} | ||
| − | + | ||
<!--T:40--> | <!--T:40--> | ||
Note how the legend it wrongly positioned.</translate> | Note how the legend it wrongly positioned.</translate> | ||
| − | + | ||
<!--T:41--> | <!--T:41--> | ||
That won't happen at lower scales. | That won't happen at lower scales. | ||
| Line 347: | Line 347: | ||
<!--T:44--> | <!--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> | 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> | ||
| − | + | ||
<!--T:45--> | <!--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. | 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. | ||
| Line 362: | Line 362: | ||
{{Extension:Graph/Demo/TemplateSample |#f00dee}} | {{Extension:Graph/Demo/TemplateSample |#f00dee}} | ||
| − | + | ||
=== Using a template for repeated graphs === <!--T:46--> | === Using a template for repeated graphs === <!--T:46--> | ||
| Line 375: | Line 375: | ||
{{Extension:Graph/Demo/falkensee}} | {{Extension:Graph/Demo/falkensee}} | ||
| − | + | ||
== Embedded directly with <nowiki><graph></nowiki> == <!--T:50--> | == Embedded directly with <nowiki><graph></nowiki> == <!--T:50--> | ||
| Line 443: | Line 443: | ||
}</graph> | }</graph> | ||
| − | + | ||
== Horizontal bar graph == <!--T:52--> | == Horizontal bar graph == <!--T:52--> | ||
</translate> | </translate> | ||
| Line 450: | Line 450: | ||
{{Extension:Graph/Demo/HorizontalBarGraphSample}} | {{Extension:Graph/Demo/HorizontalBarGraphSample}} | ||
| − | + | ||
== Editing graph data == <!--T:53--> | == Editing graph data == <!--T:53--> | ||
Revision as of 03:53, 21 December 2019
This page shows some examples of what Graph extension can produce.</translate>
Graphs use [<tvar|url1>http://vega.github.io/vega/</> Vega grammar] ([<tvar|url2>https://github.com/vega/vega/wiki</> documentation]) as underlying technology.</translate>
Vega team is working on [<tvar|url>http://vega.github.io/</> other tools] to make Graphs easier to use.</translate>
For interactive graphs [<tvar|url>https://github.com/vega/vega/wiki/Tutorial</> this tutorial] will explain building graphs step by step.</translate>
For other graph ideas, see [<tvar|url>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.</translate>
Graph:Chart supports many common graph types such as line, area, and pie charts: </translate>
{{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}}
Vega 2.0 interactive examples
See tutorial how to build this:</translate> Template:Extension:Graph/Demo/HistoricalFertilityRates
Extension:Graph/Demo/Dimpvis Template:Extension:Graph/Demo/Dimpvis
Extension:Graph/Demo/Airports Template:Extension:Graph/Demo/Airports
Extension:Graph/Demo/OverviewDetail Template:Extension:Graph/Demo/OverviewDetail
Extension:Graph/Demo/IndexChart Template:Extension:Graph/Demo/IndexChart
Using RESTBase API
Show pageview graphs for a range of dates, using pageview analytics API.</translate>
See <tvar|1>Template:Graph:PageViews</>. </translate>
Current page and en.wikipedia.org's main page for the last 30 days</translate>
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
Current page and en.wikipedia main page for the last 30 days - per type</translate>
Template:Extension:Graph/Demo/Pageviews2
Template:Extension:Graph/Demo/Pageviews2
Using MediaWiki API
This graph shows edit history for a wiki page.</translate>
See <tvar|1>
- REDIRECT Template:Template link expanded
 This page is a redirect:
|
</>.
</translate>
| Current Page</translate> | Albert Einstein from en.wikipedia.org</translate> |
|---|---|
This graph shows the number of pages in each subcategory.</translate>
See [[<tvar|1>Special:MyLanguage/Extension:Graph/Demo/CategoryPie</>|graph source code]]. </translate>
| Category:Extensions by category. | Category:People from en.wikipedia.org</translate> |
|---|---|
| Template:Extension:Graph/Demo/CategoryPie | Template:Extension:Graph/Demo/CategoryPie |
Using Wikidata Query Service API
See more examples.</translate>
Template:Extension:Graph/Demo/Sparql/Largest disasters
Trees
Cartesian tree
</translate> Extension:Graph/Demo/CartesianTree
Template:Extension:Graph/Demo/CartesianTree
Radial tree
</translate> Extension:Graph/Demo/RadialTree
Template:Extension:Graph/Demo/RadialTree
Dendrogram
Extension:Graph/Demo/Dendrogram
Template:Extension:Graph/Demo/Dendrogram
Timeline / lifeline
</translate>
More maps examples
This transcludes the page <tvar|1>Extension:Graph/Demo/Map</>.</translate>
The <graph> tag's JSON data on that page specifies that its countries data comes from a separate URL, Extension:Graph/Demo/RawData:WorldMap-iso2-json, that contains map data in JSON format.</translate>
(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 <graph> tag's JSON data specifies a highlight color for each country, in the format "country-code":"highlight-color":</translate>
{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}
Vega usually works with data in the format [{"id":"country-code", "v":"highlight-color"}, ...], so I created a helper Lua function to convert the data:</translate>
{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}
The Lua function's output is data in Vega's format:</translate>
[{"id":"US","v":"blue"},{"id":"AU","v":"purple"},{"id":"CN","v":"red"},{"id":"BR","v":"pink"},{"id":"DZ","v":"green"}]
Template:Extension:Graph/Demo/Map
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).</translate>
To generate this graph, I use Lua module Graph:Utils's function parseCsv 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.</translate>
Additional optional parameter specifies that it should be scaled to 80%. </translate>
{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}
Template:Extension:Graph/Demo/MapTemplate
Note how the legend it wrongly positioned.</translate>
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.
As an example, the graph specification in TemplateSample does not hardcode a fill color for marks.properties.update.fill.value; instead it sets the fill color to {{{1|#ccc}}}.</translate>
So if you visit that page or transclude it with no parameter, the graph fills with color #ccc; but if you transclude that page you can specify the fill color as the first template parameter.
</translate>
{{Extension:Graph/Demo/TemplateSample}}
{{Extension:Graph/Demo/TemplateSample | blue}}
{{Extension:Graph/Demo/TemplateSample | #f00dee}}
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.</translate>
Template:Extension:Graph/Demo/falkensee
Embedded directly with <graph>
This example is a <graph> tag containing the graph JSON inside the current page.
</translate>
Horizontal bar graph
</translate> Extension:Graph/Demo/HorizontalBarGraphSample
Template:Extension:Graph/Demo/HorizontalBarGraphSample
Editing graph data
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 JSON before you copy and paste it into the wiki page. If the <graph> 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>