ここでは、Wikivoyageにおけるグラフの作成方法について解説します。ここでいうグラフとは、棒グラフ、円グラフ、線グラフ、タイムテーブル、ヒストグラムなどです。これらの記述は非常に複雑なため、wikiマークアップ記法をよく理解してから読むようにしてください。また、表記にはJSON?を使用するため、JSONの知識があると理解しやすいかも知れません。

pathタグを使う

[編集]

ここでは、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のページの解説をご覧ください。

表を使う

[編集]

棒グラフ

[編集]

縦棒グラフ

[編集]
例
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;">&nbsp;</span> &nbsp;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;">&nbsp;</span> &nbsp;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;">&nbsp;</span> &nbsp;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;">&nbsp;</span> &nbsp;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;">&nbsp;</span> &nbsp;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;">&nbsp;</span> &nbsp;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;">&nbsp;</span> &nbsp;その他(8%) </div> </div> </div> </div>

3～18行目で円グラフを書いています。position:absoluteで位置を指定し、ボーダーで円グラフを絵画しています。

関連項目

[編集]
  • Help:表 - Wikivoyageにおける表の書き方
「https://ja.wikivoyage.org/w/index.php?title=ヘルプ:グラフ&oldid=45917」から取得