cryptoization

Background and Overview

Cryptoization is a data visualization application created to show the all the transactions happening for Bitcoin (BTC) in real time.

Users will be able to see each transaction visualized in the form of spheres, differing in size. The size of the circle will be in direct relation to size of the transaction, measured either in BTC or in USD.

Users will also be able to hear a sound whenever a new transaction is made. The sound's tone will depend on the size of the trasaction as well.

Functionality & MVP

In Cryptoization, users will be able to:

• View spheres of different sizes that represent each BTC transaction
• Click on a sphere, and more information will open up about that transaction
• Change the color scheme of the spheres
• Listen to sounds of different tones whenever a new transaction is made
• Zoom in & out of the cluster of spheres to explore the application
• Start, pause, and reset the application

In addition, this project will include:

• An about modal describing what the application is, and what each sphere/sound represents

Wireframes

The app will consist of a single screen with the simulation canvas, audio options, zoom in/out controls, and nav links to the GitHub repo and relevant social links.

Spheres will be added to the center of the cluster and the cluster will grow outwards

General Canvas Wireframe

Architecture and Technologies

This project will be implemented with the following technologies:

• Vanilla JavaScript for overall structure
• Three.js to create the 3D objects
• D3.js to create the 2D objects
• Web Audio API for sound generation
• Websockets from blockchain.io

Implementation Timeline

Over the weekend:

• Familiarize myself with the API's that I will be using
• Get GitHub repo set up
• Look into how websockets work

Day 1:

• Make sure I can subscribe to the websockets from blockchain.io so that I have a stream of information flowing in
• Create my initial canvas

Day 2:

• Be able to create my objects in D3.js
• Figure out how to create my objects in D3.js dynamically as I receive JSON from blockchain.io

Day 3:

• Be able to create a sound dynamically as I create objects.
• Be able to create a info box come up as I click on the objects

Day 4:

• Create the controls for audio and color changes
• Style everything

Bonus Features:

• Render everything in 3D