var currentSet = 0;
var datasets = [
  [
    {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4},
    {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6},
    {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7}
  ],
  [
    {"a": "C", "b": 12}, {"a": "C", "b": 1}, {"a": "C", "b": 3},
    {"a": "D", "b": 11}, {"a": "D", "b": 4}, {"a": "D", "b": 3},
    {"a": "E", "b": 1}, {"a": "E", "b": 1}, {"a": "E", "b": 3}
  ]
];

var spec = {
    "data": {
      "name": "table",
      "values": []
    },
    "mark": "bar",
  	"selection": {
      "brush": {"type": "interval", "encodings": ["y"]}
    },
    "encoding": {
      "x": {"field": "a", "type": "nominal"},
      "y": {
        "aggregate": "average", "field": "b", "type": "quantitative",
        "axis": {
          "title": "Average of b"
        }
      }
    },
  	"config": {
      "axis": {
        "labelFont": "serif",
        "labelFontSize": 16,
        "tickWidth": 3,
        "tickColor": "red",
      }
    }
  };

var opt = {
  "mode": "vega-lite",
  "actions": true,
  "renderer": "svg"
};

var view;
createChart("bar");


function changeData() {
  if(currentSet === 0) currentSet = 1;
  else currentSet = 0;
  
  view.change("table",vega.changeset().remove(function(d) {return true;}).insert(datasets[currentSet])).run();
}

function createChart(type) {
  spec.mark = type;
  spec.data.values = datasets[currentSet];
  vega.embed("#vis", spec, opt, function(error, result) {
    console.log(result);
    view = result.view;
  });
}