Using a 'Range' Input

Learn how to use the “range” input to adjust the radius of a circle.

Using a range input with D3.js

The first example we will follow will use a range input to adjust the radius of a circle.

The code

The following is the full code for the example:

Code for range input

Explanation

As with the other examples in the course, I will not go over some of the simpler lines of code that are covered in greater detail in earlier sections of the book and will concentrate on those sections that contain new concepts, code, or look like they might need expanding.

Lines 5-11: The first section is the portion that sets out the HTML range input.

  • The entire block is enclosed in a paragraph (<p>) tag so that it ...