コンテンツにスキップ

ヘルプ:グラフ

リンクを追加
提供：ウィキボヤージュ

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

表を使う

[編集]
「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;">&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」から取得