Modify index.html file to enhance stock market graph/plot
Budget: $150 – $450 USD
I have a sample webpage called index.html. It has html, css, and javascript included. You may also separate css and JavaScript into separate files if you wish. Currently the index.html file loads D3 and produces a treemap from the data contained in the “sp500.csv” file. I would like to make some modifications so that it matches the treemap and bubble map on finviz.com. Please click on this link:
https://finviz.com/map.ashx
You may use D3.js or Plotly.js, currently it uses D3 to render the treemap. For the front end I believe react.js would be best. It should incorporate the same features as the link, such as:
• View button- select either “Map” for treemap or “Bubbles” for a bubble map. D3.js and Plotly support both treemaps and bubble maps.
• Map Filter- It needs to be able to take data from 4 different csv files. I’ve provided a sample attachment of the format that I’d like called “stockdata1.csv”. There will be 4 different data csv files: stockdata1.csv, stockdata2,csv, stockdata3.csv, and finally, stockdata4.csv. The rectangle area is based on the market cap column. And there are two different values, one for percent change and the other for short interest. The color of the rectangle is mapped by color the same way as on finviz.com. ie- -3% is red, +3% is green, and various shades in between.
• Dropdown box to select either percent change or short interest. Once user selects this, the treemap recalculates the colors automatically based on the data in the csv corresponding to that column of data.
• Other features to match the webpage:
o Click to zoom inside map
o Treemap levels broken down by main market sector, sub-sector, and finally the stock market cap itself.
o When you hover the mouse over the rectangle, a template pops up with data like the website and the rectangle highlight color changes.
o Font hides on very small rectangles, and font size larger for larger rectangles.
• Generally, just match that webpage in functionality, if I provide four csv files for the data then it should function the same.
I have already built this using the Dash framework and it is not flexible enough for my needs, but my knowledge in D3 and react is very limited so I’m turning to you and your expertise to build this.
Please let me know if you have any questions!
https://finviz.com/map.ashx
You may use D3.js or Plotly.js, currently it uses D3 to render the treemap. For the front end I believe react.js would be best. It should incorporate the same features as the link, such as:
• View button- select either “Map” for treemap or “Bubbles” for a bubble map. D3.js and Plotly support both treemaps and bubble maps.
• Map Filter- It needs to be able to take data from 4 different csv files. I’ve provided a sample attachment of the format that I’d like called “stockdata1.csv”. There will be 4 different data csv files: stockdata1.csv, stockdata2,csv, stockdata3.csv, and finally, stockdata4.csv. The rectangle area is based on the market cap column. And there are two different values, one for percent change and the other for short interest. The color of the rectangle is mapped by color the same way as on finviz.com. ie- -3% is red, +3% is green, and various shades in between.
• Dropdown box to select either percent change or short interest. Once user selects this, the treemap recalculates the colors automatically based on the data in the csv corresponding to that column of data.
• Other features to match the webpage:
o Click to zoom inside map
o Treemap levels broken down by main market sector, sub-sector, and finally the stock market cap itself.
o When you hover the mouse over the rectangle, a template pops up with data like the website and the rectangle highlight color changes.
o Font hides on very small rectangles, and font size larger for larger rectangles.
• Generally, just match that webpage in functionality, if I provide four csv files for the data then it should function the same.
I have already built this using the Dash framework and it is not flexible enough for my needs, but my knowledge in D3 and react is very limited so I’m turning to you and your expertise to build this.
Please let me know if you have any questions!