Extension:Graph/Interactive Graph Tutorial

Use Vega Editor for testing.

Drawing Simple Shapes
We start with drawing two elements without any interactivity. Use "edit source" to copy the graph spec without comments to the Vega Editor. { "version": 2, "width": 300, "height": 80, "padding": 10, "background": "#edf1f7", "marks": [ {     "name": "scrollLine", "type": "rule", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 40}, "x2": {"value": 300}, "stroke": {"value": "#000"}, "strokeWidth": {"value": 2} }     }    },    {      "name": "handle", "type": "path", "properties": { "enter": { "x": {"value": 200}, "y": {"value": 40}, "path": {"value": "m0,-10l0,20l14,-10l-14,-10z"}, "stroke": {"value": "#880"}, "strokeWidth": {"value": 2.5} },       "update": {"fill": {"value": "#fff"}}, "hover": {"fill": {"value": "#f00"}} }   }  ] }

Simple signal
To make our handle object dragable, we first need to figure out if it was clicked or not. For that, lets add a signal that becomes true when an object is clicked (isDragging), and a text mark to show us the result:

{ "version": 2, "width": 300, "height": 80, "padding": 10, "background": "#edf1f7", "signals": [ {     "name": "isDragging", "init": false, "streams": [ {"type": "@handle:mousedown","expr": "true"}, {"type": "mouseup","expr": "false"} ]   }  ],  "marks": [ {     "name": "scrollLine", "type": "rule", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 40}, "x2": {"value": 300}, "stroke": {"value": "#000"}, "strokeWidth": {"value": 2} }     }    },    {      "name": "handle", "type": "path", "properties": { "enter": { "x": {"value": 200}, "y": {"value": 40}, "path": {"value": "m0,-10l0,20l14,-10l-14,-10z"}, "stroke": {"value": "#880"}, "strokeWidth": {"value": 2.5} },       "update": {"fill": {"value": "#fff"}}, "hover": {"fill": {"value": "#f00"}} }   },    {      "name": "statusDragging", "type": "text", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 0}, "fill": {"value": "black"} },       "update": {"text": {"signal": "isDragging"}} }   }  ] }

Dragging signal
To make our handle object dragable, we first need to figure out if it was clicked or not. For that, lets add a signal that becomes true when an object is clicked, and a text mark to show us the result:

{ "version": 2, "width": 300, "height": 80, "padding": 10, "background": "#edf1f7", "signals": [ {     "name": "isDragging", "init": false, "streams": [ {"type": "@handle:mousedown","expr": "true"}, {"type": "mouseup","expr": "false"} ]   },    {      "name": "draggingPos", "init": 200, "streams": [ {         "type": "mousemove[isDragging]", "expr": "eventX", "scale": {"name": "x","invert": true} }     ]    }  ],  "marks": [ {     "name": "scrollLine", "type": "rule", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 40}, "x2": {"value": 300}, "stroke": {"value": "#000"}, "strokeWidth": {"value": 2} }     }    },    {      "name": "handle", "type": "path", "properties": { "enter": { "y": {"value": 40}, "path": {"value": "m0,-10l0,20l14,-10l-14,-10z"}, "stroke": {"value": "#880"}, "strokeWidth": {"value": 2.5} },       "update": { "fill": {"value": "#fff"}, "x": {"signal": "draggingPos"} },       "hover": {"fill": {"value": "#f00"}} }   },    {      "name": "statusDragging", "type": "text", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 0}, "fill": {"value": "black"} },       "update": {"text": {"signal": "isDragging"}} }   },    {      "name": "statusPositionX", "type": "text", "properties": { "enter": { "x": {"value": 30}, "y": {"value": 0}, "fill": {"value": "black"} },       "update": {"text": {"signal": "draggingPos"}} }   }  ] }