Extension:Graph/Interactive Graph Tutorial

Use Vega Editor for testing.

Drawing Simple Shapes
We start with drawing two elements without any interactivity { // We want to use Vega 2, and specify image size "version": 2, "width": 300, "height": 80, // Set padding to the same value on all sides "padding": 10, // By default the background is transparent "background": "#edf1f7", "marks": [ {     // Draw a horizontal line "type": "rule", "properties": { "enter": { "x": {"value": 0}, "x2": {"value": 200}, "y": {"value": 40}, "stroke": {"value": "#000"}, "strokeWidth": {"value": 2} }     }    },    {      // Draw a triangle shape with a hover effect // naming objects allows us to reference them later "name": "handle", "type": "path", "properties": { "enter": { "x": {"value": 200}, "y": {"value": 40}, // path syntax is the same as SVG's path tag "path": {"value": "m0,-10l0,20l14,-10l-14,-10z"}, "stroke": {"value": "#880"}, "strokeWidth": {"value": 2.5} },       "update": {"fill": {"value": "#fff"}}, // Change fill color of the object on mouse hover "hover": {"fill": {"value": "#f00"}} }   }  ] }