Adding the dropdown

The dropdown is just a standard select HTML element, which is added to the HTML file:

<p> 
    <span> 
        Select group: 
    </span> 
    <select> 
        <option value="All" selected>All</option> 
        <option value="Female">Female Owners</option> 
        <option value="Male">Male Owners</option> 
        <option value="AfricanAmerican">African American Owners</option> 
        <option value="White">White Owners</option> 
    </select> 
</p>

With just this code, nothing will happen when we select one of the entries in the dropdown. We still need to connect this dropdown to our JavaScript. We do this directly using D3:

var select = d3.select('select').on('change', update); 
 
... 
 
function update() { 
    var show = select.property('selectedOptions')[0].value; 
    updateCircle(show); 
}

We select the select element, and use the on function to add an event listener. Now, whenever the value of the dropdown changes, the update function will be called. In this update function we just call the updateCircle function with the value of the dropdown. As we'll see later on in the updateCircle function, this will cause the donut to be redrawn with a different set of data.