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": [ {     "type": "rule", "properties": { "enter": { "x": {"value": 0}, "x2": {"value": 200}, "y": {"value": 40}, "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"}} }   }  ] }