amitkaps
10/6/2015 - 3:34 AM

Bar_vegalite.html

<!DOCTYPE html>

<script src="../lib/d3.min.js"></script>
<script src="../lib/vega1.5.js"></script>
<script src="../lib/vega-lite.js"></script>

<div id="chart"></div>

<script type="text/javascript">

function parse(spec) {
  vg.parse.spec(spec, function(chart) {
    chart({el:"#chart"}).update(); });
}

var vlspec = {
  "data":{
    "values": [
      {"areas": "A", "value": 5},
      {"areas": "B", "value": 25},
      {"areas": "C", "value": 15},
      {"areas": "D", "value": 20},
      {"areas": "E", "value": 10}
    ]
  },
  "marktype": "bar",
  "encoding": {
    "x": {"type": "Q","name": "value"},
    "y": {"type": "O","name": "areas"}
  },
}

var vgspec = vl.compile(vlspec);
parse(vgspec);

</script>