Digiwise cover.jpg

Interactive Data Visualizer for Cryptocurrencies

Individual Project
Fall 2018 - 3 weeks
Language : Python, js

CryptoSpace is a data visualizer that shows live market information and relationships among 100 cryptocurrencies. There are 6 different interactive feature and 2 filters that provide a new experience of perceiving information on cryptocurrencies market.

Context

While cryptocurrencies become a hype for financial investment, they still remain unfamiliar to the general public. When I try searching online about the market information, I found those info tables filled with numbers that are hard to make sense of and tedious to read. So I began thinking that how to design a fun visualization without using numbers?

 

Goal

My challenge is to translate live market data into an intuitive visualization for people to understand trends and relationship without being overwhelmed by numbers. I started by narrowing down data types and visual elements in a hierarchical structure shown below .

 
Screen Shot 2018-10-26 at 12.02.49 AM copy.jpg

Data

Utilizing the free CoinMarket API, I obtained live market data of 100 cryptocurrencies. Although I acknowledge that python is not best way to make graphic, The program is essential built in Python because of the course requirement.

 
ezgif.com-video-to-gif.gif
cps instruction .png

Instruction & Entry

Instruction page will be displayed first allowing user to understand both on how to perceive the visualization as well as different ways they can interact with it.

 

AmbianCe view

The first layer of the visualization is designed to be an ambiance view, where users can perceive general trend in the market through gradual changes in color and motion. Using the slider bar, user can set how many currencies that will be display on the screen. The goal of the ambiance view is to have a non-intrusive way (almost like a screen saver) to inform users about the market utilizing their intuitive visual perception.

 
ezgif.com-video-to-gif (5).gif

Spotlight Feature

If user would like to reveal more specific information about one currency, they can hover on the bubble and utilize the spotlight feature. The spotted currency will enlarge and display the core information (price and daily change percentage).

 
Screen Shot 2018-10-28 at 11.04.16 PM.png

Viewing Modes and Filter

Besides the normal view, the visualization also have other sorting modes that display relationships in the current market. Filter can also apply if user only wants to see the growing or declining set of currencies.

 
ezgif.com-optimize (3).gif

Combination

All three channel (slider, modes and filter) are adaptable to each other meaning user can have different combination to control different aspect they would like to see.

 
ezgif.com-optimize (4).gif

Outlier Detection

There is also a keyboard command I built in to the visualization to detect the outlier currently according to the screen. User can also pause the motion and select one currency to see detail.

 
ezgif.com-video-to-gif (10).gif