DEV Community


Posted on

What JS framework to use to make stockmarket simulator - speed replay visualization tool?

I want to make my own desktop stock simulator replay of historical stock price moves.

I have a sample dataset of time-series price data available in CSV format.

Essentially, I just need to render this data on canvas. The main point is to accumulate more trading experience in less time. A user can speed trade thru sessions for entire year in a week!

I made a gif of another program made in Delphi(not open-source) to demonstrate the program I want to build.

Here is the gif showing what I want to build:

I think my project has to do with data visualization.

The task seems quite easy, after all it's just parsing dataset like below and showing it on screen with every new row drawing the price moves.

date open high low close volume

  • 10/07/2016 - 1.4 2.3 0.7 1.5 400
  • 10/07/2016 - 3.4 1.3 23 1.4 5500
  • 10/07/2016 - 1.7 2.3 0.9 1.4 100

The high quality tick data shows change every milisecond, so it has more fields than just "open high low..", so i guess will need some milisecond clock counter to reflect every change in price.

The canvas should have:

automatic scaling to fit in entire price range when price moves out of bounds of the canvas - all bars should adjust their size accordingly,
zoom in\out
speed adjusting slider to slow down/increase the drawing speed
Could it be similar to some open-source graphics design drawing tool?

Should I use D3.js, python, C++, electron.js or some other JS framework? Could u give me the direction or tool where I should be researching?

Discussion (2)

rushichaudhari profile image
Rushi Chaudhari

Hey, did you complete this thing ? I was looking for the same tool.

x777 profile image