Add 3 features to a newly developed D3 web page

I have a newly developed web page using D3, JS, and HTML: [login to view URL] Need to add following features to it: 1. Enhance top right input textfield filtering: 1.1 dynamic filtering with any text input to the field, and reset when blank/empty, "return" key shall not be needed ( currently the filtering only happen when "return" is pressed", this is not convenient) 1.2 The filtering shall be case insensitive aka upper case/lower case shall not be differentiated 2. Convert the 2 legends into checkbox, and use them to control display/hidden of avg_price info vs pieces_sold info There are 2 legend shown on top of the chart (svg) that currently doing nothing: * number of pieces sold ( in pink ) * average sold price (in blue) - Please convert them into "Checkbox" - by default, both are checked. - Each, when checked, shall display the corresponding bar on chart as well as the number - when unchecked, the bar and number on chart shall be hidden 3. Fix the default display problem when having long list (display go to bottom of svg and have to scroll to be seen), or single item (display scrolled under legend, and only 1/2 of the item can be seen) The display shall be consistently displayed at the same position relative to legend regardless of number of bar items on page. Please test your work on different devices/browsers - Laptop (Windows, Mac Book): Chrome, IE, Firefox - Ipad : Chrome, Safari - Iphone, Android: Chrome, Safari Thanks for reading.