primers

Learn D3: Shapes 6, only translated in English, with modifiable code parts replaced by static images, read the original text for real-time interaction.

The body of the

Unlike graphics drawn on paper, computer graphics need not be static; Like Frankenstein’s monster, they can be animated to life! ✨

The line chart above is shown step by step. This optional effect should be used with caution because it attracts attention, but it at least reinforces that X represents time and adds a touch of suspense to an otherwise dull chart.

The code here is similar to the axis rendering we saw earlier: we select an SVG path element, call a function (Reveal) to apply the transformation, and finally embed the element in the HTML template text.

Before we get into the technical details, let’s step back and think more fully about animation.

Animation is not a single figure, but a series of figures that change over time. The sequence can be represented as a unit (or function) that returns a graph at a given time t. For simplicity, we usually use regular times, where t=0 is the start of the animation and t=1 is the end.

Our unit could theoretically return any graph at a given time t, but the graph at time T is usually similar to the graph at time t+ϵ. This similarity between frames helps the viewer to follow along (above, only the stroke-Dasharray property sets the animation; The rest of the figure remains the same.) Therefore, continuous animation is usually defined by discrete key frames, with intermediate frames generated by interpolation or mesh.

Take a look at the stroke-Dasharray property. It is two comma-separated numbers: the first is the length of the dotted line (dash) and the second is the length of the gap between the dotted lines. If the dotted line length is zero, the line will not be visible; If the dotted line is as long as the line, the line will not break. We can control how many lines we draw by adjusting the length of the dotted lines so that the gap is at least as long as the line. We only need two keyframes: zero dashed line length and dotted line length.

To aid in animation (among other purposes), D3 provides interpolators. The most general of these is D3.interpolate, which accepts numbers, colors, numeric strings, and even arrays and objects. Given the start and value values, d3.interpolate returns a function that takes a time of 0 ≤ t ≤ 1 and returns the corresponding intermediate value.

When defining transformations, you can either explicitly specify the interpolator (as described above, using transition.attrtween) or let D3 select it (using transition.attr or transition.style). Explicit specification allows the use of more advanced interpolation methods, such as scaling, gamma-corrected RGB blending, and even shape blending.

Animation, however, is more than interpolation: it is also timing. We need to redraw 60 times per second and calculate the normalized time T based on the expected start time and duration of both real-time and animation.

So far, we’ve seen two methods of timing.

The first relies on D3, creating the initial graph and then starting the transformation to modify it (inserting the stroke-dasharray array).

The second relies on an Observable data stream that recreates the graph every time the referenced T changes and relies on a scrubber for timing. This is less efficient than the previous method because the graphics are created from scratch in each frame, but easier to write.

Observable has another powerful tool for controlling animations: generators. When the generator unit generates a value, its execution is paused until the next animation frame, up to 60 times per second. The generated values can be as simple as integers, or they can be incrementally updated SVG elements!

Given the various methods available in Observable for animation, which one to use? It depends!

If the graphics are simple enough, you can recreate each frame from scratch, or write the graphics declaratively if you don’t actually need to animate the transformation. In other words, do nothing! Thanks to the flow of Observable data, “static” graphics can respond, interact, or animate without changing the code.

On the other hand, for more complex dynamic graphics whose performance requires efficient incremental updates, use transformations or generators.

You can also combine methods. The figure below is initially static, but given a transformation of the chart.update method for the x domain; Another cell calls this method when the radio value changes. (This code is written using a D3 selector rather than HTML template text, but the graphic structure is the same as in the previous example, so try to infer the meaning of the code by comparison.)

By providing one or more update methods, the diagram can optionally animate the transformation of a particular value change. If there are any other changes, the diagram goes back to the passive state and is redrawn from scratch.

(In case you’re wondering: you can define updates in a separate unit instead of exposing them as methods. However, this is not recommended because editing the update code does not redraw the diagram from scratch, which can lead to uncertain behavior. 😱 By defining updates in the chart unit, it can access local variables that persist during the update.)

This example demonstrates another convenient feature of the D3 axis: by switching to Transition.call instead of selection.call, changes in the X axis are now dynamic instead of instantaneous, and synchronized with the transition path!

The animation above involves only one element: the lines of the chart. What if you want to animate multiple elements? What if the set of elements changes over time, with new elements entering and old elements exiting? Read on!

Next

The appendix

If you’re interested in designing effective animations, I highly recommend reading Heer and Robertson’s 2007 paper Animated Transitions in Statistical Data Graphics.

The attached

According to the source code, the platform dependence was removed and the main code was extracted, with the following examples:

  • Example 1
  • Example 2
  • Example 3
  • Example 4

The resources

wastebasket

Watched “south station party”, the sense of The Times is very strong, the impression to see Hu Ge’s main film or pretty few.