Stock Market Tree Map -- 2
Budget: $150 – $550 USD
I am looking for someone to build a stock market tree map like finviz.com. Please click on this link:
https://finviz.com/map.ashx
I think D3 or Plotly.js would be good for the treemap itself, and the front end I believe react.js would be best. It should have the same features as the link, such as:
• View button- select either “Map” for treemap or “Bubbles” for a bubble map. D3 supports both treemaps and bubble maps and can generate them. Plotly.js supports both also.
• Map Filter- It needs to be able to take data from 4 different csv files. I’ve provided a sample attachment. 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.
• 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
I think D3 or Plotly.js would be good for the treemap itself, and the front end I believe react.js would be best. It should have the same features as the link, such as:
• View button- select either “Map” for treemap or “Bubbles” for a bubble map. D3 supports both treemaps and bubble maps and can generate them. Plotly.js supports both also.
• Map Filter- It needs to be able to take data from 4 different csv files. I’ve provided a sample attachment. 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.
• 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!