A modern, interactive dashboard for exploring cryptocurrency market data. Switch between assets, inspect price and volume trends, review key metrics, and visualize correlation and risk–reward profiles—all from CSV files served locally.
Live demo: crypto-analysiss.vercel.app
Repository: github.com/abeeraisabeera/Crypto_Analysiss
- Sticky top bar — Asset tabs (BTC, ETH, ADA, LTC, XRP, BCH), dark/light theme toggle, last-updated timestamp
- Hero summary — Live price with count-up animation, 24h change badge, 30-session sparkline
- Metrics grid — Total volume, highest/lowest price, YTD gain with contextual badges and trend hints
- Main chart — Combined price area + volume bars, time ranges (1M / 3M / 6M / 1Y / ALL), crosshair tooltip, zoom and pan
- Correlation heatmap — High vs. low price density with Pearson coefficient
- Risk–reward chart — Volatility vs. return bubbles sized by volume, quadrant labels, safety percentile vs. other assets
- Responsive layout — Mobile-friendly stacking, scrollable asset tabs, skeleton loading states
- Accessibility — Keyboard focus rings, chart
aria-labels, semantic contrast in light and dark modes
| Layer | Tools |
|---|---|
| Framework | Next.js 15 (App Router, React 19) |
| Styling | Tailwind CSS 3, CSS custom properties (light/dark themes) |
| Charts | D3.js 7 |
| Data | Papa Parse (CSV parsing) |
| Icons | Lucide React |
| Font | Geist |
pnpm install
pnpm devOpen http://localhost:3000.
pnpm build # Production build
pnpm start # Serve production build
pnpm lint # Run ESLintCSV files live in public/data/ and are loaded at runtime:
| File | Asset |
|---|---|
BTC-USD.csv |
Bitcoin |
ETH-USD.csv |
Ethereum |
ADA-USD.csv |
Cardano |
LTC-USD.csv |
Litecoin |
XRP-USD.csv |
Ripple |
BCH-USD.csv |
Bitcoin Cash |
| Column | Description |
|---|---|
Open |
Opening price |
High |
High price |
Low |
Low price |
Close |
Closing price |
Volume |
Trading volume |
Year |
Calendar year |
YTD Gain |
Year-to-date gain (%) |
There is no Date column in the source files. The app assigns a synthetic daily date sequence starting 2014-01-01 so time-series charts and range filters work correctly. To use real dates, add a Date column to your CSVs and extend normalizeRows in src/utils/dataLoader.js.
crypto_analysis/
├── public/data/ # CSV datasets
├── src/
│ ├── app/ # Next.js layout, page, global styles
│ ├── components/dashboard/
│ │ ├── TopBar.js
│ │ ├── HeroSection.js
│ │ ├── MetricsGrid.js
│ │ ├── MainChart.js
│ │ ├── CorrelationHeatmap.js
│ │ ├── RiskRewardChart.js
│ │ └── ...
│ ├── hooks/ # Theme, count-up animation
│ └── utils/ # CSV loading, metrics, formatting
├── assets/ # Screenshots for docs
└── package.json
CSV (public/data) → Papa Parse → normalizeRows → React state
↓
metrics (KPIs, correlation, risk stats)
↓
D3 charts + dashboard UI components
- On load, all six asset CSVs are fetched and normalized.
- Selecting an asset updates hero stats, metric cards, and charts with a short crossfade.
- D3 renders the main price/volume chart, heatmap, and bubble chart inside client components.
- Theme preference is stored in
localStorageand applied via thedarkclass on<html>.
- Assets — Edit
ASSETSinsrc/utils/dataLoader.jsand add matching*-USD.csvfiles underpublic/data/. - Colors — Adjust CSS variables in
src/app/globals.css(--accent,--positive, etc.). - Time ranges — Default chart range and pills are configured in
src/components/dashboard/MainChart.js.
The app is configured for Vercel with pnpm via vercel.json.
pnpm install
npx vercel --prodTo enable automatic deploys on every push, connect the GitHub repo in the Vercel project settings.
MIT — Copyright (c) 2026 Abeera