d3 web page with auto scroll and text field filter

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

-- kw

-- sold_no_bar_length

-- sold_no

-- avg_price_bar_length

-- avg_price

Main functions:

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

Performance:

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

Delivery:

A demo is required. I will verify with different platform and browser.

Any question, please pin me.

CSS HTML JavaScript

Projekt-ID: #17460725

Über das Projekt