Extension:Graph/Demo/HorizontalBarGraphSample

<graph>

{
  "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"}
        }
      }
    }
  ]
}

</graph>