Easing

Easing tweaks the behavior of interpolators by controlling the time (t) argument. We use this to make our animations feel more natural, to add some bounce elasticity, and so on. Mostly, we use easing to avoid the artificial feel of linear animation.

Let's make a quick comparison of the easing functions provided by D3 and see what they do.

We will start putting everything in separate files because it helps us manage our code when we start extending our charts. First, create lib/chapter5/index.js and add the following:

import easingChart from './easingChart'; easingChart(true);

Next, create a new file, lib/chapter5/easingChart.js, and add a new function enclosure:

import * as d3 from 'd3'; import chartFactory from '../common'; function ...

Get D3.js 4.x Data Visualization - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.