ヘルプ:グラフ
ここでは、Wikivoyageにおけるグラフの作成方法について解説します。ここでいうグラフとは、棒グラフ、円グラフ、線グラフ、タイムテーブル、ヒストグラムなどです。これらの記述は非常に複雑なため、wikiマークアップ記法をよく理解してから読むようにしてください。また、表記にはJSON?を使用するため、JSONの知識があると理解しやすいかも知れません。
pathタグを使う
編集 | 現在セキュリティ上の理由によりグラフ拡張機能は、すべてのウィキメディアウィキで無効化されているため利用出来ません。詳細はPhabricatorタスクを参照してください。 |
ここでは、MediaWikiのグラフ拡張機能が追加する、<graph>タグで記述する方法を紹介します。
<graph>タグを使う際は、タグで囲んだ中にVega記法でグラフを書きます。以下では、Vega記法の書き方を紹介します。
棒グラフ
編集横棒グラフ
編集- 例
--mw:Extension:Graph/Demo/HorizontalBarGraphSampleより
- code
{
"version": 2, "width": 400, "height": 400,
"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
"data": [
{
"name": "table",
"values": [
{"t": "a", "v": 28}, {"t": "b", "v": 55},
{"t": "c", "v": 43}, {"t": "d", "v": 91},
{"t": "e", "v": 81}, {"t": "f", "v": 53},
{"t": "g", "v": 19}, {"t": "h", "v": 87},
{"t": "i", "v": 52}, {"t": "j", "v": 48},
{"t": "k", "v": 24}, {"t": "l", "v": 49},
{"t": "m", "v": 87}, {"t": "n", "v": 66},
{"t": "o", "v": 17}, {"t": "p", "v": 27},
{"t": "q", "v": 68}, {"t": "r", "v": 16},
{"t": "s", "v": 49}, {"t": "t", "v": 15}
]
}
],
"scales": [
{
"name": "x",
"range": "width",
"domain": {"data": "table", "field": "v"}
},
{
"name": "y",
"range": "height",
"type": "ordinal",
"domain": {"data": "table", "field": "t"}
}
],
"axes": [
{"type": "x", "scale": "x"},
{"type": "y", "scale": "y"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"properties": {
"enter": {
"y": {"scale": "y", "field": "t"},
"height": {"scale": "y", "band": true, "offset": -1},
"x": {"scale": "x", "value": 0},
"x2": {"scale": "x", "field": "v"}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
}
]
}
ここでは、上記グラフを任意の横棒グラフにする方法を紹介します。まず2行目でグラフの大きさを指定します。widthは横幅、heightは縦の長さを指定します。その次に、4行目～20行目のdataキーです。tにタイトルを、vに棒の長さを入れてください。最後に、49～51行目のupdateキーで初期の色を（上の例ではsteelblueとなっている部分です）、52～54行目のhoverキーでカーソルを合わせた際の色を（上の例ではredとなっている部分です）指定することで任意のグラフを作成することができます。
縦棒グラフ
編集- 例
--mw:Special:PermanentLink/4244180#Embedded_directly_with_<graph>より
- code
{
"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"}
}
}
}
]
}
このグラフも、任意のグラフにするために変更する点は横棒グラフと同じです。2行目のwidthでグラフの横幅を、heightでグラフの縦幅を指定します。4～20行目のdataキーでは、xに下に表示されるタイトルを、yに棒の長さを指定します。ただし、xに指定する値は数字でなくてはなりません。51行目で既定の色を指定し（上の例ではsteelblueとなっている部分です）、54行目ではカーソルを合わせた時の色を指定します（上の例ではredとなっている部分です）。
棒グラフの応用
編集人口ピラミッド
- 例
※注意 : ここで紹介する例は、人口の情報が別のファイルから呼び出しているため、表示されない可能性が高いです。
--https://vega.github.io/editor/#/examples/vega/population-pyramidより
- code
{
"version": 2,
"width": 620,
"height": 400,
"signals": [
{ "name": "chartWidth", "value": 300 },
{ "name": "chartPad", "value": 20 },
{ "name": "width", "update": "2 * chartWidth + chartPad" },
{ "name": "year", "value": 2000,
"bind": {"input": "range", "min": 1850, "max": 2000, "step": 10} }
],
"data": [
{
"name": "population",
"url": "data/population.json"
},
{
"name": "popYear",
"source": "population",
"transform": [
{"type": "filter", "expr": "datum.year == year"}
]
},
{
"name": "males",
"source": "popYear",
"transform": [
{"type": "filter", "expr": "datum.sex == 1"}
]
},
{
"name": "females",
"source": "popYear",
"transform": [
{"type": "filter", "expr": "datum.sex == 2"}
]
},
{
"name": "ageGroups",
"source": "population",
"transform": [
{ "type": "aggregate", "groupby": ["age"] }
]
}
],
"scales": [
{
"name": "y",
"type": "band",
"range": [{"signal": "height"}, 0],
"round": true,
"domain": {"data": "ageGroups", "field": "age"}
},
{
"name": "c",
"type": "ordinal",
"domain": [1, 2],
"range": ["#d5855a", "#6c4e97"]
}
],
"marks": [
{
"type": "text",
"interactive": false,
"from": {"data": "ageGroups"},
"encode": {
"enter": {
"x": {"signal": "chartWidth + chartPad / 2"},
"y": {"scale": "y", "field": "age", "band": 0.5},
"text": {"field": "age"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#000"}
}
}
},
{
"type": "group",
"encode": {
"update": {
"x": {"value": 0},
"height": {"signal": "height"}
}
},
"scales": [
{
"name": "x",
"type": "linear",
"range": [{"signal": "chartWidth"}, 0],
"nice": true, "zero": true,
"domain": {"data": "population", "field": "people"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "format": "s", "title": "Females"}
],
"marks": [
{
"type": "rect",
"from": {"data": "females"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "people"},
"x2": {"scale": "x", "value": 0},
"y": {"scale": "y", "field": "age"},
"height": {"scale": "y", "band": 1, "offset": -1},
"fillOpacity": {"value": 0.6},
"fill": {"scale": "c", "field": "sex"}
}
}
}
]
},
{
"type": "group",
"encode": {
"update": {
"x": {"signal": "chartWidth + chartPad"},
"height": {"signal": "height"}
}
},
"scales": [
{
"name": "x",
"type": "linear",
"range": [0, {"signal": "chartWidth"}],
"nice": true, "zero": true,
"domain": {"data": "population", "field": "people"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "format": "s", "title": "Males"}
],
"marks": [
{
"type": "rect",
"from": {"data": "males"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "people"},
"x2": {"scale": "x", "value": 0},
"y": {"scale": "y", "field": "age"},
"height": {"scale": "y", "band": 1, "offset": -1},
"fillOpacity": {"value": 0.6},
"fill": {"scale": "c", "field": "sex"}
}
}
}
]
}
]
}
上記コードは、18行目でdata/population.jsonというjsonファイルから人口の情報を取得し、人口ピラミッドにしています。ピラミッドが表示されていない場合は、こちらをご覧ください。
円グラフ
編集- 例
- code
{
"version": 2,
"width": 300,
"height": 300,
"data": [
{
"name": "table",
"url": "wikiapi:///?generator=categorymembers&gcmtitle=Category:{{urlencode:カテゴリ}}&gcmtype=subcat&action=query&gcmlimit=max&prop=categoryinfo&formatversion=2&format=json",
"format": {"property": "query.pages","type": "json"},
"transform": [
{"type": "sort","by": "-categoryinfo.size"},
{"type": "pie","field": "categoryinfo.size"}
]
}
],
"scales": [
{
"name": "color",
"domain": {"data": "table","field": "title"},
"range": "category10",
"type": "ordinal"
}
],
"marks": [
{
"from": {"data": "table"},
"type": "arc",
"properties": {
"enter": {
"fill": {"scale": "color","field": "title"},
"outerRadius": {"value": 200},
"startAngle": {"field": "layout_start"},
"endAngle": {"field": "layout_end"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "text",
"from": {
"data": "table",
"transform": [
{ "type": "formula", "field": "sliceSize", "expr": "(datum.layout_end - datum.layout_start)*180/PI" },
{ "type": "filter", "test": "datum.sliceSize > 2" },
{ "type": "formula", "field": "title", "expr": "substring(datum.title, 1+indexof(datum.title,':'), 40)" },
{ "type": "formula", "field": "invert", "expr": "datum.layout_mid*180/PI < 180 ? 1 : -1" },
{ "type": "formula", "field": "align", "expr": "datum.invert < 0 ? 'left' : 'right'" },
{ "type": "formula", "field": "angle", "expr": "(datum.layout_mid*180/PI)-90*datum.invert" },
{ "type": "formula", "field": "fontSize", "expr": "datum.sliceSize > 20 ? 15 : (datum.sliceSize > 10 ? 14 : 10)" },
{ "type": "formula", "field": "fontWeight", "expr": "datum.sliceSize > 15 ? 'bold' : 'normal'" }
]
},
"properties": {
"enter": {
"align": {"field": "align"},
"angle": {"field": "angle"},
"baseline": {"value": "middle"},
"fill": {"value": "black"},
"fontSize": {"field": "fontSize"},
"fontWeight": {"field": "fontWeight"},
"radius": {"value": 270},
"text": {"field": "title"},
"theta": {"field": "layout_mid"}
}
}
}
]
}
上のグラフはCategory:カテゴリの下位カテゴリを円グラフにしたものです。8行目でapiからカテゴリの下位カテゴリを取得しています。
- 例
--https://vega.github.io/editor/#/examples/vega/radial-plotより一部改変
- code
{
"version": 2,
"width": 100,
"height": 100,
"data": [
{
"name": "table",
"values": [12,23,47,6,52,19],
"transform": [{"type": "pie","field": "data"}]
}
],
"scales": [
{
"name": "r",
"type": "sqrt",
"domain": {"data": "table","field": "data"},
"range": [20,100]
}
],
"marks": [
{
"type": "arc",
"from": {"data": "table"},
"properties": {
"enter": {
"x": {"field": {"group": "width"},"mult": 0.5},
"y": {"field": {"group": "height"},"mult": 0.5},
"startAngle": {"field": "layout_start"},
"endAngle": {"field": "layout_end"},
"innerRadius": {"value": 20},
"outerRadius": {"scale": "r","field": "data"},
"stroke": {"value": "#fff"}
},
"update": {"fill": {"value": "steelblue"} },
"hover": {"fill": {"value": "red"} }
}
},
{
"type": "text",
"from": {"data": "table"},
"properties": {
"enter": {
"x": {"field": {"group": "width"},"mult": 0.5},
"y": {"field": {"group": "height"},"mult": 0.5},
"radius": {"scale": "r","field": "data","offset": 8},
"theta": {"field": "layout_mid"},
"fill": {"value": "#000"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"text": {"field": "data"}
}
}
}
]
}
3行目、4行目のwidth・heightでグラフの大きさを調節します。通常これらの値は等しくするべきです。グラフの値は8行目で変えることができます。上から時計回りに指定してください。34行目で既定の色が、35行目でカーソルを合わせた際の色が指定できます
テンプレートを使う
編集ここでは、上に示したものより簡単にグラフを作る方法を紹介します。ウィキボヤージュにはグラフを作るためのTemplateがあります。それを使用してグラフを作ります。
円グラフ
編集{{Pie chart}}を使います。詳しくはTemplateのページの解説をご覧ください。
表を使う
編集「Help:表」も参照
棒グラフ
編集縦棒グラフ
編集- 例
| 1 | 617 | |
| 2 | 980 | |
| 3 | 243 | |
| 4 | 590 | |
| 5 | 844 | |
| 6 | 244 | |
| 7 | 706 | |
| 8 | 663 | |
| 9 | 821 | |
| 10 | 401 |
- code
{|
|-
|'''1'''
|style="text-align:right;"|617
|<div style="background-color: steelblue; width: 617px; height:15px;"></div>
|-
|'''2'''
|style="text-align:right;"|980
|<div style="background-color: steelblue; width: 980px; height:15px;"></div>
|-
|'''3'''
|style="text-align:right;"|243
|<div style="background-color: steelblue; width: 243px; height:15px;"></div>
|-
|'''4'''
|style="text-align:right;"|590
|<div style="background-color: steelblue; width: 590px; height:15px;"></div>
|-
|'''5'''
|style="text-align:right;"|844
|<div style="background-color: steelblue; width: 844px; height:15px;"></div>
|-
|'''6'''
|style="text-align:right;"|244
|<div style="background-color: steelblue; width: 244px; height:15px;"></div>
|-
|'''7'''
|style="text-align:right;"|706
|<div style="background-color: steelblue; width: 706px; height:15px;"></div>
|-
|'''8'''
|style="text-align:right;"|663
|<div style="background-color: steelblue; width: 663px; height:15px;"></div>
|-
|'''9'''
|style="text-align:right;"|821
|<div style="background-color: steelblue; width: 821px; height:15px;"></div>
|-
|'''10'''
|style="text-align:right;"|401
|<div style="background-color: steelblue; width: 401px; height:15px;"></div>
|}
パターン :
|-
|'''1'''
|style="text-align:right;"|617
|<div style="background-color: steelblue; width: 617px; height:15px;"></div>
1つの行に3つセルを作成するもの。セルが2つでいい場合はパターンの2行目或いは3行目を削除すればよい。<div>タグのstyle属性では、background-colorにグラフの色を、widthにグラフの長さを、heightにグラフの太さを指定する。
円グラフ
編集- 例
One (42%)
Two (32%)
Three (12%)
Four (3%)
Five (2%)
Six (1%)
その他(8%)
--w:ja:特別:固定リンク/67975238#表示例より
- code
<div class="thumb tright" style=""><div class="thumbinner" style="width:202px">
<div style="background-color:white;margin:auto;position:relative;width:200px;height:200px;overflow:hidden;border-radius:100px;border:1px solid black">
<div style="border:solid transparent;position:absolute;width:100px;line-height:0;left:100px; top:100px; border-width:100px 0 0 181.89932472811px; border-left-color:aqua"></div>
<div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 200px 100px 0;border-color:aqua"></div>
<div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 100px 200px 0;border-color:aqua"></div>
<div style="border:solid transparent;position:absolute;width:100px;line-height:0;left:100px; top:100px; border-width:100px 0 0 157.57478599687px; border-left-color:fuchsia"></div>
<div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 200px 100px 0;border-color:fuchsia"></div>
<div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 100px 200px 0;border-color:fuchsia"></div>
<div style="border:solid transparent;position:absolute;width:100px;line-height:0;left:100px; top:100px; border-width:100px 0 0 120.87923504096px; border-left-color:yellow"></div>
<div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 200px 100px 0;border-color:yellow"></div>
<div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 100px 200px 0;border-color:yellow"></div>
<div style="border:solid transparent;position:absolute;width:100px;line-height:0;left:100px; top:100px; border-width:100px 0 0 82.727194597248px; border-left-color:blue"></div>
<div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 200px 100px 0;border-color:blue"></div>
<div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 100px 200px 0;border-color:blue"></div>
<div style="border:solid transparent;position:absolute;width:100px;line-height:0;right:100px; top:100px; border-width:99.802672842827px 6.2790519529313px 0 0; border-top-color:green"></div>
<div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 200px 100px 0;border-color:green"></div>
<div style="border:solid transparent;position:absolute;width:100px;line-height:0;right:100px; top:0; border-width:0 181.89932472811px 100px 0; border-right-color:red"></div>
<div style="position:absolute;line-height:0;border-style:solid;right:0;top:0;border-width:0 100px 100px 0;border-color:red"></div>
</div>
<div class="thumbcaption">
<div class="legend">
<span class="legend-color" style="display:inline-block; width:1.5em; height:1.5em; margin:1px 0; border:1px solid black; background-color:red; color:black; font-size:100%; text-align:center;"> </span>
One (42%)
</div>
<div class="legend">
<span class="legend-color" style="display:inline-block; width:1.5em; height:1.5em; margin:1px 0; border:1px solid black; background-color:green; color:black; font-size:100%; text-align:center;"> </span>
Two (32%)
</div>
<div class="legend">
<span class="legend-color" style="display:inline-block; width:1.5em; height:1.5em; margin:1px 0; border:1px solid black; background-color:blue; color:black; font-size:100%; text-align:center;"> </span>
Three (12%)
</div>
<div class="legend">
<span class="legend-color" style="display:inline-block; width:1.5em; height:1.5em; margin:1px 0; border:1px solid black; background-color:yellow; color:black; font-size:100%; text-align:center;"> </span>
Four (3%)
</div>
<div class="legend">
<span class="legend-color" style="display:inline-block; width:1.5em; height:1.5em; margin:1px 0; border:1px solid black; background-color:fuchsia; color:black; font-size:100%; text-align:center;"> </span>
Five (2%)
</div>
<div class="legend">
<span class="legend-color" style="display:inline-block; width:1.5em; height:1.5em; margin:1px 0; border:1px solid black; background-color:aqua; color:black; font-size:100%; text-align:center;"> </span>
Six (1%)
</div>
<div class="legend">
<span class="legend-color" style="display:inline-block; width:1.5em; height:1.5em; margin:1px 0; border:1px solid black; background-color:white; color:black; font-size:100%; text-align:center;"> </span>
その他(8%)
</div>
</div>
</div>
</div>
3～18行目で円グラフを書いています。position:absoluteで位置を指定し、ボーダーで円グラフを絵画しています。
関連項目
編集- Extension:Graph - MediaWikiの解説
- Extention:Graph/Demo - グラフの例
- 特別:GraphSandbox - グラフ用のサンドボックス
- Vega公式サイト
- Help:表 - Wikivoyageにおける表の書き方