Extension:Graph/Demo
This page shows some examples of what Graph extension can produce.
Graphs use </> Vega grammar (</> documentation) as underlying technology.
Vega team is working on </> other tools to make Graphs easier to use.
For interactive graphs </> this tutorial will explain building graphs step by step.
For other graph ideas, see </> Vega examples.
Graph templates
[edit]The easiest way to use graphs is via pre-built templates such as the Graph:Chart (available on many Wikipedias), or more specialized PieChart.
Graph:Chart supports many common graph types such as line, area, and pie charts:
{{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
[edit]See tutorial how to build this:
Extension:Graph/Demo/Dimpvis From http://vega.github.io/vega-editor/?spec=dimpvis
Extension:Graph/Demo/Airports From http://vega.github.io/vega-editor/?spec=airports
Extension:Graph/Demo/OverviewDetail From http://vega.github.io/vega-editor/?spec=overview+detail
Extension:Graph/Demo/IndexChart From http://vega.github.io/vega-editor/?spec=index_chart
Using RESTBase API
[edit]Show pageview graphs for a range of dates, using pageview analytics API.
See Template:Graph:PageViews </>.
Current page and en.wikipedia.org's main page for the last 30 days
{{Graph:PageViews}} {{Graph:PageViews|30|Main Page|en.wikipedia.org}}
Current page and en.wikipedia main page for the last 30 days - per type
Using MediaWiki API
[edit]This graph shows edit history for a wiki page.
See {{Graph:PageHistory}}
</>.
Current Page | Albert Einstein from en.wikipedia.org |
---|---|
This graph shows the number of pages in each subcategory.
See [[Special:MyLanguage/Extension:Graph/Demo/CategoryPie</>|graph source code]].
Category:Extensions by category. | Category:People from en.wikipedia.org |
---|---|
Template:Extension:Graph/Demo/CategoryPie | Template:Extension:Graph/Demo/CategoryPie |
Using Wikidata Query Service API
[edit]See more examples.
Trees
[edit]Cartesian tree
[edit]Extension:Graph/Demo/CartesianTree
Radial tree
[edit]Extension:Graph/Demo/RadialTree
Dendrogram
[edit]Extension:Graph/Demo/Dendrogram
Timeline / lifeline
[edit]
More maps examples
[edit]This transcludes the page Extension:Graph/Demo/Map</>.
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.
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"
:
{"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:
{{#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:
[{"id":"US","v":"blue"},{"id":"AU","v":"purple"},{"id":"CN","v":"red"},{"id":"BR","v":"pink"},{"id":"DZ","v":"green"}]
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).
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.
Additional optional parameter specifies that it should be scaled to 80%.
{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}
Note how the legend it wrongly positioned.
That won't happen at lower scales.
Passing MediaWiki template parameters
[edit]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}}}
.
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.
{{:Extension:Graph/Demo/TemplateSample}} {{:Extension:Graph/Demo/TemplateSample | blue}} {{:Extension:Graph/Demo/TemplateSample | #f00dee}}
Using a template for repeated graphs
[edit]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
[edit]Falkensee graph sample, see code.
Copied from vega demo, which was modeled on this graph.
Embedded directly with <graph>
[edit]This example is a <graph>
tag containing the graph JSON inside the current page.
Horizontal bar graph
[edit]Extension:Graph/Demo/HorizontalBarGraphSample
Editing graph data
[edit]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.
[[Category:Extension:Graph{{#translation:}}|Demo]]