Impact Effort Visualizer

An interactive web application for visualizing and prioritizing product concepts using an Impact-Effort matrix. Built with React, TypeScript, and Chart.js.

Features

• Interactive Table: Enter up to 20 product concepts with customizable names
• Impact & Effort Scoring: Rate each concept on a 1-10 scale for both impact and effort
• Real-time Visualization: See your concepts plotted on an interactive scatter chart
• Drag-and-Drop: Click and drag points on the chart to adjust scores visually
• Bidirectional Sync: Changes in the table update the chart, and dragging points updates the table
• Quadrant Shading: Visual zones help identify:
  • Quick Wins (High Impact, Low Effort) - Green
  • Major Projects (High Impact, High Effort) - Blue
  • Fill In Tasks (Low Impact, Low Effort) - Yellow
  • Money Pit (Low Impact, High Effort) - Pink
• Responsive Design: Works seamlessly on desktop and mobile devices
• Reset Functionality: Clear all data and start fresh with one click

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/yourusername/impact-effort-visualizer.git
cd impact-effort-visualizer

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

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

Building for Production

To create a production build:

npm run build

The built files will be in the dist directory.

To preview the production build locally:

npm run preview

Usage

Adding Concepts

1. In the table on the left, enter concept names in the "Concept" column
2. Add Impact scores (1-10) where 10 = highest impact
3. Add Effort scores (1-10) where 10 = highest effort
4. Points will automatically appear on the chart as you enter both scores

Editing via Table

• Simply type in any field to update values
• Impact and Effort values are automatically clamped to the 1-10 range
• Empty values will remove the point from the chart

Editing via Chart

1. Click on any point on the chart
2. Drag it to a new position
3. Release to update the scores
4. The table will automatically reflect the new values
5. Scores snap to integer values between 1-10

Understanding the Quadrants

The chart is divided into four quadrants to help prioritize:

• Quick Wins (Top-Left): High impact, low effort - prioritize these!
• Major Projects (Top-Right): High impact, high effort - plan carefully
• Fill In Tasks (Bottom-Left): Low impact, low effort - do when you have time
• Money Pit (Bottom-Right): Low impact, high effort - avoid or reconsider

Resetting

Click the "Reset All" button in the header to clear all concepts and start over.

Deployment on Vercel

Option 1: Deploy via Vercel Dashboard

1. Push your code to a GitHub repository
2. Go to Vercel
3. Click "New Project"
4. Import your GitHub repository
5. Vercel will auto-detect Vite settings:
   • Build Command: npm run build
   • Output Directory: dist
6. Click "Deploy"

Option 2: Deploy via Vercel CLI

1. Install Vercel CLI:

npm install -g vercel

2. Deploy:

vercel

3. Follow the prompts to link your project

Environment Configuration

No environment variables are required for this application. It runs entirely in the browser with no backend dependencies.

Technology Stack

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Chart.js - Charting library
• react-chartjs-2 - React wrapper for Chart.js
• chartjs-plugin-dragdata - Drag-and-drop functionality for chart points

Project Structure

impact-effort-visualizer/
├── src/
│   ├── components/
│   │   ├── ConceptTable.tsx       # Table component for data entry
│   │   ├── ConceptTable.css
│   │   ├── ImpactEffortChart.tsx  # Interactive chart component
│   │   └── ImpactEffortChart.css
│   ├── App.tsx                     # Main app component
│   ├── App.css
│   ├── main.tsx                    # React entry point
│   ├── index.css
│   ├── types.ts                    # TypeScript interfaces
│   └── utils.ts                    # Helper functions
├── public/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - feel free to use this project for any purpose.

Acknowledgments

• Inspired by the classic Impact-Effort prioritization matrix
• Built with modern web technologies for a smooth user experience