create chart using React and d3

I'm looking for a project that involves React.js and d3 charts. The goal of the project is to create a web based component with a command box (like a google box) and a d3 charts which displays stock price data. The user types a ticker and a graphing command in the command box, and the chart displays the historical price data based on the information in the command box.

Ultimately, I want the command box to serve as the guide for the chart and the user has to type 'Ticker' followed by 'function'. For example, if a user types "MSFT GL" in the command box, a line chart of Microsoft stock will appear because MSFT is the ticker and GL is the function for graph line. If a user types "MSFT GC" a candle chart will appear.

Overall Architecture

* Use React as the Javascript framework to design the interaction between the command box and the charting component

* The charting component should be created using d3 or one of its libraries like NVD3

* Incorporate Quandl free API as the data source for the data

Command Bar

* Allow auto complete feature. For example, if user starts typing "Micro", the auto complete will show "Microsofot MSFT" as one of the options.

* The ranking of the autocomplete list should be based on marketcap. For example, if user starts to type "Micro", the autocomplete list may contain multiple tickers including those for Microsoft and Microstrategy. But Microsoft will rank higher because it has a larger market cap

* The application should always allow the user to type in the command bar at any time. For example, if I click on the chart for something, but then I start typing a command, the command bar will always be responsive to my typing

Chart

* Chart should be customizable (date range, y-axis scale)

* Ability to add up to five time series to the chart (price history of Microsoft and Facebook stock) with separate y axis for each

* Ability to index the price series to 100

* Ability to change the format of the stock price series (from line to bar, or from line to candle)

* Ability to right click within the chart and see different options (add series, index series)

* Charts have automatic labels which are generated to identify each series (instead of a legend)

* Hovering the mouse over a series provides details on the series (Ticker, Name, 1-day price change %, Market cap)

* Button on the bottom of the chart that performs the following function when clicked: chart gets copied as a picture and pasted into an email body

Dthreejs JavaScript React.js

Nº del proyecto: #9760863

Sobre el proyecto