CODEWITHSUNDEEP
vegavega-lite
Massimo Paolucci
Massimo Paolucci

Reputation: 101

Animation in Vega/Lite

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?

Upvotes: 2

Views: 3454

Answers (4)

Michael Langbein
Michael Langbein

Reputation: 23

Just for completeness sake, here's how that could would look with the current version of vega-lite (5.18):

{
  "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",
  "params": [{"name": "id", "select": {"type": "point","on": "pointerover"}}],
  "encoding": {
    "x": {"field": "A","type": "quantitative"},
    "y": {"field": "B","type": "quantitative"},
    "color": {"value": "gray", "condition": {"param": "id"}},
    "size": {"value": 100}
  },
  "config": {"mark": {"fillOpacity": 0.5}}
}

I'm not quite sure about your code, but one thing that I noticed was mauseover - this should be mouseover, I think, and the current version of vega-lite uses pointerover.

Upvotes: 0

hk7math
hk7math

Reputation: 297

It's now 2021, one may also check out Gemini which aims to extend the grammar of data viz to some simple animations of single-view Vega/Vega-Lite charts

Upvotes: 4

dominik
dominik

Reputation: 5935

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

Upvotes: 2

jakevdp
jakevdp

Reputation: 86463

Vega-lite does not currently support selection, though it will in the upcoming 2.0 release. This video is a preview of interactive functionality that will be available later this year.

Upvotes: 1

Related Questions