Extension:Graph/Interactive Graph Tutorial

Use Vega Editor for testing.

Drawing Simple Shapes
We start with drawing two basic elements: a rule and a path (same as in SVG) that highlights on mouse hover. {	"width": 300, "height": 80, "apadding": { "top": 10, "left": 10, "right": 10, "bottom": 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" }				}			}		}	] }