faceted time

[Fil]

https://user-images.githubusercontent.com/7001/181717198-cce2a625-4881-416e-96ce-3b9edbd87c7c.mov

[Fil]

Almost working now, but there's a bit of an object constancy problem with transforms:

• ~~sorting creates mix-ups across keyframes; temporary fix by sorting each facet by index—it's not the right call~~
• ~~the outliers part of the dotX mark, because it doesn't have the same cardinality from one keyframe to the other; I'm not sure how to attack this theoretically; maybe some reconciliation algorithm? EDIT: another possibility to explore would be to have a mark opt out of linear interpolation and ask for fade out/fade in instead.~~

[Fil]

to test 61a60cf you can just paste this in the gapminder.js example: Plot.link([[200, 30, 1957], [100000, 100, 2007]], {x1: 200, y1:30, x2: "0", y2:"1", time: "2"}), and watch that link “grow”

https://user-images.githubusercontent.com/7001/182350923-b68d49d3-7a53-4edc-9f9f-eb359a74a81e.mov

[Fil]

Fixed the box plot by adding an animate="fade" option (defaults to "interpolate")

https://user-images.githubusercontent.com/7001/182566164-ed26a1c9-b59a-492f-bb87-bf87de9700bd.mov

[Fil]

If you're following along, test plots are:

• http://localhost:8008/?test=drivingAnimation
• http://localhost:8008/?test=gapminder and 4 variants
• http://localhost:8008/?test=barChartRace

[Fil]

A half-related suggestion would allow these updates to be nicer on the DOM https://github.com/observablehq/plot/issues/1022

Not part of this PR, because it's a bit orthogonal (although we don't need it unless we want to animate a mark).

[mbostock]

Fil, you might want to start developing additional functionality (e.g., timing parameters and programmatic control) in a separate PR so that we can focus on reviewing the core code here. Keeping the core PR smaller could make it easier to review. But we’ll chat today and see how it goes.

[Fil]

CI doesn't work since this is not targeting main; we'll see later.