D3 map Styling tutorial III: Drawing animated paths

The example La Belle France, or the original La Bella Italia by Gregor Aisch, have a nice ferry sailing along a path to connect the islands with the continent.
Drawing a path in a map, and animating some icon on it can be a nice tool to show information about routes, storm tracks, and other dynamic situations.

This example shows how to draw the Haiyan typhoon track on the map drawn in the last post.

The working examples are here:
Creating a geopath
Animating an object on the path

Getting the data

Both the base map data and the typhoon data are explained in the post  D3 map Styling tutorial I: Preparing the data

Creating a geopath

First, how to draw the path line on a map. The working example is here.

• The base map is drawn in the simplest way, as shown in this example, so the script stays clearer.
• The typhoon track is loaded from the json file generated in the first tutorial post (line 55)
• The path is created and inserted from lines 68 to 75:
• A d3.svg.line element is created. This will interpolate a line between the points. An other option is to draw segments from each point, so the line is not so smooth, but the actual points are more visible. 
• The interpolate method sets the interpolation type to be used.
• x and y methods, set the svg coordinates to be used. In our case, we will transform the geographical coordinates using the same projection function set for the map. The coordinates transformation is done twice, one for the x and another for the y. It would be nice to do it only once.
• The path is added to the map, using the created d3.svg.line, passing the track object as a parameter to be used by the line function. The class is set to path, so is set to a dashed red line (line 20)

Drawing the paths is quite easy, taking only two steps.

Animating an object on the path

 

The typhoon position for every day is shown on the path, with an icon. The icon size and color change with the typhoon class. The working example is here.

This second example is more complex than the first one:

• The base map has a shadow effect. See the second part of the tutorial for the source.
• The map is animated:
• Line 135 sets an interval, so the icon and line can change with the date.
• A variable i is set, so the array elements are used in every interval.
• When the dates have ended, the interval is removed, so everything stays quiet. Line 158.
• An icon moves along the path indicating the position of the typhoon
•  Line 128 created the icon. First, I created it using inkscape, and with the xml editor that comes with it, I copied the path definition. This method can get really complex with bigger shapes.
• Line 136 finds the position of the typhoon. The length of the track is found at line 122 with the getTotalLength() method.
• Line 137 moves the icon. A transition is set, so the movement is continuous even thought the points are separated. The duration is the same as the interval, so when the icon has arrived at the final point, a new transformation starts to the next one.
• Line 141 has the transform operation that sets the position (translate), the size (scale) and rotation (rotate). The factors multiplying the scale and rotation are those only to adjust the size and rotation speed. They are completely arbitrary.
• The path gets filled when the icon has passed. I made this example to learn how to do it. Everything happens at line 144. Basically, the trick is creating a dashed line, and playing with the stroke-dashoffset attribute to set where the path has to arrive.
• The color of the path and icon change with the typhoon class
• At line 54, a color scale is created using the method d3.scale.quantile. 
• The colors are chosen with colorbrewer, which is a set of color scales for mapping, and has a handy javascript library to set the color scales just by choosing their name. I learned how to use it with this example by Mike Bostock.
• The lines 156 and 142 change the track and icon colours.
• Finally, at line 154, the date is changed, with the same color as the typhoon and track.

Links

Simple path on a map - The first example
Haiyan typhoon track - The second example
D3 map Styling tutorial I: Preparing the data
D3 map Styling tutorial II: Giving style to the base map
Animated arabic kufic calligraphy with D3 - Animating paths using d3js
La Bella Italia - Kartograph example by Gregor Aisch
La Belle France - The same example as La Bella Italia, but using D3js
Every ColorBrewer Scale - An example to learn how to use ColorBrewer with D3js