Search⌘ K
AI Features
Home
Courses
D3 Tips and Tricks: Interactive Data Visualization

Use a 'Number' Input with D3.js

Explore how to implement number input controls in D3.js to interactively rotate text elements. Understand how to update one or more elements simultaneously by referencing their class names, and learn differences between number and range input types for enhanced user interaction.

We'll cover the following...

Change one element with an input

There are obviously different input types that can be implemented. The following example still rotates our text, but it uses a number type of input to do it:

HTML
<p>
  <label for="nValue" 
         style="display: inline-block; width: 240px; text-align: right">
         angle = <span id="nValue-value"></span>
  </label>
  <input type="number" min="0" max="360" step="5" value="0" id="nValue">
</p>

We have set the step value to speed things up a bit when rotating, but it’s completely optional.

The input itself can be adjusted up or down using a mouse click, or have a number typed into the input box. ...