Data Viz

Transform your data into stunning, interactive visualizations directly in Adobe Express with AI-powered chart recommendations

Adobe Express Hackathon 2025 AI-Powered Interactive Charts CSV/XLSX Support
Watch Live Demo Get In Touch

🚀 What We've Built

A comprehensive data visualization solution that brings the power of AI and interactive charts directly to Adobe Express

AI-Powered Recommendations

Upload your data and get intelligent chart suggestions based on data structure. Our AI analyzes your dataset and recommends the most suitable visualization types for univariate, bivariate, and multivariate analysis.

Universal File Support

Seamlessly upload and process CSV and XLSX files with drag-and-drop functionality. Built-in validation ensures your data is properly formatted and ready for visualization.

Interactive Visualizations

Create stunning, responsive charts using Observable Plot. Support for bar charts, line graphs, scatter plots, histograms, heatmaps, and more with real-time customization.

Real-time Customization

Live preview and styling controls allow you to customize colors, dimensions, margins, and other visual properties. See changes instantly as you adjust your chart's appearance.

Native Adobe Integration

Seamlessly insert generated charts directly into Adobe Express documents. Charts are converted to high-quality PNG images that maintain their visual integrity.

SVG Interaction

Real-time interaction with SVG elements allows for dynamic chart manipulation and enhanced user experience. Charts remain scalable and maintain crisp quality at any size.

🛠️ Built With Modern Technology

Leveraging cutting-edge tools and frameworks to deliver exceptional performance and user experience

React 18+

Modern UI with hooks and efficient state management

Observable Plot

High-quality, interactive visualization library

Custom LLM

AI-powered chart recommendations and insights

Adobe APIs

Native Express integration via Document Sandbox

🎥 See It In Action

Watch how easy it is to transform your data into beautiful visualizations

Watch on YouTube

📸 Live Demo Gallery

Real screenshots from our working demo - see the add-on in action with actual data visualizations

Demo Screenshot 1

Click to view

Demo Screenshot 2

Click to view

Demo Screenshot 3

Click to view

Demo Screenshot 4

Click to view

Demo Screenshot 5

Click to view

Demo Screenshot 6

Click to view

Demo Screenshot 7

Click to view

Demo Screenshot 8

Click to view

Demo Screenshot 9

Click to view

These screenshots show our add-on processing real datasets and generating various chart types with AI recommendations

× Zoomed Image

Press ESC or click X to close

🗺️ Development Roadmap

Our journey from hackathon MVP to production-ready solution

Current Achievements

Hackathon MVP Completed

✅ Core file upload functionality
✅ AI-powered chart recommendations
✅ Observable Plot integration
✅ Adobe Express insertion
✅ Real-time SVG interaction

Next Phase (Aug - Sep)

Enhanced User Experience In Progress

🔄 Faster file processing algorithms
🔄 Optimized LLM response times
🔄 Enhanced AI recommendation accuracy
🔄 Additional chart types and styles
🔄 Performance optimizations

Exciting Future Features

Full-Screen Chart Comparison

Compare multiple charts side-by-side in full-screen mode with advanced filtering and interaction capabilities.

Advanced Interactivity

Real-time chart manipulation, drill-down capabilities, and dynamic data filtering for deeper insights.

User Feedback Integration

Community-driven features based on user feedback and usage analytics to continuously improve the experience.

Comprehensive Documentation

Detailed guides, tutorials, API references, and best practices for maximizing the add-on's potential.

🚀 Planning for Shipping

Our 6-week sprint to deliver a production-ready data visualization add-on by mid-September 2025

6-Week Development Sprint

From hackathon prototype to market-ready Adobe Express add-on in just 5-6 weeks

Week 1 - Core AI Integration
  • Set up secure Google Gemini API access with backend endpoint
  • Implement structured prompt format for chart recommendations
  • Parse CSV/XLSX data into AI-compatible JSON schema
  • Build AI response parser with fallback handling
Week 2 - Chart Engine & UI Polish
  • Complete "Auto-Generate Charts" functionality
  • Build interactive UI for chart customization
  • Implement real-time Observable Plot integration
  • Add "Regenerate Recommendations" feature
  • Connect AI suggestions to actionable UI controls
