Need D3 guru to help me build this web page for quick search and visualization of 40 some csv data files.
Screen layout: see attached image
Csv Data format: see attached csv file
1) A drop down list at left upper corner to display list of csv file names for selection
1.1) The DDL shall allow manual input and filter the list accordingly, case insensitive
1.2) selected csv will be displayed
1.3) list items can be hard coded ( I will expand to include real file name)
2) A text field for filtering displayed records on top, filter is case insensitive
2.1) Upon return, only records with KW contains the input string shall be displayed
3) left column in the middle, kw column from the csv
4) a yAxis to separate kw string and bars displayed on right
5) each bar is colored in 2 part, pink represents sold_no, blue represents avg_price
5.1) pink bar length shall equal sold_no_bar_length column
5.2) blue bar length shall equal avg_price_bar_length column
5.3) display "(xxx, yyyy)" at the beginning of each bar where xxx = sold_no, yyyy = avg_price
6) KW and bar area shall be scrollable
1) each csv may contain thousands of records so please make sure the scroll would be smooth and there's no performance with large data file
2) the page shall work on both laptop and mobile
3) support main versions of browsers
A demo is required. I will verify with different platform and browser.
Any question, please pin me.