An interactive narrative visualization exploring cryptocurrency investment outcomes through timing, strategy, and coin selection.
This project is a D3.js-powered narrative visualization that guides users through the volatile history of cryptocurrency investing. Using real historical price data, it explores whether timing and strategy could have led to wealth—or significant losses—in the crypto market.
The visualization follows a martini glass structure: starting with guided storytelling through annotated price histories of notable coins (Bitcoin, Terra/LUNA, and Dogecoin), then opening up to interactive exploration where users can simulate their own investment scenarios and compare price trends across different cryptocurrencies.
Crypto isn't a guaranteed path to wealth — it's a high-risk, speculative space where timing, strategy, and coin selection can lead to either significant gains or substantial losses.
Interactive simulation with customizable parameters and animated playback
Side-by-side comparison of two cryptocurrencies with synchronized tooltips
- Three Coins, Three Stories: Side-by-side comparison of BTC (long-term survivor), LUNA (catastrophic collapse), and DOGE (meme-driven volatility) with annotated historical events
- Investment Simulation: Interactive tool to simulate crypto investments with customizable parameters:
- Choose from multiple cryptocurrencies
- Select buy dates and investment amounts
- Apply different sell strategies (target profit/loss, time-based, or HODL)
- Animated playback with speed controls
- Coin Comparison Explorer: Side-by-side price comparison of any two coins with normalized scales and interactive tooltips
- D3.js - Data visualization and DOM manipulation
- d3-annotation.js - Chart annotations for historical events
- Vanilla JavaScript - Interactive logic and state management
- HTML/CSS - Structure and styling
docs/
├── index.html # Main HTML file
├── main.js # Core visualization logic
├── theme.js # Visual styling constants
├── scene0_intro.js # Landing scene
├── scene1A_pickacoin.js # Three coins comparison
├── scene1B_simulation.js # Investment simulation setup
├── scene2_comparison.js # Simulation playback
├── scene3_explore.js # Coin comparison explorer
├── styles.css # Styling
├── data/
│ ├── crypto_prices_prepped_plus_bcc.csv # Historical price data
│ └── coin_list.json # Coin metadata
└── logos/ # Cryptocurrency logos
This is a static HTML + JavaScript + D3 visualization with no build process required. Simply serve the docs/ folder using any local web server.
# Example using Python 3
cd docs
python -m http.server 8000
Then open http://localhost:8000 in your browser.
The visualization follows the martini glass structure:
- Guided narrative (stem) - Curated storytelling through annotated charts
- Interactive exploration (bowl) - User-driven simulation and comparison
- Scene transitions: Slide-inspired navigation with "Continue" buttons
- Color coding: Contrasting backgrounds, red/green for gains/losses
- Annotations: Historical events mapped to price movements
- Hover states: Color changes indicate interactive elements
- Tooltips: Contextual information on demand
- Animation controls: Play/pause and speed adjustment for simulations
- Intro - Landing page with central question
- Three Coins, Three Stories - Annotated comparison of BTC, LUNA, and DOGE
- Simulation Setup - Configure investment parameters
- Simulation Playback - Animated investment outcome
- Price Comparison - Flexible two-coin comparison with synchronized tooltips
Historical cryptocurrency price data is sourced from:
- CryptoDataDownload - Primary source for most cryptocurrency price histories
- CoinLore - Historical data for BitConnect (BCC)
The data was preprocessed using Python pandas to merge price data from multiple sources into a unified dataset. The visualization includes major coins and covers significant market events including bull runs, crashes, and notable incidents (e.g., LUNA collapse, Elon Musk tweets).
This project was developed for the Data Visualization course at the University of Illinois Urbana-Champaign (UIUC).
This README was written with the assistance of an AI LLM tool.