Dynamic rescaling of axes

In some cases, the scale used by axes might change when triggered by user interaction or changes from data feeds. For example, a user may change the time range for the visualization. This kind of change also needs to be reflected by rescaling the axes. In this recipe, we will explore how this can be achieved dynamically while also redrawing the grid lines associated with each tick.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter5/rescaling.html

How to do it...

The following is the code that shows how to perform dynamic rescaling:

<script type="text/javascript"> var height = 500, width = 500, margin = 25, xAxis, yAxis, xAxisLength, ...

Get Data Visualization with D3 4.x Cookbook - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.