Extension:Graph/デモ

このページでは Graph 拡張機能が作成できるものから、見本の一部を紹介します。 グラフにはVega 文法 (解説文書) を基本の理論として使用します。 Vega チームではその他のツールも開発、グラフを使いやすくしています。 インタラクティブなグラフはこちらのチュートリアルで段階ごとにグラフの作り方を解説します。 グラフのその他のアイデアは、Vega サンプル集をご参照ください。

グラフのテンプレート

グラフを使う簡単な方法は既製のテンプレートの利用で、Template:Graph:Chart など (他の言語版ウィキペディアでも提供) もしくはさらに特化した 円グラフ (英語) があります。 Graph:Chart では一般的な棒グラフ、面グラフ、円グラフなど多くをサポートします。

{{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 インタラクティブなグラフの見本

Extension:Graph/Demo/Dimpvis From https://vega.github.io/editor/#/examples/vega/global-development

Extension:Graph/Demo/Airports From https://vega.github.io/editor/#/examples/vega/airport-connections

Extension:Graph/Demo/OverviewDetail From https://vega.github.io/editor/#/examples/vega/overview-plus-detail

Extension:Graph/Demo/IndexChart From https://vega.github.io/editor/#/examples/vega/stock-index-chart

RESTBase APIの利用

特定範囲の日付期間にわたり、アナリティクスAPIを利用してページビューグラフを表示。 Template:Graph:PageViews を参照してください。

表示中のページならびにen.wikipedia.org の過去30日分のメインページを表示

{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}

表示中のページと en.wikipedia メインページを過去30日にわたり表示 - タイプ別

MediaWiki APIを利用

特定のページの編集履歴を示すグラフ。 {{Graph:PageHistory}} を参照してください。

表示中のページ	Albert Einstein en.wikipedia.orgより

このグラフは下位カテゴリに含まれるページ数を表示します。 グラフのソースコードを参照。

Category:Extensions by category.	Category:People en.wikipedia.orgより

Using Wikidata Query Service API

See more examples.

Trees

Cartesian tree

Extension:Graph/Demo/CartesianTree

Radial tree

Extension:Graph/Demo/RadialTree

Dendrogram

Extension:Graph/Demo/Dendrogram

Timeline / lifeline

More maps examples

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.

MediaWiki テンプレート属性をわたす

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}}

連続グラフにテンプレートを使う

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.

2種類のデータを重ねる

ファルケンゼーのグラフの見本は、コードをご参照ください。

Copied from vega demo, which was modeled on this graph.

水平棒グラフ

Extension:Graph/Demo/HorizontalBarGraphSample

‎<graph> タグで直接、埋め込む

このサンプルは ‎<graph> タグを書き、表示中のページにグラフJSONを使って表示しています。

グラフデータの編集

JSONを手作業で編集すると面倒でエラーを起こしやすいため、JSONLintなどJSON 検査機能を用いるか、Vega LiveエディタなどJSONエディタを用いて編集し、その後JSONをウィキページにコピー&ペーストします。$1 タグのデータを直接、上記の見本のようにページに埋め込んだ場合、VisualEditor を使ってグラフデータを扱うページをそのまま編集できます。 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.