amitkaps
10/6/2015 - 3:54 AM

Bar_vega.html

Bar_vega.html
content_copyfile_download
<!DOCTYPE html>

<script src="../lib/d3.min.js"></script>
<script src="../lib/vega.min.js"></script>

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

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

parse(
  {
    "width": 250,
    "height": 150,

    "data":[
      {
        "name": "table",
        "values": [
          {"areas": "A", "value": 5},
          {"areas": "B", "value": 25},
          {"areas": "C", "value": 15},
          {"areas": "D", "value": 20},
          {"areas": "E", "value": 10}
        ]
      }
    ],

    "scales": [
      {
        "name": "xscale",
        "type": "linear",
        "range": "width",
        "domain": {"data": "table", "field": "value"},
        "nice": true
      },
      {
        "name": "yscale",
        "type": "ordinal",
        "range": "height",
        "domain": {"data": "table", "field": "areas"}
      }
    ],

    "axes": [],

    "marks": [
      {
        "type": "rect",
        "from": {"data": "table"},
        "properties": {
          "enter": {
            "x": {"scale": "xscale", "value": 0},
            "x2": {"scale": "xscale", "field": "value"},
            "y": {"scale": "yscale", "field": "areas"},
            "height": {"scale": "yscale", "band": true, "offset": -5},
          },
          "update": {
            "fill": {"value": "brown"}
          }
        }
      }
    ]
  }
);
</script>