| license: mit |
You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!
forked from domoritz's block: Vega-Lite block example
forked from sniperliu's block: Vega-Lite update example
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.34/vega.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.4/vega-lite.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.18/vega-embed.js"></script> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| .vega-actions a { | |
| padding: 0.2em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <script> | |
| // const spec = "stackarea.vega.v3.json"; | |
| // const spec = "stackarea.v2.json"; | |
| const spec = "stackarea.work.v3.json"; | |
| var values = | |
| [{"bounds": [1493382600000,1493383499999], "value":8574741,"start":"2017-04-28T20:30:00", "categories": "ABC"}, | |
| {"bounds": [1493382600000,1493383499999], "value":7574741,"start":"2017-04-28T20:45:00", "categories": "ABC"}, | |
| {"bounds": [1493382600000,1493383499999], "value":8074741,"start":"2017-04-28T21:00:00", "categories": "ABC"}]; | |
| var count = 0; | |
| function cb (error, res) { | |
| window.setInterval(function () { | |
| if (count < 3) { | |
| console.log("count " + count) | |
| var changeSet = vega.changeset().insert(values[count++]); | |
| res.view.change('table', changeSet).run(); | |
| } | |
| }, 1000); | |
| } | |
| vega.embed('#vis', spec, | |
| {"mode": "vega-lite"}, | |
| cb); | |
| </script> | |
| </body> |
| { | |
| "$schema": "https://vega.github.io/schema/vega/v3.0.json", | |
| "width": 500, | |
| "height": 200, | |
| "padding": 5, | |
| "data": [ | |
| { | |
| "name": "table", | |
| "values": [ | |
| {"u": 1, "v": 28}, {"u": 2, "v": 55}, | |
| {"u": 3, "v": 43}, {"u": 4, "v": 91}, | |
| {"u": 5, "v": 81}, {"u": 6, "v": 53}, | |
| {"u": 7, "v": 19}, {"u": 8, "v": 87}, | |
| {"u": 9, "v": 52}, {"u": 10, "v": 48}, | |
| {"u": 11, "v": 24}, {"u": 12, "v": 49}, | |
| {"u": 13, "v": 87}, {"u": 14, "v": 66}, | |
| {"u": 15, "v": 17}, {"u": 16, "v": 27}, | |
| {"u": 17, "v": 68}, {"u": 18, "v": 16}, | |
| {"u": 19, "v": 49}, {"u": 20, "v": 15} | |
| ] | |
| } | |
| ], | |
| "scales": [ | |
| { | |
| "name": "xscale", | |
| "type": "linear", | |
| "range": "width", | |
| "zero": false, | |
| "domain": {"data": "table", "field": "u"} | |
| }, | |
| { | |
| "name": "yscale", | |
| "type": "linear", | |
| "range": "height", | |
| "nice": true, | |
| "zero": true, | |
| "domain": {"data": "table", "field": "v"} | |
| } | |
| ], | |
| "axes": [ | |
| {"orient": "bottom", "scale": "xscale", "tickCount": 20}, | |
| {"orient": "left", "scale": "yscale"} | |
| ], | |
| "marks": [ | |
| { | |
| "type": "area", | |
| "from": {"data": "table"}, | |
| "encode": { | |
| "enter": { | |
| "x": {"scale": "xscale", "field": "u"}, | |
| "y": {"scale": "yscale", "field": "v"}, | |
| "y2": {"scale": "yscale", "value": 0}, | |
| "fill": {"value": "steelblue"} | |
| }, | |
| "update": { | |
| "fillOpacity": {"value": 1} | |
| }, | |
| "hover": { | |
| "fillOpacity": {"value": 0.5} | |
| } | |
| } | |
| } | |
| ] | |
| } |