Data Visualization-Filtering and Animations

Link to the GitHub repository:

When the user clicks on the Filter button, the code filters as follows:

  1. The selected color from the dropdown is used to color the bars that fall within the filter. 
  2. Letters whose frequency are greater than or equal to the value entered in the text box turn the selected color.
  3. All other bars are hidden (however, their location on the y-axis remains, along with the axis label). 
  4. Changing the cuttoff (to a higher or lower value) and clicking “Filter Data” adds or removes bars, and assigns them the color selected in the dropdown.
  5. Clicking “Reset Filter” resets the filters and lest the user start over.

For example, If the user selects “Red” in the drop down menu and types “0.01” in the text field, the visualization shows all the bars that are greater than or equal to 0.01 in Red, and hides all the other bars. If the user clicks “Reset Filter”, all bars return to blue and are shown again, and the user can start over with another filter.