Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Lines"
description: "We talk through a more complex example: animating our line chart when it gets new data. This is trickier than it might seem at first!"
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/aewtltdtuh
codeFolder: course/module_03/lesson_03.04/protected/code/04-animations-and-transitions/end
---

# Lines

After animating bars, animating line transitions should be easy, right? Let's find out!

<CodeSandboxEmbed
  src="//codesandbox.io/s/826uy?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

Does this example look familiar? This is our timeline drawing code from **Module 1** with some small updates.

![Timeline](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_03/lesson_03.04/public/images/4-animations-and-transitions/timeline.png)

One of the main changes is an `addNewDay()` function at the bottom of the script. This exact code isn't important — what is good to know is that `addNewDay()` shifts our dataset one day in the future. To simulate a live timeline, `addNewDay()` runs every 1.5 seconds.

A>If you read through the `addNewDay()` code and were confused by the `...dataset.slice(1),` syntax, the `...` is using ES6 spread syntax to expand the dataset (minus the first point) in place. Read more about it in [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).

We can see our timeline updating when we load our webpage, but it looks jerky. We know how to smooth the axis transitions, let's make them nice and slow.

```javascript
const xAxis = bounds.select(".x-axis")
    .transition().duration(1000)
    .call(xAxisGenerator)
```

Great! Now let's transition the line.

```javascript
const line = bounds.select(".line")
    .transition().duration(1000)
        .attr("d", lineGenerator(dataset))
```

What's going on here? Why is our line wriggling around instead of adding a new point at the end?

![Timeline wriggling?](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_03/lesson_03.04/public/images/4-animations-and-transitions/line-squiggle.png)

Remember when we talked about how path **d** attributes are a string of draw-to values, like a learn-coding turtle? d3 is transitioning each point to **the next point at the same index**. Our transition's `.attr()` function has no idea that we've just shifted our points down one index. It's guessing how to transition to the new **d** value, animating each point to the next day's y value.

Pretend you're the `.attr()` function - how would you transition between these two **d** values?

```html
<path d="M 0 50 L 1 60 L 2 70 L 3 80 Z" />
<path d="M 0 60 L 1 70 L 2 80 L 3 90 Z" />
```

It would make the most sense to transition each point individually, interpolating from `0 50` to `0 60` instead of moving each point to the left.

Great, we understand _why_ our line is wriggling, but how do we shift it to the left instead?

Let's start by figuring out **how far we need to shift our line** to the left. Before we update our line, let's grab the last two points in our dataset and find the difference between their x values.

```javascript
const lastTwoPoints = dataset.slice(-2)
const pixelsBetweenLastPoints = xScale(xAccessor(lastTwoPoints[1]))
  - xScale(xAccessor(lastTwoPoints[0]))
```

We talk through a more complex example: animating our line chart when it gets new data. This is trickier than it might seem at first!