"Observable in Claude" - Powered by ClaudeWolf

Create beautiful data visualizations with Observable Framework through conversational AI agents inspired by Mike Bostock's design philosophy. Seamlessly integrated with ClaudeWolf for intelligent browser management and local development.

This plugin brings Mike Bostock's visualization principles directly into your development workflow:

• Purpose is insight, not pictures - Focus on the story your data tells
• Maximize data-ink ratio - Remove clutter, emphasize data
• Perceptually uniform colors - Use accessible, meaningful color scales
• Elegant, functional code - Write declarative, composable visualizations
• Web standards first - Build on the platform, not against it

1. Observable-Bostock - Design-focused agent embodying Mike Bostock's aesthetic

   • Guides you through visualization design
   • Ensures adherence to design principles
   • Generates clean, elegant code
   • Playful, educational conversation style

2. Observable-TechSupport - Technical troubleshooting specialist

   • Debugging Observable runtime issues
   • Performance optimization
   • Package integration help
   • Error resolution

3. Observable-PowerUser - Advanced patterns expert

   • Complex interactions (drag, zoom, brush)
   • Custom D3 integration
   • Performance optimization
   • Reusable component design

Each agent exists in two synchronized formats:

• Claude Code Agent (.agent.yaml) - Defines capabilities, tools, workflows
• ElizaOS Character (.character.json) - Defines personality, tone, conversation style

This innovative architecture combines powerful tool integration with rich, engaging AI interactions.

• 📝 Guided Notebook Creation - Conversational design process
• 🎨 Template Library - Start from proven patterns
• 👁️ Local Preview Server - Hot-reload development with live updates
• ✅ Design Validation - Automatic checks against Bostock principles
• 🎯 Style Enforcement - Ensure consistency across notebooks
• 📊 Multiple Templates - Chart, dashboard, report, custom

• Claude Code CLI installed
• Node.js 18+ and npm

# Clone or download this plugin
cd ~/.claude/plugins
git clone <repository-url> observable-plugin

# Install dependencies
cd observable-plugin
npm install

# Link plugin to Claude Code
claude plugin link observable-plugin

# Start guided creation with Observable-Bostock
/obs-create my-visualization

# Or use a template
/obs-create sales-dashboard --template=dashboard

The agent will guide you through:

• Understanding your data
• Choosing visual encodings
• Designing interactions
• Generating the notebook
• Validating against design principles

# Launch hot-reload preview server
/obs-preview

# Opens at http://localhost:3000
# Auto-refreshes on file changes

Talk with Observable-Bostock to refine your design:

You: "The colors feel too vibrant"
Bostock: "Let's try a more subtle palette. Switching to the 'Cool'
         scheme which uses blues and greens - easier on the eyes and
         great for continuous data..."

You: "Can we add tooltips?"
Bostock: "Absolutely! Tooltips are essential for accessibility.
         Adding tip: true to your marks..."

Clean, single-visualization notebook:

• Bar, line, scatter, area charts
• Perceptually uniform colors
• Tooltips enabled
• Responsive design

Multi-panel dashboard with:

• Input controls (select, range, checkbox)
• Cross-filtering between views
• Click interactions
• Summary statistics
• Reactive state management

Long-form report with:

• Narrative text and visualizations
• Multiple sections
• Table of contents
• Print-friendly layout

Start from scratch with full flexibility.

• ✅ Perceptually uniform scales (Viridis, Plasma, Cool, Warm)
• ✅ WCAG AA accessibility (4.5:1 contrast)
• ✅ Limited palette (5-7 colors max)
• ❌ Rainbow scales (perceptually non-uniform)

• ✅ Remove unnecessary gridlines
• ✅ Use whitespace effectively
• ✅ Minimize non-data elements
• ❌ Excessive borders, backgrounds, decorations

• ✅ Smooth easing functions
• ✅ Immediate feedback
• ✅ Keyboard navigation
• ✅ Touch-friendly targets

• ✅ Declarative, functional style
• ✅ Observable Plot for common charts
• ✅ D3 for custom needs
• ✅ Clear, commented code

• /obs-create [name] [--template=<type>] - Create new notebook
• /obs-preview [--port=3000] - Launch preview server
• /obs-publish [name] - Export for hosting
• /obs-style [file] - Validate design principles

You: I want to visualize sales data by region over time

Bostock: Great! Let's think about what insights matter most.
         Are you comparing regions? Showing trends? Both?

         For regional comparison + time, I'd suggest small multiples:
         each region gets its own line chart, arranged in a grid.
         This makes comparison easy while preserving temporal patterns.

         Want to see a quick sketch?

You: Yes, show me

Bostock: [generates interactive example with sample data]

         Notice how:
         - Same scales across all panels (fair comparison)
         - Muted colors (focus on patterns, not aesthetics)
         - Clear labels (no legend needed)
         - Tooltips for exact values

         What do you think? Should we adjust anything?

You: My chart isn't updating when I change the input

TechSupport: Let me check your reactive dependencies...

             Ah, I see the issue! You're using a regular variable
             instead of a reactive one. In Observable, cells need to
             reference inputs directly or through derived cells.

             Change this:
             const data = myInput.value;

             To this:
             const data = myInput;

             Observable's runtime will now track the dependency!

• Design Philosophy
• Agent System
• Template Guide
• API Reference
• Contributing

We welcome contributions! This plugin is designed to be extensible:

• Add new agents (model them on power users or experts)
• Create additional templates
• Enhance style validation rules
• Improve preview capabilities

See CONTRIBUTING.md for details.

MIT License - see LICENSE

• Mike Bostock - For Observable Framework, D3.js, and teaching us all how to visualize data
• Observable HQ - For the incredible platform and tools
• Claude Code - For the extensible plugin architecture
• ElizaOS - For character file format inspiration

• Observable Framework
• Mike Bostock's Notebooks
• D3.js
• Observable Plot

Built with ❤️ for the data visualization community