Learning Vega 2.0: events and marks
Capture mousemove and print mouse coordinates.
| <html> | |
| <head> | |
| <title>Vega Experiment: Follow the mouse and print its coordinates</title> | |
| <script src="http://vega.github.io/vega-editor/vendor/d3.min.js"></script> | |
| <script src="http://vega.github.io/vega-editor/vendor/vega.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| </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> |
| { | |
| "width": 200, | |
| "height": 200, | |
| "background": "#edf1f7", | |
| "signals": [ | |
| {"name": "w", "init": 200}, | |
| {"name": "h", "init": 200}, | |
| { | |
| "name": "position", | |
| "init": {"x": 0, "y": 0}, | |
| "streams": [{ | |
| "type": "mousemove", | |
| "expr": "{x: eventX(), y: eventY()}" | |
| }] | |
| } | |
| ], | |
| "marks": [ | |
| { | |
| "name": "marker", | |
| "type": "symbol", | |
| "properties": { | |
| "enter": { | |
| "x": {"value": 0}, | |
| "y": {"value": 0}, | |
| "fill": {"value": "grey"}, | |
| "fillOpacity": {"value": 0.5}, | |
| "shape": {"value":"cross"}, | |
| "size": {"value": 100}, | |
| "stroke": {"value": "#000"}, | |
| "strokeWidth": {"value": 0.5} | |
| }, | |
| "update": { | |
| "x": {"signal": "position.x"}, | |
| "y": {"signal": "position.y"} | |
| } | |
| } | |
| }, | |
| { | |
| "name": "coordinates", | |
| "type": "text", | |
| "properties": { | |
| "enter": { | |
| "fill": {"value": "#333"} | |
| }, | |
| "update": { | |
| "text": {"template": "({{position.x}}, {{position.y}})"}, | |
| "x": {"signal": "position.x", "offset": 5}, | |
| "y": {"signal": "position.y", "offset": -5} | |
| } | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment