You do get some interaction for free with vega, including tooltips, effects on hover, etc.

To add a simple tooltip, just add that pragma to the marks, for example:

...
"marks": [
  {
    "type": "symbol",
    "from": {"data":"cars"},
    "encode": {
      "enter": {
        "x": {"scale": "xscale", "field": "Acceleration"},
        "y": {"scale": "yscale", "field": "Miles_per_Gallon"},
        "tooltip": {"field": "Name"}
      }
    }
  }
]
...

This will show the name of the car when you hover over a point.

Exercise - Implement this.

You can change the visual encoding of a mark when hovering over it, using code like this:

...
"marks": [
  {
    "type": "symbol",
    "from": {"data":"cars"},
    "encode": {
      "enter": {
        "x": {"scale": "xscale", "field": "Acceleration"},
        "y": {"scale": "yscale", "field": "Miles_per_Gallon"},
        "tooltip": {"field": "Name"}
      },
      "update": {
        "fill": {"value": "steelblue"},
        "fillOpacity": {"value": 0.3},
        "size": {"value": 100}
      },
      "hover": {
        "fill": {"value": "red"},
        "fillOpacity": {"value": 1},
        "size": {"value": 500}
      }
    }
  }
]
...

The result (hover over the datapoints):

Exercise - What happens if we don’t add the update section? Why?