Changing Metrics with Events

We are going to refactor the Histogram we have created. At the moment, it is displaying the humidity. We have other data available within the data file. One of the great things about D3 is that it is able to handle updates. We can remove, add, or update the histogram even after it is been drawn. We are not restricted to drawing a chart once.

Here is what we will do. We are going to allow the reader to select any metric they want. After selecting a metric, the histogram will be updated. Everything will change, from the bars to the axis and labels. The first thing we will need to handle is setting up a way to change the metric.

Adding a dropdown

We are going to use a dropdown. On the dropdown, we will listen for a change event. If the change event gets fired, we will begin the process of redrawing the histogram. Let’s begin. In the HTML section, we will update it to the following: