{"id":32889008,"url":"https://github.com/amanssur-tech/d3-visualizations","last_synced_at":"2026-04-08T20:43:21.436Z","repository":{"id":323378002,"uuid":"1092928987","full_name":"amanssur-tech/d3-visualizations","owner":"amanssur-tech","description":"Modern React + D3 data visualization dashboard built with Vite, Tailwind \u0026 Framer Motion.","archived":false,"fork":false,"pushed_at":"2026-01-08T22:19:46.000Z","size":471,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-08T20:43:18.888Z","etag":null,"topics":["d3","dashboard","data-visualization","framer-motion","react","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://viz.amanssur.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amanssur-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-09T15:31:56.000Z","updated_at":"2026-01-08T22:19:49.000Z","dependencies_parsed_at":"2025-11-09T21:08:18.691Z","dependency_job_id":null,"html_url":"https://github.com/amanssur-tech/d3-visualizations","commit_stats":null,"previous_names":["amanssur-tech/d3-visualizations"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/amanssur-tech/d3-visualizations","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amanssur-tech%2Fd3-visualizations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amanssur-tech%2Fd3-visualizations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amanssur-tech%2Fd3-visualizations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amanssur-tech%2Fd3-visualizations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amanssur-tech","download_url":"https://codeload.github.com/amanssur-tech/d3-visualizations/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amanssur-tech%2Fd3-visualizations/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31573788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","dashboard","data-visualization","framer-motion","react","tailwindcss","typescript","vite"],"created_at":"2025-11-10T00:01:28.744Z","updated_at":"2026-04-08T20:43:21.432Z","avatar_url":"https://github.com/amanssur-tech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧭 D3 Visualizations — React + D3 + Tailwind\n\nA sleek, modern data visualization dashboard built with **React**, **Vite**, **D3.js**, and **Tailwind CSS**.  \nOriginally 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.\n\n---\n\n## 🚀 Live Demo\n\n**[https://viz.amanssur.com](https://viz.amanssur.com)**\n\n---\n\n## 📸 Preview\n\n\u003cimg width=\"1920\" height=\"1080\" alt=\"Dashboard Screenshot\" src=\"https://github.com/user-attachments/assets/16231b24-855d-421e-a0ed-c01dc751612c\" /\u003e\n\n---\n\n## ✨ Highlights\n\n- ⚛️ **Modern React architecture** — modular components, reusable charts, and clean routing (dashboard, case-study index, and deep links for each visualization).\n- 📊 **D3.js inside React** — a custom `useD3` hook bridges the gap between React’s virtual DOM and D3’s SVG rendering.\n- 🎨 **Tailwind CSS styling** — consistent design tokens, light/dark mode, and responsive layouts.\n- 🌀 **Framer Motion** — subtle page and chart transitions for a smooth, app-like experience.\n- 💾 **Export-ready charts** — one click to download all visualizations in SVG/PNG.\n- 🧩 **TypeScript migration** — strongly typed components for scalability and long-term maintainability.\n\n---\n\n## 🗂️ Project Overview\n\n```\nd3-visualizations/\n├── public/\n│   ├── favicons/            # Brand icons and PWA assets\n│   ├── manifest.webmanifest # PWA metadata\n│   ├── robots.txt           # Crawling rules + IndexNow key\n│   └── sitemap.xml          # Sitemap for all routes\n├── src/\n│   ├── charts/              # D3 renderers (bar, line, donut, time-of-day, etc.)\n│   ├── components/          # React components (UI + dashboard views)\n│   ├── content/             # Case study metadata\n│   ├── context/             # ThemeContext for dark/light mode\n│   ├── data/                # JSON datasets bundled with the app\n│   ├── hooks/               # useD3 and other UI/data hooks\n│   ├── i18n/                # Bilingual EN/DE translations and helpers\n│   ├── pages/               # Dashboard + case-study pages\n│   ├── styles/              # Tailwind global styles\n│   ├── ui/                  # Reusable UI primitives (buttons, surfaces, pills)\n│   ├── utils/               # Config, export, tooltip helpers\n│   ├── App.tsx\n│   ├── main.tsx\n│   └── router.tsx\n├── index.html\n├── vercel.json              # SPA deep-link rewrites for React Router\n├── package.json\n├── tsconfig.json\n└── vite.config.js\n```\n\n---\n\n## ⚡️ Quick Start\n\n\u003e **Requirements:** Node.js ≥ 18\n\n```bash\n# install dependencies\npnpm install\n\n# start the local dev server\npnpm run dev\n\n# build production files\npnpm run build\n\n# preview the production build\npnpm run preview\n```\n\n---\n\n## 🌐 Deployment\n\nDeployed live at **[viz.amanssur.com](https://viz.amanssur.com)** via **Vercel**.  \nFor local or alternative hosting:\n\n1. Run `pnpm run build` to generate optimized assets in `/dist`.\n2. Deploy to your preferred platform (Vercel, Netlify, or GitHub Pages).\n3. Ensure SPA fallback is enabled so routes (`/`, `/case-studies`, and each `/case-studies/...` deep link) work properly.\n\n---\n\n## 🧠 Tech Stack\n\n| Category   | Tools                               |\n| ---------- | ----------------------------------- |\n| Framework  | React + Vite                        |\n| Charts     | D3.js                               |\n| Styling    | Tailwind CSS                        |\n| Animations | Framer Motion                       |\n| Language   | TypeScript                          |\n| Hosting    | Vercel (\u003chttps://viz.amanssur.com\u003e) |\n\n---\n\n## 💡 How It Works\n\nEach chart (Bar, Line, etc.) is a standalone React component that:\n\n- Loads JSON data from the bundled `src/data` directory\n- Uses D3.js for rendering and scaling\n- Animates into view with Framer Motion\n- Supports export through shared utility functions\n\nThis 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`.\n\n---\n\n## 🌟 Author\n\nBuilt with ❤️ by **[Amanullah Manssur](https://amanssur.com)**\n\n---\n\n## 🪪 License and Branding Notice\n\nAll source code in this repository is released under the [MIT License](./LICENSE).  \nLogos, 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famanssur-tech%2Fd3-visualizations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famanssur-tech%2Fd3-visualizations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famanssur-tech%2Fd3-visualizations/lists"}