Trying to get reference marks on mouseover in Vega-Lite - "Not in Spec Error"

Question

So I'm trying to do a data visualization project with react and vega-lite. I'm using the wrapper https://github.com/kristw/react-vega-lite but that's not the part that's giving me problems (it appears to be simply a wrapper without any widdling down of Vega-Lite).

What I CAN do is import data into a spreadsheet and make a line chart from some API call (in this case an api call to some stock market data).

What I CAN'T do is make an overlay of rules on mouseover. I simply want to make the chart show lines from a given point to the x axis and a line from the given point to y axis, based on mouseover along points x. The error that I get with the following code is "Error: Invalid Spec" and then it references the entire object. Unhelpful, but it must mean that something I'm defining is wrong. I'm currently using the Vega-Lite v2.

I've been trying to use this white paper (https://idl.cs.washington.edu/files/2017-VegaLite-InfoVis.pdf) as a guide. On page 8 They have this example.

As you can see it looks pretty simple and they have a single vertical line from the data to the x-axis. I want the same thing, minus the rebalancing of the graphs, and plus a horizontal line to y-axis.

Here is my code. I call it from my react file by simple saying <Mygraph data={datatable} />. I have not included that portion, because, again, I've tested that that works. If anyone sees anything wrong please let me know.

import React, { PropTypes } from 'react';
import VegaLite, {createClassFromLiteSpec} from 'react-vega-lite';



export default createClassFromLiteSpec('LineChartLite', {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 1000,
  "height": 400,
  "padding": 10,
  "description": "Stock price close over time.",
  "layers": [{
    "selection": {
       "indexPtx": {
         "type": "point", "on": "mousemove",
         "project": {"field": ["data"]},
         "nearest": true
       },
       "indexPtx": {
         "type": "point", "on": "mousemove",
         "project": {"field": ["closing price"]},
         "nearest": true
       }
    },
    "mark": "line",
    "encoding": {
      "x": {"field": "date", "type": "temporal",
            "axis":{
              "tickCount": 20
            }
          },
      "y": {"field": "closing price", "type": "quantitative",
            "scale":{
              "zero": false
            },
          },
    },
  }, {
    "mark":"rule",
    "encoding": {
      "x": {"selection": "indexPtx.x", "type": "temporal"},
      "color": {"value": "red"}
    },
    "mark":"rule",
    "encoding": {
      "y": {"selection": "indexPty.y", "type": "temporal"},
      "color": {"value": "red"}
    }
  }]
});

EDIT: I've slightly modified the code to get rid of some silly errors, but I am still getting "Invalid Spec".

EDIT EDIT: Following some searching on their website I found that https://vega.github.io/vega-lite/docs/selection-nearest.html had almost exactly what I needed (example at the bottom). Unfortunately, I copy the example almost exactly and I'm still getting the error "invalid spec".

Here is the code I am now using:

import React, { PropTypes } from 'react';
import VegaLite, {createClassFromLiteSpec} from 'react-vega-lite';



export default createClassFromLiteSpec('LineChartLite', {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 1000,
  "height": 400,
  "padding": 10,
  "description": "Stock price close over time.",
  "layers": [
    {
      "selection": {
        "index": {
          "type": "single", "on": "mousemove",
          "encodings": ["x"],
          "nearest": true
        }
      },
    },
    {
      "transform": [
        {"filter": {
          "and": ["index.date", {"selection": "index"}]
        }}
      ],
      "mark": "rule",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal",
              "axis":{
                "tickCount": 20
              }
            },
        "y": {"field": "closing price", "type": "quantitative",
              "scale":{
                "zero": false
              },
            },
      },
    }
  ]
});

Answer 1

Indexed chart works in our research prototype, but we have not implement it in production codebase yet. Here is the issue on GitHub https://github.com/vega/vega-lite/issues/2765.