{
// 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",
"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"} },
// Change fill color of the object on mouse hover
"hover": {"fill": {"value": "#f00"} }
}
}
]
}