vega signal from outside by timelyportfolio

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

index.html

<!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>