Our initial motivation consisted of preventing people from making poor investment choices and putting their money in highly volatile cryptocurrencies. The idea was to construct a visual that shows fast growing coins may drop in value as quickly as they grew. We decided to create a comprehensive bubble chart, where each coin is represented by its own bubble, with several attributes such as trading volume and price corresponding to each coin.

What it does

The bubble chart represents each coin as a bubble with radius being price and color being volume traded. There is also a time slider that can be dragged week by week from August 2017 to 2022.

How we built it

We first extracted data from Binance using a library called ccxt which provides a unified API for different cryptocurrency exhcanges. We used the data from Binance to construct a bubble chart using React and Express. The Express server provides data to the React client and the React client renders the data accordingly.

Challenges we ran into

The React and NPM build managers. Somewhere along the way changes in code do not affect changes of the compiled site, and we had to start a completely new project to fix it.

Accomplishments that we're proud of

Successfully leveraging the rich ecosystem of React to build an interactive and animated bubble chart effortlessly.

What we learned

We learned what options there are in React for building data visualization and how to configure NPM to host an Express server for a React frontend.

Share this project: