Viewing a saved revision (read-only)
692ae997237b4529b7ab0cda37f05ad4
Interactive Dashboard Template
This example presents an interactive dashboard with two synchronized views of five data points: a scatter plot using circles and a bar chart. Clicking a circle or bar selects the corresponding data point, highlighting it in both charts simultaneously, with a background click to deselect. The visualization leverages D3 version 7 for scales and SVG rendering, including transitions with linear easing for style changes. React 19 manages the interface and shared selection state between the two charts.
AI-generated descriptionInteractive Dashboard
A modern dashboard application built with React, D3, and integrated with a comprehensive layout design system featuring a dark theme with Olympic-inspired colors.
Features
- Interactive D3 Chart: Clickable circles with hover effects
- Dashboard Layout: Two-column chart layout with placeholder sections
- Dark Theme: Gradient background with dark color scheme
- Layout System: Flexible layout with header and main content area
- Responsive Design: Built with Tailwind CSS for responsive styling
- Design System: Includes theme colors, typography scale, and reusable components
Components
- Layout: Main layout container with header and main content
- LayoutHeaderTitle: Header title component with consistent styling
- LayoutMainContent: Main content container with centered layout
- Chart: D3-powered interactive chart with clickable circles
Theme Colors
The application uses an Olympic-inspired color palette:
- Blue: Light (#5ed6ff), Medium (#0078d0), Dark (#00287f)
- Yellow: Light (#fff08c), Medium (#ffce19), Dark (#e67324)
- Green: Light (#aae8b8), Medium (#00cb50), Dark (#005a46)
- Red: Light (#ffc7c9), Medium (#ff555f), Dark (#bf192b)
Getting Started
The application uses ES modules with CDN imports. Open
index.html in a modern browser to run the application.
Interact with the chart by clicking on circles to select them. Hover over circles for visual feedback.