4,000
edits
Changes
mLine 6:
Line 6: − Graphs use [<tvar|url1>http://vega.github.io/vega/ Vega grammar] ([<tvar|url2>https://github.com/vega/vega/wiki documentation]) as underlying technology.+ − Vega team is working on [<tvar|url>http://vega.github.io/ other tools] to make Graphs easier to use.+ − For interactive graphs [<tvar|url>https://github.com/vega/vega/wiki/Tutorial this tutorial] will explain building graphs step by step.+ − For other graph ideas, see [<tvar|url>http://vega.github.io/vega-editor/?spec=bar Vega examples].+ Line 26:
Line 26: − <pre style="font-size:90%;">{{Graph:Chart|width=600|height=100|xAxisTitle=X|yAxisTitle=Y+ Line 35:
Line 35: − |y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}</pre>+ Line 72:
Line 72: − See <tvar|1>{{ll|Template:Graph:PageViews}}.+ − <pre>+ − </pre>+ Line 96:
Line 96: − See <tvar|1>{{template|Graph:PageHistory}}.+ Line 111:
Line 111: − See [[<tvar|1>Special:MyLanguage/Extension:Graph/Demo/CategoryPie|graph source code]].+ Line 154:
Line 154: − <graph>+ Line 279:
Line 279: − }</graph>+ Line 285:
Line 285: − This transcludes the page <tvar|1>[[Extension:Graph/Demo/Map]].+ − 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.+ Line 294:
Line 294: − 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> − 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>+ + + Line 322:
Line 322: − 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.+ Line 328:
Line 328: − <pre style="font-size:90%;">{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}</pre>+ Line 345:
Line 345: − 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>.+ + + − 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>+ Line 375:
Line 375: − == Embedded directly with <nowiki><graph></nowiki> == + − This example is a <code><nowiki><graph></nowiki></code> tag containing the graph JSON inside the current page.+ + − <graph> Line 440:
Line 440: − }</graph>+ Line 453:
Line 453: − 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.+
Text replacement - "<tvar|(.*)>" to ""
https://github.com/vega/vega/wiki documentation]) as underlying technology.
http://vega.github.io/ other tools] to make Graphs easier to use.
https://github.com/vega/vega/wiki/Tutorial this tutorial] will explain building graphs step by step.
http://vega.github.io/vega-editor/?spec=bar Vega examples].
== Graph templates ==
== Graph templates ==
{{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}}
|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
{{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
|legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
{{ll|Template:Graph:PageViews}}.
''' Current page and en.wikipedia.org's main page for the last 30 days'''
''' Current page and en.wikipedia.org's main page for the last 30 days'''
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}
{{template|Graph:PageHistory}}.
{|
{|
Special:MyLanguage/Extension:Graph/Demo/CategoryPie|graph source code]].
{|
{|
==Timeline / lifeline==
==Timeline / lifeline==
{
{
"width": 800,
"width": 800,
}
}
]
]
[[Extension:Graph/Demo/Map]].
data comes from a separate URL, [[Extension:Graph/Demo/RawData:WorldMap-iso2-json]], that contains map data in JSON format.
:
{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}
{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}
, so I created a helper Lua function to convert the data:
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.
{{Extension:Graph/Demo/MapTemplate|type=sqrt|colors=["#ffff65","#cb0000"]|scale=180}}
{{Extension:Graph/Demo/MapTemplate|type=sqrt|colors=["#ffff65","#cb0000"]|scale=180}}
.
; 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}}
{{Extension:Graph/Demo/TemplateSample | blue}}
{{Extension:Graph/Demo/TemplateSample | blue}}
{{Extension:Graph/Demo/TemplateSample | #f00dee}}
{{Extension:Graph/Demo/TemplateSample | #f00dee}}
{{Extension:Graph/Demo/TemplateSample}}
{{Extension:Graph/Demo/TemplateSample}}
==
tag containing the graph JSON inside the current page.
{
{
"version": 2, "width": 400, "height": 200,
"version": 2, "width": 400, "height": 200,
}
}
]
]
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|Demo]]
[[Category:Extension:Graph|Demo]]