MultiLineChart

{
  "legends": [
    {
      "fill": "color",
      "title": "Legend",
      "offset": 0,
      "properties": {
        "symbols": {
          "fillOpacity": {"value": 0.5},
          "stroke": {"value": "transparent"}
        }
      }
    }
  ],
  "width": 400,
  "height": 200,
  "axes": [
    {"type": "x","scale": "x","grid": true,"title": "rpm"},
    {
      "type": "y",
      "scale": "y",
      "grid": true,
      "title": "torque"
    }
  ],
  "data": [
    {
      "metadata": {
        "names": ["rpm","torque","horsepower","EngineType"],
        "types": ["linear","linear","ordinal","ordinal"]
      },
      "values": [
        {
          "rpm": 0,
          "torque": 10,
          "horsepower": 1,
          "EngineType": "Rotary"
        },
        {
          "rpm": 0,
          "torque": 20,
          "horsepower": 5,
          "EngineType": "Piston"
        },
        {
          "rpm": 2,
          "torque": 12,
          "horsepower": 12,
          "EngineType": "Piston"
        },
        {
          "rpm": 2,
          "torque": 15,
          "horsepower": 15,
          "EngineType": "Rotary"
        }
      ],
      "name": "table"
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "zero": false,
      "domain": {"data": "table","field": "rpm"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "zero": false,
      "domain": {"data": "table","field": "torque"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table","field": "EngineType"},
      "range": "category10"
    }
  ],
  "padding": {"top": 50,"left": 60,"bottom": 40,"right": 150},
  "marks": [
    {
      "type": "group",
      "from": {
        "data": "table",
        "transform": [{"type": "facet","groupby": ["EngineType"]}]
      },
      "marks": [
        {
          "type": "line",
          "properties": {
            "update": {
              "x": {"scale": "x","field": "rpm"},
              "y": {"scale": "y","field": "torque"},
              "stroke": {"scale": "color","field": "EngineType"},
              "strokeWidth": {"value": 2},
              "strokeOpacity": {"value": 1}
            },
            "hover": {"strokeOpacity": {"value": 0.5}}
          }
        }
      ]
    },
    {
      "type": "symbol",
      "from": {"data": "table"},
      "properties": {
        "update": {
          "x": {"scale": "x","field": "rpm"},
          "y": {"scale": "y","field": "torque"},
          "fill": {"scale": "color","field": "EngineType"},
          "size": {"value": 200},
          "fillOpacity": {"value": 1}
        }
      }
    },
    {
      "type": "group",
      "from": {
        "data": "table",
        "transform": [
          {
            "type": "filter",
            "test": "datum.rpm == hover.rpm"
          }
        ]
      },
      "properties": {
        "update": {
          "x": {"scale": "x","signal": "hover.rpm","offset": 0},
          "y": {
            "scale": "y",
            "signal": "hover.torque",
            "offset": -30
          },
          "width": {"value": 120},
          "height": {"value": 35},
          "fill": {"value": "#e5f2ff"}
        }
      },
      "marks": [
        {
          "type": "text",
          "properties": {
            "update": {
              "x": {"value": 6},
              "y": {"value": 14},
              "text": {"template": "X \n (rpm) \t {{hover.rpm}}"},
              "fill": {"value": "black"}
            }
          }
        },
        {
          "type": "text",
          "properties": {
            "update": {
              "x": {"value": 6},
              "y": {"value": 29},
              "text": {
                "template": "Y \t (torque) \t {{hover.torque}}"
              },
              "fill": {"value": "black"}
            }
          }
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "hover",
      "init": {},
      "streams": [
        {"type": "symbol:mouseover","expr": "datum"},
        {"type": "symbol:mouseout","expr": "{}"}
      ]
    }
  ]
}