Day 13: Adding Animation to Line Charts

Adding animation to the line chart is also different from the scatter plot. Below is how we created the animation for the scatter plot.

const dots = chart.selectAll("circle")
        .data(dataset)
        .enter().append("circle")
        .attr("cx", 0)
        .attr("cy", chartHeight)
        
dots.transition().duration(2000)
        .ease(d3.easePolyOut.exponent(2))
        .attr("r", 3)
        .attr("fill-opacity",0.6)
        .attr("fill", d => colorScale( colorAccessor(d)))
        .attr("cx", d => xScale( xAccessor(d)))
        .attr("cy", d => yScale( yAccessor(d)))

We set the initial position and the end position of the dot and put the transition between the “cx” and “cy” attributes. The animation I wanted to create is to grow the line chart from the bottom. Using the same logic, my first attempt to create animation for a line chart was written below. I wanted to create a line at the bottom, then move the points up.

const LineGenerator = d3.line()
    .x(d => xScale(xAccessor(d)))
    .y(chartHeight)

const line = chart.append("path")
    .attr("d", lineGenerator(dataset))
    .attr("fill", "none")
    .attr("stroke", "gray")
    .attr("stroke-width", 1.5)
    .style("transform",
    `translateY(${chartHeight -yScale(yAccessor(dataset))}px)`)
    .transition().duration(1000)
    .style("transform", `none`)

However, this doesn’t work. The chart only generates a straight line at the bottom without the animation. Here is the explanation I got from ChatGPT:

In your original question, it seems like you are trying to access the y-value of a point in the middle of a D3 chain, while you are creating the line. This is not typically how D3 is used, as the chain that creates the line is not dealing with individual points, but with the dataset as a whole. You’ll want to separate your access of individual points from the D3 chain that’s creating and manipulating your SVG elements.

Instead of accessing the individual points in the line chart, we should create a start line element and an end line element, and add “transition( ).duration( )” in between. The line connects the data points, so we are not working with individual dots anymore. That’s why adding a tooltip and animation to our line charts is different from what we did for scatter plots.

const startLineGenerator = d3.line()
    .x(d => xScale(xAccessor(d)))
    .y(chartHeight)

    
const endLineGenerator = d3.line()
    .x(d => xScale(xAccessor(d)))
    .y(d => yScale(yAccessor(d)))

const line = chart.append("path")
    .attr("d", startLineGenerator(dataset))
    .attr("fill", "none")
    .attr("stroke", "gray")
    .attr("stroke-width", 1.5)
    .transition().duration(1000)
    .attr("d", endLineGenerator(dataset))

Here is how it looks at the end. 🙂 Codes can be found here.