bmatcuk/test.html

## test.html
<!doctype html>
<html>
  <head>
    <script src="https://vega.github.io/vega/vega.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <a href="#" id="run">Click here only show "C"</a> / <a href="#" id="reset">Reset</a>

    <script type="text/javascript">
      var data = [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
      ];

      var spec = {
        "$schema": "https://vega.github.io/schema/vega/v5.json",
        "autosize": { type: "fit", contains: "padding", resize: true },
        "width": 400,
        "height": 200,
        "padding": 5,

        "data": [
          {
            "name": "table",
            "values": data,
          }
        ],

        "scales": [
          {
            "name": "xscale",
            "type": "band",
            "domain": {"data": "table", "field": "category" },
            "range": "width",
            "padding": 0.05,
            "round": true
          },
          {
            "name": "yscale",
            "domain": {"data": "table", "field": "amount"},
            "nice": true,
            "range": "height"
          }
        ],

        "axes": [
          { "orient": "bottom", "scale": "xscale" },
          { "orient": "left", "scale": "yscale" }
        ],

        "marks": [
          {
            "type": "rect",
            "from": {"data":"table"},
            "encode": {
              "enter": {
                "x": {"scale": "xscale", "field": "category"},
                "width": {"scale": "xscale", "band": 1},
                "y": {"scale": "yscale", "field": "amount"},
                "y2": {"scale": "yscale", "value": 0}
              },
              "update": {
                "fill": {"value": "steelblue"}
              },
              "hover": {
                "fill": {"value": "red"}
              }
            }
          },
        ]
      };

      var view = new vega.View(vega.parse(spec), {
        renderer: 'svg',
        container: '#container'
      });
      view.runAsync();

      document.getElementById("run").addEventListener("click", function(e) {
        e.preventDefault();

        view.data("table", [
          {"category": "C", "amount": 43}
        ]);
        view.runAsync();
      });

      document.getElementById("reset").addEventListener("click", function(e) {
        e.preventDefault();

        view.data("table", data);
        view.runAsync();
      })
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<script src="https://vega.github.io/vega/vega.min.js"></script>
	</head>
	<body>
	<div id="container"></div>
	<a href="#" id="run">Click here only show "C"</a> / <a href="#" id="reset">Reset</a>

	<script type="text/javascript">
	var data = [
	{"category": "A", "amount": 28},
	{"category": "B", "amount": 55},
	{"category": "C", "amount": 43},
	{"category": "D", "amount": 91},
	{"category": "E", "amount": 81},
	{"category": "F", "amount": 53},
	{"category": "G", "amount": 19},
	{"category": "H", "amount": 87}
	];

	var spec = {
	"$schema": "https://vega.github.io/schema/vega/v5.json",
	"autosize": { type: "fit", contains: "padding", resize: true },
	"width": 400,
	"height": 200,
	"padding": 5,

	"data": [
	{
	"name": "table",
	"values": data,
	}
	],

	"scales": [
	{
	"name": "xscale",
	"type": "band",
	"domain": {"data": "table", "field": "category" },
	"range": "width",
	"padding": 0.05,
	"round": true
	},
	{
	"name": "yscale",
	"domain": {"data": "table", "field": "amount"},
	"nice": true,
	"range": "height"
	}
	],

	"axes": [
	{ "orient": "bottom", "scale": "xscale" },
	{ "orient": "left", "scale": "yscale" }
	],

	"marks": [
	{
	"type": "rect",
	"from": {"data":"table"},
	"encode": {
	"enter": {
	"x": {"scale": "xscale", "field": "category"},
	"width": {"scale": "xscale", "band": 1},
	"y": {"scale": "yscale", "field": "amount"},
	"y2": {"scale": "yscale", "value": 0}
	},
	"update": {
	"fill": {"value": "steelblue"}
	},
	"hover": {
	"fill": {"value": "red"}
	}
	}
	},
	]
	};

	var view = new vega.View(vega.parse(spec), {
	renderer: 'svg',
	container: '#container'
	});
	view.runAsync();

	document.getElementById("run").addEventListener("click", function(e) {
	e.preventDefault();

	view.data("table", [
	{"category": "C", "amount": 43}
	]);
	view.runAsync();
	});

	document.getElementById("reset").addEventListener("click", function(e) {
	e.preventDefault();

	view.data("table", data);
	view.runAsync();
	})
	</script>
	</body>
	</html>