Plotrb Example: Bar

README.md

This example is taken from Vega's gallery

The following is the Ruby code that generates bar.json.

require 'plotrb'

data = pdata.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}
    ]
)

xs = ordinal_scale.name('x').from('table.x').to_width
ys = linear_scale.name('y').from('table.y').nicely.to_height

mark = rect_mark.from(data) do
  enter do
    x_start   { scale(xs).from('x') }
    width     { scale(xs).offset(-1).use_band }
    y_start   { scale(ys).from('y') }
    y_end     { scale(ys).value(0) }
  end
  update do
    fill 'steelblue'
  end
  hover do
    fill 'red'
  end
end

vis = visualization.width(600).height(400) do
  padding top: 10, left: 30, bottom: 30, right: 10
  data data
  scales xs, ys
  marks mark
  axes x_axis.scale(xs), y_axis.scale(ys)
end

puts vis.generate_spec(:pretty)

bar.json

{
  "width": 600,
  "height": 400,
  "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",
      "domain": {
        "data": "table",
        "field": "data.x"
      },
      "range": "width"
    },
    {
      "nice": true,
      "name": "y",
      "type": "linear",
      "domain": {
        "data": "table",
        "field": "data.y"
      },
      "range": "height"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "properties": {
        "enter": {
          "x": {
            "field": "data.x",
            "scale": "x"
          },
          "width": {
            "scale": "x",
            "offset": -1,
            "band": true
          },
          "y": {
            "field": "data.y",
            "scale": "y"
          },
          "y2": {
            "value": 0,
            "scale": "y"
          }
        },
        "update": {
          "fill": {
            "value": "steelblue"
          }
        },
        "hover": {
          "fill": {
            "value": "red"
          }
        }
      }
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "x"
    },
    {
      "type": "y",
      "scale": "y"
    }
  ]
}

bar.rb

require 'plotrb'

data = pdata.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}
    ]
)

xs = ordinal_scale.name('x').from('table.x').to_width
ys = linear_scale.name('y').from('table.y').nicely.to_height

mark = rect_mark.from(data) do
  enter do
    x_start   { scale(xs).from('x') }
    width     { scale(xs).offset(-1).use_band }
    y_start   { scale(ys).from('y') }
    y_end     { scale(ys).value(0) }
  end
  update do
    fill 'steelblue'
  end
  hover do
    fill 'red'
  end
end

vis = visualization.width(600).height(400) do
  padding top: 10, left: 30, bottom: 30, right: 10
  data data
  scales xs, ys
  marks mark
  axes x_axis.scale(xs), y_axis.scale(ys)
end

puts vis.generate_spec(:pretty)

index.html

<html>
  <head>
    <title>Plotrb Example: Bar</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://trifacta.github.com/vega/vega.js"></script>
  </head>
  <body>
    <div id="vis"></div>
  </body>
<script type="text/javascript">
// parse a spec and create a visualization view
function parse(spec) {
  vg.parse.spec(spec, function(chart) { chart({el:"#vis", renderer:'svg'}).update(); });
}
parse("bar.json");
</script>
</html>