Week 3 - Better chart recommendations and Analysis
  • Add more charts options.
  • Recommend the best chart types for different data scenarios
  • Suggest charts based on the Express Document's mood and feel
  • Full Screen chart Analysis Dashboard
  • Interactive chart exploration features
Week 4 - LLM Feature Extension
  • User interaction with llm directly to generate charts for their choice
  • Advanced chart customization with Natural Language Processing
  • Implement user feedback loop for continuous improvement
  • Interaction to with llm to tweak chart parameters and styles
Week 5 - Production Deployment and QA
  • Comprehensive testing across different data formats
  • Cross-browser compatibility for Adobe Express
  • Optimize performance for large datasets (10K+ rows)
  • Set up monitoring, error logging, and analytics
  • Create user documentation and video tutorials
Week 6 - Launch & User Feedback
  • Public launch and marketing campaign
  • Collect user feedback and usage patterns
  • Implement "Undo" and chart history features
  • Community outreach to design creators
  • Prepare for post-launch feature iterations

🎯 Target Launch: Mid-September 2025

August

Core Development
Weeks 1-3

Early September

Testing & Deployment
Weeks 4-5

Mid-September

Launch & Feedback
Week 6

Aggressive but Achievable Timeline Focus on Core Features First Community-Driven Development

📋 How We're Planning to Ship Our Product

Detailed roadmap and technical implementation strategy for delivering a world-class data visualization solution

Phase 1: UI/UX Revolution

Transforming the user experience with advanced visualization capabilities

Full-Screen Display Styles

Implementing immersive full-screen visualization modes that allow users to:

  • Maximize Chart Clarity: View complex datasets without UI distractions
  • Enhanced Detail Analysis: Zoom and pan capabilities for large datasets
  • Professional Presentation Mode: Clean, distraction-free chart displays
  • Multi-Monitor Support: Extend charts across multiple displays
Side-by-Side Chart Comparison

Advanced comparison features for data analysis:

  • Synchronized Interactions: Hover and selection sync across charts
  • Visual Diff Highlighting: Automatic difference detection and highlighting
  • Custom Layout Engine: Flexible arrangement of multiple visualizations
  • Export Comparisons: Save combined visualizations as single images

Phase 2: Advanced Interactive Controls

Granular chart customization with real-time feedback

Granular Chart Settings
  • Real-time axis customization
  • Dynamic color palette selection
  • Advanced typography controls
  • Custom Title setting
  • Interactive Margins and Paddings settings
Smart Defaults
  • AI-suggested optimal settings
  • Context-aware control visibility
  • Progressive disclosure of advanced options
  • User preference learning
  • One-click style presets

Phase 3: Intelligent User Feedback Loop

Revolutionary AI-powered chart refinement through natural language interaction

LLM-Powered Chart Refinement
Implementation Strategy:
  1. Natural Language Processing: Parse user feedback like "Make the bars thicker" or "Change to a pie chart"
  2. Intent Recognition: Advanced NLP to understand styling, data, and layout requests
  3. Real-time Application: Instant chart updates based on conversational input
  4. Context Awareness: LLM remembers previous requests and chart history
  5. Suggestion Engine: Proactive recommendations for chart improvements
Intelligent Interaction Examples
👤 User: "This chart is too cluttered"
🤖 AI: "I'll reduce data point density and increase spacing. Would you like me to group similar categories?"
👤 User: "Make it more colorful"
🤖 AI: "Applied vibrant color palette. Should I also add gradient effects for better visual impact?"
👤 User: "Show trends better"
🤖 AI: "Added trend lines and changed to line chart. Would you like forecast projections?"

📞 Get In Touch

Have questions, feedback, or want to collaborate? We'd love to hear from you!

Email

For inquiries, feedback, and collaboration opportunities

Send Email

Public Repository

Source code and documentation for the Data Viz Add-on project

View Repository

Hackathon Submission

View our official submission on Devpost

View Submission

Project Information

Category

Best AI-enhanced Experience

Status

Active Development

Version

v1.0.0-hackathon

Release Date

July 21, 2025