Chart Transition Animation

This project demonstrates a smooth transition animation between a waffle chart and a tiled bar chart using React and D3. The animation is triggered by scrolling.

Functionality

• Waffle Chart: A grid-based visualization where each square represents a portion of the data
• Tiled Bar Chart: A bar chart where each bar is composed of individual squares
• Smooth Transition: Animated morphing between the two chart types
• Scroll-Triggered Animation: The transition is controlled by the user's scroll position
• React Spring Animation: Physics-based animations for natural-feeling transitions

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd chart-transition
   

2. Install dependencies:

   npm install
   # or
   yarn install
   

3. Start the development server:

   npm start
   # or
   yarn start
   

4. Open your browser and navigate to http://localhost:3000

Project Structure

• src/ - Source code
  • App.jsx - Main application component
  • components/ - React components
    • waffle-bar-scrolly.jsx - Component that handles the scroll-based animation
    • animated-rectangles.jsx - Component that renders the morphing animation
    • tiled-bar.jsx - Standalone tiled bar chart component
    • waffle-chart.jsx - Standalone waffle chart component
  • utils.js - Utility functions for data processing and calculations
  • config.js - Configuration settings for charts and animations

How It Works

1. Data Preparation: The buildWaffleBarSquares function in utils.js creates a dataset with both waffle and bar positions for each square.

2. Scrollama Integration: The WaffleBarScrolly component uses the Scrollama library to track scroll position and update the animation progress.

3. Spring Animation: The AnimatedRectangles component uses React Spring to create smooth, physics-based animations between the two chart types.

4. Configuration: All chart settings are centralized in config.js and passed down as props to the components.

Available Components

The project includes several standalone chart components that can be used independently:

• WaffleBarScrolly: The main component that demonstrates the transition animation
• TiledBarChart: A standalone bar chart where each bar is composed of individual squares
• WaffleChart: A standalone grid-based visualization where each square represents a portion of the data

Demo Options

The project includes a simplified version of the default Scrollama example. To use this demo:

1. Open src/App.jsx
2. Uncomment the Demo component in the return statement
3. Comment out the other chart components

This provides a simpler starting point for understanding how Scrollama works with basic animations.

Customization

You can customize the charts by modifying the configuration objects in config.js:

• CHART_CONFIG: Settings for the morphing animation
• WAFFLE_CONFIG: Settings specific to the waffle chart
• TILED_BAR_CONFIG: Settings specific to the tiled bar chart
• SCROLLAMA_CONFIG: Settings for the scrollama behavior

Dependencies

• React
• D3
• React Spring
• React Scrollama

License

MIT License

Acknowledgements

• D3.js for data visualization
• React Spring for animations
• React Scrollama for scroll-based interactions