Extension:Graph/Interactive Graph Tutorial/4

<graph mode="interactive">{

 // 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": "handlePosition",
     "init": 200,
     "streams": [
       {
         "type": "mousemove[isDragging]",
         "expr": "eventX()"
       }
     ]
   },
   {
     "name": "scaledHandlePosition",
     "expr": "handlePosition",
     "scale": {"name": "yearsScale","invert": true}
   }
 ],

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

 "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"} }
     }
   },
   {
     "name": "debugScaledHandlePosition",
     "type": "text",
     "properties": {
       "enter": {
         "x": {"value": 250},
         "y": {"value": 28},
         "fill": {"value": "black"}
       },
       "update": {"text": {"signal": "scaledHandlePosition"} }
     }
   }
 ]

}

</graph>

<graph mode=interactive>

{
  // 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": "handlePosition",
      "init": 200,
      "streams": [
        {
          "type": "mousemove[isDragging]",
          "expr": "eventX()"
        }
      ]
    },
    {
      "name": "scaledHandlePosition",
      "expr": "handlePosition",
      "scale": {"name": "yearsScale","invert": true}
    }
  ],

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

  "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"} }
      }
    },
    {
      "name": "debugScaledHandlePosition",
      "type": "text",
      "properties": {
        "enter": {
          "x": {"value": 250},
          "y": {"value": 28},
          "fill": {"value": "black"}
        },
        "update": {"text": {"signal": "scaledHandlePosition"} }
      }
    }
  ]
}

</graph>