feat: frame animations with time encoding and timer param

[jonathanzong]

This change implements basic features of Animated Vega-Lite. With this change, users can create frame animations using a time encoding, a timer point selection, and a filter transform.

This change does not include more complex features e.g.: interpolation, custom predicates, rescale, interactive sliders, or data-driven pausing.

• Adds a time encoding channel
• Adds isTimerSelection function to check if a selection is an animation selections
• Builds _curr animation dataset for timer selections to store the current animation frame
• Adds animation signals to track the elapsed time (anim_clock), current animation value (anim_value), current position in the animation field's domain (t_index), etc.
• When time encoding is present, updates associated marks' from.data to use the animation dataset (current frame).

Relevant issue: #4060

Coauthor: @joshpoll

Example specs

Hop example:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/seattle-weather.csv"
  },
  "mark": "tick",
  "config": {
    "tick": {
      "thickness": 3
    }
  },
  "params": [
    {
      "name": "date",
      "select": {
        "type": "point",
        "fields": [
          "date"
        ],
        "on": "timer"
      }
    }
  ],
  "transform": [
    {
      "filter": {
        "param": "date"
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "precipitation",
      "type": "quantitative"
    },
    "time": {
      "field": "date"
    }
  }
}

Gapminder:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/gapminder.json"
  },
  "mark": "point",
  "params": [
    {
      "name": "avl",
      "select": {
        "type": "point",
        "fields": [
          "year"
        ],
        "on": "timer"
      }
    }
  ],
  "transform": [
    {
      "filter": {
        "param": "avl"
      }
    }
  ],
  "encoding": {
    "color": {
      "field": "country"
    },
    "x": {
      "field": "fertility",
      "type": "quantitative"
    },
    "y": {
      "field": "life_expect",
      "type": "quantitative"
    },
    "time": {
      "field": "year"
    }
  }
}

[jonathanzong]

@domoritz @arvind this is ready for review. we were thinking hold off on docs and examples until a later PR, but let us know if you'd rather us include it here

[domoritz]

Thanks. Can we see whether you can run the formatting action as well so we know the formatting doesn't break.

[jonathanzong]

i was able to run yarn format with no problems, we've been using the eslint config

[domoritz]

Great. I was hoping we could get the GitHub action for checking formatting to work somehow.

[joshpoll]

I think it's running in the Runtime, Linting, and Coverage test.

[arvind]

Sorry for the delay, y'all! A great start. I've left line-level comments throughout and will do a more holistic review next. In the meantime, some higher-level thoughts:

• Thanks for including example specs in your PR OP. Could you include them as json specs under examples as well please? That'll slurp them into our CI process (and, I think?, make them easier to expose in the documentation)
• It might behoove us to also include some runtime tests since they've saved our (namely, my) behind a number of times when the compile-time specs appeared to be correctly constructed? (I'm happy to walk through the runtime test infrastructure post-CHI since it's a little complicated).

[jonathanzong]

first round of comments has been addressed. pending todos:

• question here feat: frame animations with time encoding and timer param #8921 (comment)
• find some time to talk about how runtime testing works

[mattijn]

c72cb7d was an attempt to trigger the deployment preview of #9294..

[mattijn]

Hi @jonathanzong and @joshpoll!👋 Would you mind updating this PR so the latest changes from the main repository are also included in this branch?

Im not brave enough to do it myself🙈, but I'm sensing that this is the reason why the new deployment preview is not yet triggering.

[mattijn]

Just thinking about making a map with the trajectory of the upcoming eclipse🥳

[joelostblom]

Just thinking about making a map with the trajectory of the upcoming eclipse🥳

Such a cool idea! Please share if you create it, I would love to see an animated VL chart for this.

Btw, @jonathanzong are you waiting for a review on this branch or are you planning to add more commits (I saw you were still adding more since you last requested a review).

[joshpoll]

I rebased

[jonathanzong]

We are indeed just waiting for a review

[arvind]

Yes, apologies, it's been on my docket for a while but I've been underwater with various other deadlines. My plan is to wrap this up this month 🤞

[jonathanzong]

i have rebased, fixed checks, and verified that the animation works as expected in local editor

edit: i'm going to wait to fix the codecov until after we get a review because otherwise we'll just have to do it again

[arvind]

Minor point but it'd be great to name this in a more semantically-meaningful way vs (what I assume) is an abbreviation of "Animated Vega-Lite".

[jonathanzong]

0c7df9a

[jonathanzong]

i have added an error explaining that facet, layer, and concat animations are unsupported when a user tries to create them (and unit tests for this error).

how serious are we about codecov? if you look at what's left, it's codecov asking for:

• unit test for consts that i added
• unit tests for one-line util functions for the runtime tests
• one-line cleanup changes i made to existing logs that previously apparently also did not have coverage

can we just bypass this?

[arvind]

🎉🎉🎉

I think we're good to go here. And I agree, fine to bypass the codecov—it seems to be failing on exceedingly minor things.