A simple and beautiful bubble chart creator built with Next.js and D3.js. Create interactive bubble charts with multiple dimensions and group colors, all stored locally in your browser.
Demo: https://bubble-chart-silk.vercel.app/
- Interactive Bubble Charts: Create beautiful bubble charts with D3.js
- Multiple Dimensions: Each bubble has X, Y, and size dimensions
- Group Colors: Organize bubbles into groups with different colors
- Local Storage: All data is stored locally in your browser
- Real-time Updates: See changes immediately as you edit
- Responsive Design: Works on desktop and mobile devices
- Easy to Use: Simple forms for adding and editing data
- Node.js (version 16 or higher)
- npm or yarn
-
Clone or download this repository
-
Navigate to the project directory:
cd bubble-chart -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and go to
http://localhost:3000
- Set up your X and Y axis labels and ranges
- The chart will automatically scale to your specified ranges
- Click "Add Group" to create color-coded groups
- Each group gets a unique color for easy identification
- Edit or delete groups as needed
- Click "Add Bubble" to create new data points
- Fill in the bubble name, X value, Y value, and size
- Assign each bubble to a group
- The bubble will appear on the chart with the group's color
- Hover over bubbles to see detailed information
- Edit or delete bubbles and groups
- All changes are automatically saved to your browser's local storage
Each bubble has the following properties:
- Name: Display name for the bubble
- X Value: Position on the X-axis
- Y Value: Position on the Y-axis
- Size: Determines the bubble's radius
- Group: Associates the bubble with a color group
- Framework: Next.js 14 with TypeScript
- Visualization: D3.js for chart rendering
- Storage: Browser localStorage for data persistence
- Styling: Custom CSS with modern design
- State Management: React hooks for local state
bubble-chart/
├── app/
│ ├── layout.tsx # Root layout component
│ ├── page.tsx # Main application page
│ └── globals.css # Global styles
├── components/
│ ├── BubbleChart.tsx # D3.js chart component
│ ├── BubbleForm.tsx # Form for adding/editing bubbles
│ └── GroupForm.tsx # Form for adding/editing groups
├── lib/
│ ├── types.ts # TypeScript type definitions
│ └── storage.ts # Local storage utilities
├── package.json # Dependencies and scripts
└── README.md # This file
- The modular structure makes it easy to add new features
- Components are reusable and well-typed
- Storage utilities can be extended for different data types
- Modify
app/globals.cssfor custom styling - The chart uses D3.js for rendering, so you can customize the visualization
- Color schemes can be changed in the group creation form
This application works in all modern browsers that support:
- ES6+ JavaScript
- localStorage API
- CSS Grid and Flexbox
The application runs entirely locally:
- No external API calls
- No database required
- Data persists between browser sessions
- Perfect for offline use
- Make sure you have at least one bubble added
- Check that your axis ranges are properly set
- Verify that all bubbles have valid X, Y, and size values
- Ensure your browser supports localStorage
- Check browser console for any JavaScript errors
- Try refreshing the page to reload data
- Large datasets (100+ bubbles) may affect performance
- Consider reducing the number of bubbles for better performance
- The chart automatically scales to handle different data ranges
This project is open source and available under the MIT License.