Template:Graph:GraphTest

{

 // 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": "mouseup","expr": "false"}
     ]
   },
   {
     "name": "scaledHandlePosition",
     "streams": [
       {
         "type": "mousemove[isDragging]",
         "expr": "eventX()",
         "scale": {"name": "yearsScale","invert": true}
       }
     ]
   },
   {
     "name": "currentYear",
     "init": 2000,
     "expr": "clamp(parseInt(scaledHandlePosition),1960,2013)"
   }
 ],

 "scales": [
   {
     "name": "yearsScale",
     "type": "linear",
     "zero": false,
     "domain": [1960, 2013],
     "range": "width"
   }
 ],

 "marks": [
   {
     // draw the year label in the upper left corner
     "name": "yearLabel",
     "type": "text",
     "properties": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 25},
         "fontSize": {"value": 32},
         "fontWeight": {"value": "bold"},
         "fill": {"value": "steelblue"}
       },
       "update": {"text": {"signal": "currentYear"} }
     }
   },
   {
     // 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": {
         "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": {
         "x": {"scale": "yearsScale","signal": "currentYear"},
         "fill": {"value": "#fff"}
       },
       // Change fill color of the object on mouse hover
       "hover": {"fill": {"value": "#f00"} }
     }
   }
 ]

}