How to build an interactive crypto bubble chart

This guide demonstrates building a crypto market visualization tool using the CoinGecko API for market data and Three.js with React for interactive 3D graphics. The focus is on integrating real-time data pipelines, efficiently rendering 3D elements, and providing a responsive user interface for analyzing cryptocurrency trends.

Prerequisites

Before we begin, make sure you have the following:

CoinGecko API: Fetch market data for cryptocurrencies, especially the endpoint /market and /market_chart. The free Demo plan is enough for our needs, with a rate limit of 30 calls per minute and a monthly limit of 10,000 calls. Create a Demo account to try it out.

Node.js: Download the latest stable version from the website and install it, if it is not already installed.

Visual Studio Code (VS Code): Download and install Visual Studio Code from the website. Keep it updated to get the latest features and extensions.

React & JavaScript Familiarity: A basic understanding of React and JavaScript will help you navigate the code.

Set up a React app and Three.js

Run the Boilerplate: Open the project in your preferred code editor, such as Visual Studio Code. Before making any changes, verify that everything is configured correctly by running: npm install npm run dev

Install Three.js: To integrate advanced 3D rendering capabilities into your application, install Three.js by running: npm install three

1. Delivering market data with Three.js

With Three.js installed, we are ready to build our first basic 3D scene. Create a new file called ThreeScene.jsx in your src folder. Configure the basic elements in this file:

Initialize the scene: Create a Three.js scene.

Configure the camera: Configure an Outlook camera customized for our needs.

Create the Renderer: Attach a WebGL rendering to your DOM.

Add a Simple Cube: Delivers a basic cube that you can later expand into more complex market data visualizations.

This setup provides the foundation for integrating real-time crypto market data.

Create the 3D scene with Three.js

We created a new React component called ThreeScene.jsx. This component is responsible for setting up and managing the 3D environment, including the scene, camera, rendering, and visual elements. Here is a breakdown of the most important parts:

1. Setting the scene

const scene = new THREE. Scene();

The scene is the foundation of the 3D world. It acts as a container for all the objects (such as cubes, spheres or lights) that will be rendered. Think of it as the stage where everything happens.

2. Setting up the camera

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 10;

The camera determines which part of the scene is visible to the user. Here we use a perspective camera, which mimics how the human eye perceives depth. By placing the camera slightly off-center along the Z-axis, we ensure that objects in the scene are visible.

3. Initialize the Responder

const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

The renderer is the object for drawing the scene on the screen using WebGL. We set its size to fit the browser window and add its canvas element to the DOM so that the 3D content is displayed.

4. Animation of the scene

The animation loop is what makes the scene dynamic and interactive. It continuously updates the scene and renders:

const animate = () => { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate();

This loop ensures that any changes to the objects (such as rotation or movement) are reflected in real time. For example, if you add a rotating cube, the loop will keep updating its position.

5. Clearance

React components can be mounted and unmounted multiple times during the application’s lifecycle. To prevent memory leaks, we clean up the version when the component is disconnected:

This ensures that the WebGL context and DOM elements are disposed of properly when the component is no longer in use.

When I first set up the 3D scene, I ran into an issue where the canvas didn’t change properly when the browser window was resized. To fix this, I added an event listener to handle window size and dynamically update the camera’s aspect ratio and render size:

window.addEventListener(“resize”, () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });

This small addition made the app much more user-friendly and responsive.

2. Integrate market data

Next, let’s retrieve market data from the CoinGecko API. Install Axios for making API requests:

npm install axios

Create a fetchMarketData.js file inside the src folder:

3. Connect market data to Three.js

Change ThreeScene.jsx to use market data. Now that we’ve set up a basic 3D scene with Three.js, it’s time to enhance it by integrating real-time market data from the CoinGecko API. This will ensure that our visualization dynamically reflects live cryptocurrency trends.

export default ThreeScene;

4. Visualization of the 3D spheres

Once we have the data, we walk through each coin and create a 3D sphere to represent it:

marketData.forEach((coin, index) => { const size = Math.cbrt(coin.market_cap) * 0.0001; const geometry = new THREE.SphereGeometry(size, 32, 32); const material = new THREE.MeshBasicMaterial({ff sphere: }xff); THREE.Mesh(geometry, material sphere.position.x = (index – marketData.length / 2) * 2 scene.add(scene);

How to run the program

Install dependencies: Make sure you have Node.js installed. Next, go to the project directory in your terminal window and run the following npm command to install all required dependencies: npm install

Start the development server: Run the following command to start the development server: npm run dev

Accessing the application: Open your browser and navigate to the URL displayed in the terminal (usually http://localhost:5173 for Vite projects).

Output

Once the program is running, you should see:

Note: If there are problems retrieving data, an error message will be displayed on the screen.

Future improvements

Add interactions: Use raycasting to track mouse hover over coins. Retrieve additional details such as trading volume, circulating supply and all-time high using the CoinGecko /coins/{id} endpoint. Dynamically display this data in a tooltip for better user insights.

Animate live updates: Poll the CoinGecko /simple/token_price/{id} endpoint every minute to fetch updated prices and percentage changes. Visually reflect changes by animating sphere colors or sizes based on price movements.

Integrate historical data: Use the CoinGecko /coins/{id}/ohlc endpoint to retrieve OHLC (Open, Low, High, Close) data—Visualize trends with animations or graphs, such as a pulsating effect for coins with significant price volatility.

Real-World Examples: Crypto Projects Using CoinGecko API

While this guide walks you through the basics of building a crypto bubble chart, several projects are already using the CoinGecko API to power their market visualization tools at scale. Let’s look at some examples:

Crypto bubbles

Crypto Bubble uses /market and /market_chart to fetch price and market data, turning it into an interactive bubble UI that allows users to quickly grasp market performance trends.

Today’s project built with our API is nothing but amazing visualization tool @CryptoBubbles 🫧👇https://t.co/9wLOorBM5W #BuildwithCoinGecko pic.twitter.com/2BRMWXv83E

— CoinGecko (@coingecko) August 7, 2023

Banter Bubbles

Similar to Crypto Bubbles, Banter Bubbles features an interactive bubble map of the crypto market, but with additional data points such as VAT and Circulating Supply, along with better category-based segmentation. All of this is powered by data from the /coins/{id} endpoint.

Deduction

This project demonstrates the use of Three.js and the CoinGecko API to build a real-time bubble crypto graph visualization tool. By integrating CoinGecko’s market data endpoints and historical trends, we created interactive 3D spheres representing cryptocurrencies, with live updates and performance optimizations like instances. The tool uses raycasting for user interactions and visual cues such as color changes to indicate price movements. This setup provides a scalable, efficient and visually intuitive way to analyze crypto market data in real time.