Graph demo

Extension demonstration (infobox template)

Graph
Documentation	on mediawiki.org
Maintained by WikiTeq?	No
Version

This wiki has the Graph extension installed, which adds a new tag, <graph>, for embedding graphs using the Vega grammar.

The German Wikipedia has developed a module, wikipedia:de:Modul:Graph, that can simplify the process of creating graphs in wikiteqt, but they can also be made directly with the Vega grammar. For example:

<graph>
{
  "width": 400,
  "height": 200,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "values": [
        {"name": "A", "value": 28},
        {"name": "B", "value": 55},
        {"name": "C", "value": 43},
        {"name": "D", "value": 91},
        {"name": "E", "value": 81},
        {"name": "F", "value": 53},
        {"name": "G", "value": 19},
        {"name": "H", "value": 87}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "width",
      "domain": {"data": "table", "field": "name"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "table", "field": "value"},
      "nice": true
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "name"},
          "width": {"scale": "x", "band": true, "offset": -1},
          "y": {"scale": "y", "field": "value"},
          "y2": {"scale": "y", "value": 0}
        },
        "update": {
          "fill": {"value": "steelblue"}
        }
      }
    }
  ]
}
</graph>

produces <graph> {

 "width": 400,
 "height": 200,
 "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
 "data": [
   {
     "name": "table",
     "values": [
       {"name": "A", "value": 28},
       {"name": "B", "value": 55},
       {"name": "C", "value": 43},
       {"name": "D", "value": 91},
       {"name": "E", "value": 81},
       {"name": "F", "value": 53},
       {"name": "G", "value": 19},
       {"name": "H", "value": 87}
     ]
   }
 ],
 "scales": [
   {
     "name": "x",
     "type": "ordinal",
     "range": "width",
     "domain": {"data": "table", "field": "name"}
   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "table", "field": "value"},
     "nice": true
   }
 ],
 "axes": [
   {"type": "x", "scale": "x"},
   {"type": "y", "scale": "y"}
 ],
 "marks": [
   {
     "type": "rect",
     "from": {"data": "table"},
     "properties": {
       "enter": {
         "x": {"scale": "x", "field": "name"},
         "width": {"scale": "x", "band": true, "offset": -1},
         "y": {"scale": "y", "field": "value"},
         "y2": {"scale": "y", "value": 0}
       },
       "update": {
         "fill": {"value": "steelblue"}
       }
     }
   }
 ]

} </graph>