User:Wugapodes/sandbox7

{ // 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": 12, // By default the background is transparent "background": "#edf1f7",

"signals": [ {     "name": "isDragging", "init": false, "streams": [ {"type": "@handle:mousedown","expr": "true"}, {"type": "touchstart","expr": "true"}, {"type": "touchend","expr": "false"}, {"type": "mouseup","expr": "false"} ]   },    {      "name": "handlePosition", "init": 200, "streams": [ {         "type": "mousemove[isDragging]", "expr": "eventX" },       {          "type": "touchmove[isDragging]", "expr": "eventX" }     ]    }  ],

"marks": [ {     // Draw a horizontal line "name": "scrollLine", "type": "rule", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 40}, "x2": {"value": 300}, "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": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"}, "stroke": {"value": "#880"}, "strokeWidth": {"value": 2.5} },       "update": { "fill": {"value": "#fff"}, "x": {"signal": "handlePosition"} },       // Change fill color of the object on mouse hover "hover": {"fill": {"value": "#f00"} } }   },    {      "name": "debugIsDragging", "type": "text", "properties": { "enter": { "x": {"value": 250}, "y": {"value": 0}, "fill": {"value": "black"} },       "update": {"text": {"signal": "isDragging"} } }   },    {      "name": "debugHandlePosition", "type": "text", "properties": { "enter": { "x": {"value": 250}, "y": {"value": 14}, "fill": {"value": "black"} },       "update": {"text": {"signal": "handlePosition"} } }   }  ] }