This is an interactive web application based on Chapter 4 of data visualization techniques, focusing on matplotlib chart styling and advanced visualization methods. The project transforms static Jupyter Notebook charts into dynamic, interactive visualizations with rich user interaction capabilities.
- Clickable/Draggable Controls: Zoom, pan, and hover interactions on all charts
- Real-time Data Updates: Modify data and see immediate visual changes
- Dynamic Parameter Control: Adjust colors, styles, fonts, and animations
- Responsive Touch Support: Optimized for mobile and tablet devices
- Multi-device Compatibility: Desktop, tablet, and mobile optimization
- Adaptive Layout: CSS Grid and Flexbox for perfect scaling
- Touch-friendly Interface: Large buttons and gesture support
- Chart Type: Grouped Bar Chart
- Features:
- Compare book purchases between two regions
- Real-time data input and customization
- Color scheme customization
- Data reset functionality
- Chart Type: Dual Line Chart
- Features:
- Compare exchange rates across different years
- Line style switching (solid, dashed, dotted)
- Animation playback controls
- Interactive date navigation
- Chart Type: Multi-series Line Chart
- Features:
- Compare quarterly sales of multiple products
- Marker style customization (diamond, triangle, square)
- Color theme selection
- Sales trend analysis
- Chart Type: Temperature Trend Chart
- Features:
- High/low temperature comparison
- Font style and size adjustment
- Data annotation display
- Weather pattern analysis
- Chart Type: Geometric Fractal Visualization
- Features:
- Iteration level control (1-5 levels)
- Color filling effects
- Mathematical pattern exploration
- Interactive zoom and pan
- HTML5: Semantic structure and accessibility
- CSS3: Modern styling with gradients and animations
- JavaScript ES6+: Interactive functionality and data handling
- Plotly.js: Interactive charts with rich features
- D3.js: Advanced data visualization and fractal generation
- CSS Grid: Flexible layout system
- Flexbox: Component alignment and spacing
- Media Queries: Device-specific optimizations
# Clone the repository
git clone https://github.com/Ms-wang123/Data-Visualization-Chapter-4.git
# Navigate to project directory
cd Data-Visualization-Chapter-4
# Open index.html in your browser
open index.html # macOS
start index.html # Windows
xdg-open index.html # Linux# Using Python 3
python -m http.server 8000
# Using Node.js with http-server
npx http-server -p 8000
# Using PHP
php -S localhost:8000Then visit: http://localhost:8000
Visit the live deployment: https://ms-wang123.github.io/Data-Visualization-Chapter-4/
-
Chart Navigation:
- Hover over data points to see detailed information
- Click and drag to pan across the chart
- Use mouse wheel or pinch gestures to zoom
- Double-click to reset the view
-
Control Operations:
- Click buttons to switch between different visualization modes
- Use sliders to adjust parameters like animation speed or iteration levels
- Select colors from the color picker to customize themes
- Input custom data in the provided text fields
- Touch Gestures: Swipe to navigate, pinch to zoom
- Large Touch Targets: Easy-to-tap buttons and controls
- Adaptive Layout: Automatic adjustment for different screen sizes
- Performance Optimized: Smooth animations on mobile devices
- Real-time Data Input: Modify numerical values directly in the interface
- CSV Format Support: Input data in comma-separated format
- Data Validation: Automatic error checking and validation
- Reset Functionality: Restore original data with one click
- Color Schemes: Choose from predefined color palettes
- Line Styles: Switch between solid, dashed, and dotted lines
- Marker Shapes: Select different marker types for data points
- Font Settings: Adjust font size, style, and family
- Animation Controls: Customize animation speed and effects
All data is based on authentic examples from Chapter 4 Jupyter Notebook:
- Book Purchase Data: Regional book category statistics
- Historical Exchange Rates: USD/CNY rates from 2017 and 2019
- Product Sales Data: Quarterly performance metrics
- Temperature Forecasts: 15-day weather predictions
- Mathematical Patterns: Koch snowflake fractal algorithms
This project demonstrates how to:
- Transform Static to Interactive: Convert Jupyter Notebook charts into dynamic web visualizations
- Implement Real-time Data Binding: Connect user inputs directly to visual outputs
- Create Responsive Web Applications: Build interfaces that work across all devices
- Optimize User Experience: Design intuitive controls and smooth interactions
- Apply Modern Web Technologies: Use contemporary frontend frameworks and libraries
The project architecture supports easy extension:
- Additional Visualization Types: Add more chart types and data representations
- Data Import/Export: Support for CSV, JSON, and Excel file formats
- Theme System: Light/dark mode and custom color schemes
- Multi-language Support: Internationalization for global users
- Data Persistence: Save user preferences and custom datasets
- Collaborative Features: Real-time multi-user interactions
Data-Visualization-Chapter-4/
├── index.html # Main application entry point
├── script.js # Interactive functionality and chart logic
├── README.md # Project documentation (this file)
└── .nojekyll # GitHub Pages configuration
This project is configured for automatic deployment via GitHub Pages:
- Repository: https://github.com/Ms-wang123/Data-Visualization-Chapter-4
- Live URL: https://ms-wang123.github.io/Data-Visualization-Chapter-4/
- Branch:
master(root directory)
For deployment to other platforms:
# Build for production (if needed)
# This project requires no build process - it's ready to deploy!
# Deploy to any static hosting service:
# - Netlify: Drag and drop the folder
# - Vercel: Connect GitHub repository
# - AWS S3: Upload files to S3 bucket
# - Any web server: Copy files to web rootWe welcome contributions to improve this project:
- Use GitHub Issues to report bugs or suggest enhancements
- Include detailed descriptions and reproduction steps
- Provide browser/device information for technical issues
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-visualization - Commit your changes:
git commit -am 'Add new visualization type' - Push to the branch:
git push origin feature/new-visualization - Submit a Pull Request
- Follow semantic HTML5 structure
- Use modern CSS3 features with fallbacks
- Write clean, documented JavaScript
- Test across multiple browsers and devices
- Ensure accessibility compliance
This project is intended for educational and demonstration purposes. All code is available for learning and non-commercial use.
- Data Visualization Course: Based on Chapter 4 curriculum materials
- Plotly.js Team: For the excellent interactive charting library
- D3.js Community: For powerful data visualization capabilities
- GitHub Pages: For free static site hosting
Explore the fascinating world of data visualization! 🎉
Last updated: November 2024