Extension:Graph/Demo/ja

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



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





Vega 2.0 インタラクティブなグラフの見本
作成方法はチュートリアルをご参照ください.

Extension:Graph/Demo/Dimpvis

Extension:Graph/Demo/Airports

Extension:Graph/Demo/OverviewDetail

Extension:Graph/Demo/IndexChart



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

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

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



MediaWiki APIを利用
特定のページの編集履歴を示すグラフ. を参照してください.

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

Using Wikidata Query Service API
See more examples.

Cartesian tree
Extension:Graph/Demo/CartesianTree

Radial tree
Extension:Graph/Demo/RadialTree

Dendrogram
Extension:Graph/Demo/Dendrogram

Timeline / lifeline
{ "width": 800, "height": 200, "data": [ {     "name": "people", "values": [ {"label":"Washington", "born":-7506057600000, "died":-5366196000000, "enter":-5701424400000, "leave":-5453884800000}, {"label":"Adams",     "born":-7389766800000, "died":-4528285200000, "enter":-5453884800000, "leave":-5327740800000}, {"label":"Jefferson", "born":-7154586000000, "died":-4528285200000, "enter":-5327740800000, "leave":-5075280000000}, {"label":"Madison",   "born":-6904544400000, "died":-4213184400000, "enter":-5075280000000, "leave":-4822819200000}, {"label":"Monroe",    "born":-6679904400000, "died":-4370518800000, "enter":-4822819200000, "leave":-4570358400000} ]   },    {      "name": "events", "format": {"type":"json", "parse":{"when":"date"}}, "values": [ {"name":"Decl. of Independence", "when":"July 4, 1776"}, {"name":"U.S. Constitution",    "when":"3/4/1789"}, {"name":"Louisiana Purchase",   "when":"April 30, 1803"}, {"name":"Monroe Doctrine",      "when":"Dec 2, 1823"} ]   }

], "scales": [ {     "name": "y", "type": "ordinal", "range": "height", "domain": {"data": "people", "field": "label"} },   {      "name": "x", "type": "time", "range": "width", "round": true, "nice": "year", "domain": {"data": "people", "field": ["born", "died"]} } ],  "axes": [ {     "type": "x", "scale": "x", "properties": {"labels": {"fontSize": {"value": 18}}} } ],  "marks": [ {     "type": "text", "from": {"data": "events"}, "properties": { "enter": { "x": {"scale": "x", "field": "when"}, "y": {"value": -10}, "angle": {"value": -25}, "fill": {"value": "#000"}, "text": {"field": "name"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 20} }     }    },    {      "type": "rect", "from": {"data": "events"}, "properties": { "enter": { "x": {"scale": "x", "field": "when"}, "y": {"value": -8}, "width": {"value": 1}, "height": {"field": {"group": "height"}, "offset": 8}, "fill": {"value": "#888"} }     }    },    {      "type": "text", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "born"}, "y": {"scale": "y", "field": "label", "offset": -3}, "fill": {"value": "#000"}, "text": {"field": "label"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 20} }     }    },    {      "type": "rect", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "born"}, "x2": {"scale": "x", "field": "died"}, "y": {"scale": "y", "field": "label"}, "height": {"value": 2}, "fill": {"value": "#557"} }     }    },    {      "type": "rect", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "enter"}, "x2": {"scale": "x", "field": "leave"}, "y": {"scale": "y", "field": "label", "offset":-1}, "height": {"value": 4}, "fill": {"value": "#e44"} }     }    }  ] }

More maps examples
This transcludes the page Extension:Graph/Demo/Map. The tag's JSON data on that page specifies that its   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 tag's JSON data specifies a highlight color for each country, in the format  :

Vega usually works with data in the format, so I created a helper Lua function to convert the data:

The Lua function's output is data in Vega's format:

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  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%.



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 does not hardcode a fill color for  ; instead it sets the fill color to. So if you visit that page or transclude it with no parameter, the graph fills with color  ; but if you transclude that page you can specify the fill color as the first template parameter.





連続グラフにテンプレートを使う
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種類のデータを重ねる
ファルケンゼーのグラフの見本は、コードをご参照ください.



タグで直接、埋め込む
このサンプルは タグを書き、表示中のページにグラフJSONを使って表示しています.

{ "version": 2, "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ {     "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2,  "y": 55}, {"x": 3, "y": 43}, {"x": 4,  "y": 91}, {"x": 5, "y": 81}, {"x": 6,  "y": 53}, {"x": 7, "y": 19}, {"x": 8,  "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ]   }  ],  "scales": [ {     "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} },   {      "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "y"} } ],  "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ {     "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0} },       "update": { "fill": {"value": "steelblue"} },       "hover": { "fill": {"value": "red"} }     }    }  ] }



水平棒グラフ
Extension:Graph/Demo/HorizontalBarGraphSample



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