Skip to main content
100%

Animate a line

✓ Published0🌍 Public
Aaax951
Last edited Apr 19, 2016
Created on Apr 19, 2016

This example animates a line chart of population projections, showing how individual series grow, decline, and change direction over time. Using D3 v3 with SVG and animation, it draws multiple lines simultaneously and animates them by manipulating the `stroke-dasharray` and `stroke-dashoffset` SVG properties. The dataset, loaded from a CSV file, contains 28 different population projection scenarios for each year from 2012 to 2031, with the animation revealing each line progressively to illustrate trends. The `animateLines` function demonstrates a technique for animating lines by transitioning dash properties, which is particularly useful for highlighting growth, decline, or geographical movement in time-series data.

AI-generated description

Animating a line

Whilst I wouldn't want to animate every line, it can be useful on certain occasions to illustrate growth / decline, direction or geographical movement. In this situation we're using population projections that can go in all sorts of different directions depending on the underlying assumptions made. The animatelines function below shows how to animate a line by modifying the stroke-dash & stroke-dashoffset properties of a line.

forked from <a href='http://bl.ocks.org/fryford/'>fryford</a>'s block: <a href='http://bl.ocks.org/fryford/2925ecf70ac9d9b51031'>Animating a single line & multiple lines</a>

Similar vizzes