.png)
Real-time cryptocurrency market performance visualization with an interactive heatmap
Features • Demo • Installation • Usage • Screenshots • License
- 📊 Visual Heatmap - Display cryptocurrencies as blocks proportional to their market cap
- 🎨 Dynamic Coloring - Green/Red based on 24h performance, intensity based on % change
- 🔍 Real-time Search - Filter coins by name or symbol instantly
- 📈 TradingView Charts - Click any coin to view its advanced chart
- ⚡ Real-time Data - CoinGecko API for the most recent market data
| Function | Description |
|---|---|
| Top 10/50/100 | Toggle between top cryptos by market cap |
| 🔎 Search | Search by name (Bitcoin) or symbol (BTC) |
| 🔄 Refresh | Manually refresh the data |
| 💡 Hover | Hover to see market cap, volume, 24h high/low |
| 🖱️ Click | Open the modal with TradingView chart |
- 🌙 Dark Mode by default (pro trading design)
- 📱 Responsive - Desktop, tablet, mobile
- 💾 LocalStorage - Save your preferences (top 10/50/100)
- 🎬 Animations - Smooth transitions on hover and load
- 🖥️ Console Style - Styled welcome message in the console
- 🚀 Zero Framework - 100% Vanilla JS, no dependencies
🌐 Live Demo : https://kirobotdev.github.io/Heatmap-Dashboard
# Clone the repo
git clone https://github.com/KirobotDev/Heatmap-Dashboard.git
# Navigate to folder
cd crypto-heatmap
# Open with Live Server (VS Code) or open index.html directly
code .
# Then right-click → "Open with Live Server"Note on CORS: CoinGecko API may block requests from localhost after a certain number of requests. If you see CORS errors:
- Wait a few minutes (rate limit)
- Use a CORS Unblock extension temporarily
- Deploy to Netlify/Vercel for a real domain
Main view with top 50 cryptos heatmap
Real-time search and Top 10/50/100 filters
Advanced chart opens on coin click
Additional details on hover
- HTML5 - Semantic structure
- CSS3 - Grid, Flexbox, CSS Variables, Animations
- Vanilla JavaScript - ES6+, Fetch API, DOM Manipulation
- CoinGecko API - Crypto market data
/coins/markets- Prices, market cap, volume/global- Global market stats
- TradingView Widget - Advanced charts
- Google Material Icons - Vector icons
- TradingView Advanced Chart Widget
crypto-heatmap/
├── index.html # Complete application (HTML + CSS + JS)
├── README.md # Documentation
├── LICENSE # MIT License
└── screenshots/ # Screenshots (to add)
├── dashboard.png
├── phone-dashboard.png
├── search-feature.png
├── tradingview-modal.png
└── hover-effects.png
💡 Note: The entire application is contained in a single
index.htmlfile for easy deployment.
- Go to netlify.com
- Drag & drop your
crypto-heatmapfolder - Your site is live! 🎉
npm i -g vercel
vercel- Push to GitHub
- Settings → Pages → Source: Deploy from a branch → main / root
- Your site will be at
https://kirobotdev.github.io/Heatmap-Dashboard
In index.html, modify the CONFIG section:
const CONFIG = {
API_URL: 'https://api.coingecko.com/api/v3',
DEFAULT_LIMIT: 50, // Number of coins displayed by default (10, 50, 100)
REFRESH_INTERVAL: 60000, // Auto-refresh interval in ms (1 min = 60000)
STORAGE_KEY: 'cryptoHeatmapPrefs'
};Modify the CSS :root variables:
:root {
--bg-primary: #0a0e1a; /* Main background */
--bg-secondary: #111827; /* Header, cards */
--accent-green: #10b981; /* Gains/positive */
--accent-red: #ef4444; /* Losses/negative */
--accent-blue: #3b82f6; /* Buttons, links */
}| Endpoint | Description |
|---|---|
GET /coins/markets |
Coin data (prices, market cap, 24h change) |
GET /global |
Global stats (total market cap, BTC dominance) |
vs_currency=usd # Currency
order=market_cap_desc # Sort by market cap
per_page=50 # Limit (10, 50, or 100)
page=1 # First page
price_change_percentage=24h # 24h change
Contributions are welcome! 🙌
- Open an Issue
- Describe the bug with steps to reproduce
- Add screenshots if possible
- Fork the project
- Create a branch (
git checkout -b feature/my-feature) - Commit (
git commit -m 'Add my feature') - Push (
git push origin feature/my-feature) - Open a Pull Request
- Light mode
- Personal watchlist
- Price alerts
- More timeframes (7d, 30d, 1y)
- Multi-currency (EUR, GBP, JPY)
xql.dev
- GitHub: @KirobotDev
- CoinGecko for their free API
- TradingView for the charts
- Google Fonts for Material Icons
This project is under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2026 xql.dev
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
⭐ Star this repo if you like it! ⭐
Made with xql.dev & the Community for crypto traders