| license: mit |
Built with blockbuilder.org
vega is so much fun, but some things just aren't well explained. For instance, how do we use an event stream from something outside of the vega graph? I finally figured it out, and I wanted to share with anyone who cares.
In the update expression of the event object, we have access to event. I use event.currentTarget.innerText as a hopefully understandable minimal example.
forked from timelyportfolio's block: vega font
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://unpkg.com/d3"></script> | |
| <script src="https://unpkg.com/vega/build/vega-core.js"></script> | |
| </head> | |
| <h3>Select a message below to show in the Vega graph</h3> | |
| <div class="label" style="background:#ece; width:30px;">Hi</div> | |
| <div class="label" style="background:#cee; width:30px;">Bye</div> | |
| <div id = "example-row-vega" style = "width: 300px; height: 200px; margin-top:30px;"></div> | |
| <script> | |
| // custom event that will show in our Vega graph | |
| setInterval( | |
| function() {d3.select(window).dispatch("updateclock",{detail:{time: new Date()}})}, | |
| 1000 | |
| ); | |
| var spec = { | |
| "$schema": "https://vega.github.io/schema/vega/v3.0.json", | |
| "description": "A simple bar chart with embedded data.", | |
| "autosize": "pad", | |
| "padding": 5, | |
| "background": "#cec", | |
| "signals": [ | |
| { | |
| "name": "width", | |
| "update": "300" | |
| }, | |
| { | |
| "name": "height", | |
| "update": "200" | |
| }, | |
| { | |
| "name": "textlabel", | |
| "value": "Click on one of messages above.", | |
| "on": [ | |
| { | |
| "events": ".label:click", | |
| "update": "event.currentTarget.innerText", | |
| "force": true | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "xmove", | |
| "value": 12, | |
| "on": [ | |
| { | |
| "events": "mousemove", | |
| "update": "x()", | |
| "force": true | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "clock", | |
| "on": [ | |
| { | |
| "events": "window:updateclock", | |
| "update": "event.detail.time" | |
| } | |
| ] | |
| } | |
| ], | |
| "marks": [ | |
| { | |
| "type": "text", | |
| "encode": { | |
| "enter": { | |
| "x": {"value": 0}, | |
| "y": {"value": 0} | |
| }, | |
| "update": { | |
| "text": {"signal": "textlabel"} | |
| } | |
| } | |
| }, | |
| { | |
| "type": "text", | |
| "encode": { | |
| "enter": { | |
| "x": {"value": 0}, | |
| "y": {"value": 20} | |
| }, | |
| "update": { | |
| "text": {"signal": "xmove"} | |
| } | |
| } | |
| }, | |
| { | |
| "type": "text", | |
| "encode": { | |
| "enter": { | |
| "x": {"value": 0}, | |
| "y": {"value": 40} | |
| }, | |
| "update": { | |
| "text": {"signal": "clock"} | |
| } | |
| } | |
| } | |
| ] | |
| } | |
| var view = new vega.View(vega.parse(spec)) | |
| .renderer('canvas') // set renderer (canvas or svg) | |
| .initialize('#example-row-vega') // initialize view within parent DOM container | |
| .hover() // enable hover encode set processing | |
| .run(); // run the dataflow and render the view | |
| </script> | |
| </html> |