Animation in Vega/Lite

Question

I tried to implement an animation similar to the one showed in https://vimeo.com/177767802 (min 2:30)

My code is the following:

{
  "data": {
    "values": [
      {"A": 2,"B": 3,"C": 4,"D": "a"},
      {"A": 1,"B": 2,"C": 1,"D": "a"},
      {"A": 4,"B": 5,"C": 15,"D": "b"},
      {"A": 9,"B": 10,"C": 80,"D": "b"}
    ]
  },
  "mark": "circle",
  "select": {"id": {"type": "point","on": "mauseover"}},
  "encoding": {
    "x": {"field": "A","type": "quantitative"},
    "y": {"field": "B","type": "quantitative"},
    "color": [
      {"if": "id","field": "D","type": "nominal"},
      {"value": "grey"}
    ],
    "size": {"value": 100}
  },
  "config": {"mark": {"fillOpacity": 0.5}}
}

Essentially it is the same code as in the video, with the only difference that I used a smaller data set which (I took from H. Wickham.)

I tried to render the plot using the Vega-Lite editor (https://vega.github.io/vega-editor/?mode=vega-lite&renderer=svg). The resulting scatterplot is correct, the circles are grey (as they should be), but it does not display any animation and the legend is broken.

My question is whether there is something wrong with the code, something that I overlooked. In case the code is right, but the problem is that I used Vega-Lite 1.0 instead of Vega-Lite 2.0 is there a way to use a Vega-Lite 2.0 (fully understanding the risks of using an alfa version code) in the Vega-Lite editor?

dominik dominik · Accepted Answer · 2017-07-31T04:53:52

You can try Vega 3 and Vega-Lite 2 with selections at https://vega.github.io/editor. We will keep updating the deployed versions.

Animation in Vega/Lite

3 Answers