Handling Radio Buttons in D3.js

US Rainfall Part 3 — detect change of radio button state and handle event

The Code Cakes Project

Previous Lessons

1. Remove Characters from Beginning of JavaScript String
2. Divide Large Data Set into Smaller Data Sets

Lesson Steps

In index.html, create 5 radio buttons, labeled Set 1, Set 2, Set 3, Set 4, Set 5.

Each radio button is named, states.

<form>
   <input type="radio" name="states" value="set1">
   <label>
   Set 1
   </label>
</form>

In main.js, use d3.selectAll and store in const buttons.

Detect change of button state. — buttons.on('change', function(d) {...

In the anonymous function, use console.log to print out the value

Answer is below graphic.

const buttons = d3.selectAll('input');
buttons.on('change', function(d) {
console.log('button changed to ' + this.value);
});

Create new function called, drawRain

In the d3.csv section, call the function when the button state changes

In the function drawRain(..` Create a new blank variable dataset.

Use if statements to change the data set based on the button that is selected.

Use console.log to print out the dataset you selected.

Next Lesson

• Set Up SVG Viewport with D3.js — part 4 of series

Code Cakes Project Information

• Introduction
• YouTube
• Publication