Implement animation

[herbertblb]

make sketches for ways to animate the footprints and include missing migrants

[herbertblb]

see also #7

[herbertblb]

see our drafts on Miro

[erictapen]

We want to separate relative data and absolute data/missing migrants by using an animation that adds the latter to the graphic after some time.

Before the animation:

Country title, bar chart, categories are visible. After a short amount of time (~3s) and if there are no open tooltips, the animation starts.

At the start of the animation

The categories might blend out, to not overload the situation. To be decided.

During the animation

The footprints wander in from the right side. How exactly the footprints are animated is not clear yet, but we want them to

• move as a whole pair of footsteps, so the individual foots stay together as one recognizable icon.
• don't have a vanishing "tail" of footsteps, so for one entitiy there is never more than one pair of footprints visible. This is primairly due to performance reasons.
• have an erratic and independent movement, so there is no emphasis on some kind of coordinated appeareance. Still it might be necessary to have them arrive column by column from left to right, to make intersection between footsteps less likely. We want to avoid some kind of choir appeareance, where one group after the other appears on the "stage".
• move in discrete steps, so they don't "drive" continously through the picture like a swarm of bees.

One special pair of footprints attracts attention by e.g. moving different than the others. The special pair is replaced by an infobox about missing migrants (see #7). The infobox appears in the blank space between the graphics during the movement of the others. Maybe it can then be closed by hand?

The persons/500k sentence blends in. If the categories were blended out, they blend back in.

[erictapen]

We want to play the animation (after the waiting time) on any change of input, which means COO, COA1/2 and year.

[herbertblb]

Ist noch weitere Arbeit an der animation der Fußstapfen geplant? Auf KAthi und Séra wirkt es wie große Vogelschwärme, die reinfliegen, ein Eindruck, den wir ja nicht unbedingt erwecken wollen

[herbertblb]

und wie sieht es aus mit den Missing migrants? müssen wir darauf verzichten aus Zeitgründen?

[erictapen]

Ne, weder noch. Der aktuelle Stand ist nach wie vor work in progress. Ich versuche morgen vormittag das so umzusetzen wie in https://github.com/erictapen/mapping-migration/issues/36#issuecomment-1027029452 beschrieben.

[erictapen]

I finally got to implement the animation as described in https://github.com/erictapen/mapping-migration/issues/36#issuecomment-1027029452.

It took a lot of glue code to achieve this and I'm still not really satisfied with the implementation. It has quite a few shortcomings:

• The individual footprints can't react to each other (which would proabably be difficult anyway due to performance reasons)
• Their movement is completely independent from their target position, even though it might look like that from first glance. This is actually the result of a hack where I accessed the order in which they are rendered to offset the end of the animation sequence.

Still there are some knobs to turn: For every movement of a footstep it carries a state of (direction, length, dt), where

• direction is the direction in which they move
• length is the distance they travel during the step
• dt is the time in milliseconds that is spent during the step

These three variables have a fixed starting value and are adapted during each step by adding a random number. By adapting the starting value and the characteristics of the random numbers it's possible to easily adapt the animation.

[erictapen]

Snaaap, completely forgot about missing migrants! Will implement that first thing tomorrow today!

[erictapen]

Implemented the missing migrants footprint in de3e84f98ad16902921807c588e64a5a5194b804.

It got even more of a hack than the animation logic.

Currently the behaviour is like this: The MM animation is shown at the very first display of animation, not after that. The footprint wanders to a predefined position with a predefined movement. If the user clicks on the info button, it opens the box. If the user clicks on the button again, the box vanishes irrevocably.

Edit: For the colors I oriented myself on their site. I think the color is important for visual distingtion, maybe we should even color the "i" icon? The color gradient is defined here: https://github.com/erictapen/mapping-migration/blob/55de79dadf1d54795a6096c6643828dfea332c11/src/Main.elm#L1382