README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    Capture events from input elements outside the visualization.
Similar to what is done at min 3:19 in the Reactive Vega video


## index.html
<html>
  <head>
    <title>Vega Experiment: interaction from events external to the viz</title>
    <script src="http://vega.github.io/vega-editor/vendor/d3.min.js"></script>
    <script src="http://vega.github.io/vega/vega.min.js"></script>
  </head>
  <body>
    <div id="vis"></div>
    <p>
      <form>
        <b>Color:</b>
        <input type="radio" name="color" value="red" checked="checked">Red
        <input type="radio" name="color" value="green">Green
        <input type="radio" name="color" value="blue">Blue
      </form>
    </p>
  </body>
<script type="text/javascript">
// parse a spec and create a visualization view
function parse(spec) {
  vg.parse.spec(spec, function(chart) { chart({el:"#vis"}).update(); });
}
parse("spec.json");
</script>
</html>

## spec.json
{
  "width": 200,
  "height": 200,
  "background": "#edf1f7",

  "signals": [
    {
      "name": "selectcolor",
      "init": {"value": "yellow"},
      "streams": [
        {"type": "input[name=color]:click", "expr": "{'value': event.target.value}"}
      ]
    }

  ],

  "marks": [
    {
      "type": "rect",
      "properties": {
        "enter": {
          "x": {"value": 50},
          "y": {"value": 50},
          "width": {"value": 30},
          "height": {"value": 30},
          "fill": {"signal": "selectcolor.value"}
        },
        "update": {
          "fill": {"signal": "selectcolor.value"}
        }
      }
    }
  ]
}

## thumbnail.png

      
          Raw
        
        
              thumbnail.png