Viewing a saved revision (read-only)
5c4bd8ec41c94a8ba712b8e6cda1c669
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 and integrated with a comprehensive layout design system featuring a dark theme with Olympic-inspired colors.
Features
- 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
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.