Skip to content

Instantly share code, notes, and snippets.

@bmatcuk

bmatcuk/test.html

Created October 2, 2019 17:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bmatcuk/f1e9069c8e8c84520fb36d25005ad5ee to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bmatcuk/f1e9069c8e8c84520fb36d25005ad5ee to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bmatcuk created this gist Oct 2, 2019.
    103 changes: 103 additions & 0 deletions test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    <!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>