https://github.com/amanssur-tech/d3-visualizations
Modern React + D3 data visualization dashboard built with Vite, Tailwind & Framer Motion.
https://github.com/amanssur-tech/d3-visualizations
d3 dashboard data-visualization framer-motion react tailwindcss typescript vite
Last synced: 3 months ago
JSON representation
Modern React + D3 data visualization dashboard built with Vite, Tailwind & Framer Motion.
- Host: GitHub
- URL: https://github.com/amanssur-tech/d3-visualizations
- Owner: amanssur-tech
- License: other
- Created: 2025-11-09T15:31:56.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2026-01-08T22:19:46.000Z (6 months ago)
- Last Synced: 2026-04-08T20:43:18.888Z (3 months ago)
- Topics: d3, dashboard, data-visualization, framer-motion, react, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://viz.amanssur.com
- Size: 460 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🧭 D3 Visualizations — React + D3 + Tailwind
A sleek, modern data visualization dashboard built with **React**, **Vite**, **D3.js**, and **Tailwind CSS**.
Originally inspired by an academic project, it has evolved into a professional-grade template for interactive data dashboards with smooth animations, dark mode, and export capabilities.
---
## 🚀 Live Demo
**[https://viz.amanssur.com](https://viz.amanssur.com)**
---
## 📸 Preview
---
## ✨ Highlights
- ⚛️ **Modern React architecture** — modular components, reusable charts, and clean routing (dashboard, case-study index, and deep links for each visualization).
- 📊 **D3.js inside React** — a custom `useD3` hook bridges the gap between React’s virtual DOM and D3’s SVG rendering.
- 🎨 **Tailwind CSS styling** — consistent design tokens, light/dark mode, and responsive layouts.
- 🌀 **Framer Motion** — subtle page and chart transitions for a smooth, app-like experience.
- 💾 **Export-ready charts** — one click to download all visualizations in SVG/PNG.
- 🧩 **TypeScript migration** — strongly typed components for scalability and long-term maintainability.
---
## 🗂️ Project Overview
```
d3-visualizations/
├── public/
│ ├── favicons/ # Brand icons and PWA assets
│ ├── manifest.webmanifest # PWA metadata
│ ├── robots.txt # Crawling rules + IndexNow key
│ └── sitemap.xml # Sitemap for all routes
├── src/
│ ├── charts/ # D3 renderers (bar, line, donut, time-of-day, etc.)
│ ├── components/ # React components (UI + dashboard views)
│ ├── content/ # Case study metadata
│ ├── context/ # ThemeContext for dark/light mode
│ ├── data/ # JSON datasets bundled with the app
│ ├── hooks/ # useD3 and other UI/data hooks
│ ├── i18n/ # Bilingual EN/DE translations and helpers
│ ├── pages/ # Dashboard + case-study pages
│ ├── styles/ # Tailwind global styles
│ ├── ui/ # Reusable UI primitives (buttons, surfaces, pills)
│ ├── utils/ # Config, export, tooltip helpers
│ ├── App.tsx
│ ├── main.tsx
│ └── router.tsx
├── index.html
├── vercel.json # SPA deep-link rewrites for React Router
├── package.json
├── tsconfig.json
└── vite.config.js
```
---
## ⚡️ Quick Start
> **Requirements:** Node.js ≥ 18
```bash
# install dependencies
pnpm install
# start the local dev server
pnpm run dev
# build production files
pnpm run build
# preview the production build
pnpm run preview
```
---
## 🌐 Deployment
Deployed live at **[viz.amanssur.com](https://viz.amanssur.com)** via **Vercel**.
For local or alternative hosting:
1. Run `pnpm run build` to generate optimized assets in `/dist`.
2. Deploy to your preferred platform (Vercel, Netlify, or GitHub Pages).
3. Ensure SPA fallback is enabled so routes (`/`, `/case-studies`, and each `/case-studies/...` deep link) work properly.
---
## 🧠 Tech Stack
| Category | Tools |
| ---------- | ----------------------------------- |
| Framework | React + Vite |
| Charts | D3.js |
| Styling | Tailwind CSS |
| Animations | Framer Motion |
| Language | TypeScript |
| Hosting | Vercel () |
---
## 💡 How It Works
Each chart (Bar, Line, etc.) is a standalone React component that:
- Loads JSON data from the bundled `src/data` directory
- Uses D3.js for rendering and scaling
- Animates into view with Framer Motion
- Supports export through shared utility functions
This setup allows adding new visualizations easily — drop a new D3 renderer in `src/charts`, a page in `src/pages/case-studies`, and wire it up in `router.tsx`.
---
## 🌟 Author
Built with ❤️ by **[Amanullah Manssur](https://amanssur.com)**
---
## 🪪 License and Branding Notice
All source code in this repository is released under the [MIT License](./LICENSE).
Logos, monograms, and brand assets belonging to Amanullah Manssur or Manssur Media are **not covered** by this license and may not be reused or redistributed without explicit written permission.