4,000
edits
Changes
mLine 4:
Line 4: − + − + − + − + Line 21:
Line 21: − + − </translate>+ Line 51:
Line 51: − + Line 70:
Line 70: − + − </translate> − + + Line 86:
Line 86: − + Line 94:
Line 94: − + − </translate>+ − + − + Line 109:
Line 109: − + − </translate>+ − + Line 126:
Line 126: − + Line 134:
Line 134: − </translate>+ Line 141:
Line 141: − </translate>+ Line 154:
Line 154: − </translate>+ Line 286:
Line 286: − + − + Line 295:
Line 295: − + Line 303:
Line 303: − + Line 309:
Line 309: − + Line 320:
Line 320: − + − + − </translate>+ Line 335:
Line 335: − + Line 346:
Line 346: − + − </translate>+ Line 371:
Line 371: − + Line 380:
Line 380: − </translate>+ Line 445:
Line 445: − </translate>+ Line 455:
Line 455: − </translate>+
Text replacement - "</translate>" to ""
<!--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.
<!--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.
<!--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.
<!--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.
<!--T:5-->
<!--T:5-->
<!--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]].
<!--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:
<pre style="font-size:90%;">{{Graph:Chart|width=600|height=100|xAxisTitle=X|yAxisTitle=Y
<pre style="font-size:90%;">{{Graph:Chart|width=600|height=100|xAxisTitle=X|yAxisTitle=Y
<!--T:10-->
<!--T:10-->
See [[Extension:Graph/Interactive Graph Tutorial|tutorial]] how to build this:</translate>
See [[Extension:Graph/Interactive Graph Tutorial|tutorial]] how to build this:
{{Extension:Graph/Demo/HistoricalFertilityRates}}
{{Extension:Graph/Demo/HistoricalFertilityRates}}
<!--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.
<!--T:13-->
<!--T:13-->
See <tvar|1>{{ll|Template:Graph:PageViews}}</>.
See <tvar|1>{{ll|Template:Graph:PageViews}}</>.
'''<!--T:14--> Current page and en.wikipedia.org's main page for the last 30 days</translate>'''
'''<!--T:14--> Current page and en.wikipedia.org's main page for the last 30 days'''
<pre>
<pre>
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews}}
<!--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'''
{{Extension:Graph/Demo/Pageviews2|mediawiki|{{FULLPAGENAME}}|30}}
{{Extension:Graph/Demo/Pageviews2|mediawiki|{{FULLPAGENAME}}|30}}
{{Extension:Graph/Demo/Pageviews2|en.wikipedia|Main Page|30}}
{{Extension:Graph/Demo/Pageviews2|en.wikipedia|Main Page|30}}
<!--T:17-->
<!--T:17-->
This graph shows edit history for a wiki page.</translate>
This graph shows edit history for a wiki page.
<!--T:18-->
<!--T:18-->
See <tvar|1>{{template|Graph:PageHistory}}</>.
See <tvar|1>{{template|Graph:PageHistory}}</>.
{|
{|
! <!--T:19--> Current Page</translate>
! <!--T:19--> Current Page
! [[wikipedia:Albert Einstein|Albert Einstein]] <!--T:20--> from en.wikipedia.org</translate>
! [[wikipedia:Albert Einstein|Albert Einstein]] <!--T:20--> from en.wikipedia.org
|-
|-
| {{ Graph:PageHistory | width=500 | height=300 }}
| {{ Graph:PageHistory | width=500 | height=300 }}
<!--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.
<!--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]].
{|
{|
! [[:Category:Extensions by category|Category:'''Extensions by category''']].
! [[:Category:Extensions by category|Category:'''Extensions by category''']].
! [[:en:Category:People|Category:'''People''']] <!--T:23--> from en.wikipedia.org</translate>
! [[:en:Category:People|Category:'''People''']] <!--T:23--> from en.wikipedia.org
|-
|-
| {{Extension:Graph/Demo/CategoryPie|Extensions by category}}
| {{Extension:Graph/Demo/CategoryPie|Extensions by category}}
<!--T:25-->
<!--T:25-->
See [[Extension:Graph/Demo/Sparql|more examples]].</translate>
See [[Extension:Graph/Demo/Sparql|more examples]].
{{Extension:Graph/Demo/Sparql/Largest disasters}}
{{Extension:Graph/Demo/Sparql/Largest disasters}}
=== Cartesian tree === <!--T:27-->
=== Cartesian tree === <!--T:27-->
[[Extension:Graph/Demo/CartesianTree]]
[[Extension:Graph/Demo/CartesianTree]]
=== Radial tree === <!--T:28-->
=== Radial tree === <!--T:28-->
[[Extension:Graph/Demo/RadialTree]]
[[Extension:Graph/Demo/RadialTree]]
==Timeline / lifeline== <!--T:29-->
==Timeline / lifeline== <!--T:29-->
<graph>
<graph>
{
{
<!--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]]</>.
<!--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.
<!--T:33-->
<!--T:33-->
<!--T:34-->
<!--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>
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>:
<source lang="javascript">
<source lang="javascript">
<!--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:
<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:
{{#tag:source|
{{#tag:source|
<!--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]).
<!--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.
<!--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%.
<pre style="font-size:90%;">{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}</pre>
<pre style="font-size:90%;">{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}</pre>
<!--T:40-->
<!--T:40-->
Note how the legend it wrongly positioned.</translate>
Note how the legend it wrongly positioned.
<!--T:41-->
<!--T:41-->
<!--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>.
<!--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.
<pre style="font-size:90%;">
<pre style="font-size:90%;">
<!--T:49-->
<!--T:49-->
Falkensee graph sample, see [[Extension:Graph/Demo/falkensee|code]].</translate>
Falkensee graph sample, see [[Extension:Graph/Demo/falkensee|code]].
{{Extension:Graph/Demo/falkensee}}
{{Extension:Graph/Demo/falkensee}}
<!--T:51-->
<!--T:51-->
This example is a <code><nowiki><graph></nowiki></code> tag containing the graph JSON inside the current page.
This example is a <code><nowiki><graph></nowiki></code> tag containing the graph JSON inside the current page.
<graph>
<graph>
== Horizontal bar graph == <!--T:52-->
== Horizontal bar graph == <!--T:52-->
[[Extension:Graph/Demo/HorizontalBarGraphSample]]
[[Extension:Graph/Demo/HorizontalBarGraphSample]]
<!--T:54-->
<!--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.
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.
[[Category:Extension:Graph{{#translation:}}|Demo]]
[[Category:Extension:Graph{{#translation:}}|Demo]]