Extension:Graph/Interactive Graph Tutorial/2

<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"}
     ]
   },
 ],

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

}

</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"}
      ]
    },
  ],

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

</graph>