Real-World Duct UI: Interactive Data Visualization

See how Duct UI powers an interactive single-page application with dynamic SVG visualizations, observable state management, and reactive architecture. A compelling example of building data-rich experiences with sophisticated state synchronization.

🎨 Live Example: eoeo.one

Website: https://eoeo.one/
Source Code: https://github.com/navilan/eoeo

This interactive visualization app showcases Duct UI’s power for building complex, stateful applications that go beyond traditional websites. The entire experience is a single-page application that dynamically generates and updates SVG visualizations based on user interactions through a sophisticated observable state management system.

✨ Key Features Demonstrated

1. Dynamic SVG Visualization

The core feature is a data-driven SVG visualization that responds to user input in real-time through reactive graph generation.

Implementation Highlights:

• Programmatically generated SVG elements via buildActiveGraph()
• Real-time data binding to visual properties
• Smooth transitions and animations
• Responsive scaling for all screen sizes

See it live: Visit eoeo.one and interact with the visualization controls to see the graphics update dynamically.

Technical approach: The visualization engine creates SVG elements through reactive graph building, where state changes automatically trigger graph regeneration and visual updates.

2. Observable State Management

The application implements a sophisticated singleton-based state management system using observables for reactive updates.

Architecture Features:

• Singleton Pattern: Global state access through createAppState() and getAppState()
• Observable Events: lib0/observable for reactive state changes
• Immutable Updates: State cloning prevents direct mutations
• Granular Updates: Specific methods for different state properties

See it in action: Notice how changes in control panels immediately reflect in the visualization through the observable state system.

Source code reference: The state management in app-state.ts implements typed interfaces with comprehensive event handling.

3. Reactive Component Communication

The app demonstrates advanced reactive patterns using observable state and typed event interfaces.

Communication Patterns:

• AppStateEvents Interface: Typed event definitions for state, graph, transform, and search changes
• Observable Subscriptions: Components subscribe to specific state changes
• Automatic Graph Rebuilding: State changes trigger reactive graph updates
• Batch State Updates: Multiple state properties updated atomically

// Example reactive pattern from the implementation
interface AppStateEvents {
  stateChange: (state: AppState) => void
  graphChange: (graph: GraphData) => void
  transformChange: (transform: TransformState) => void
  searchChange: (query: string) => void
}

4. Interactive UI Components with State Binding

The interface uses Duct’s built-in components enhanced with reactive state binding.

Component Integration:

• Drawer Component: Navigation panels with state-driven visibility
• Select Component: Dropdown controls bound to observable state
• Custom Controls: Specialized inputs with granular state updates
• Reactive Layout: Dynamic updates based on state changes

State Integration: Components use methods like updatePerspective(), updateMetric(), and toggleState() for granular state control.

5. Real-Time Reactive Updates

The application provides immediate visual feedback through the observable state system.

Reactive Features:

• Instant visualization changes via buildActiveGraph()
• Smooth state transitions with immutable updates
• Performance-optimized observable subscriptions
• Memory-efficient event handling with cleanup

Check how the visualization responds immediately to control changes through the reactive state management system.

🏗️ Architecture Deep Dive

Observable State Pattern

// Simplified version of the actual implementation
function createAppState(initialState?: Partial<AppState>): AppStateManager {
  const state = { ...defaultState, ...initialState }
  const observable = new Observable<AppStateEvents>()

  return {
    getState: () => state,
    updateState: (updates) => {
      Object.assign(state, updates)
      observable.emit('stateChange', state)
    },
    on: (event, callback) => observable.on(event, callback),
    off: (event, callback) => observable.off(event, callback)
  }
}

Component State Integration

// How components integrate with the observable state
function bind(el, eventEmitter, props) {
  const appState = getAppState()

  // Subscribe to state changes
  appState.on('stateChange', (newState) => {
    updateVisualization(newState)
  })

  appState.on('graphChange', (graph) => {
    renderGraph(graph)
  })

  // Handle user interactions
  function handleControlChange(value) {
    appState.updatePerspective(value)
  }

  return {
    release: () => {
      // Observable cleanup handled automatically
    }
  }
}

🛠️ Technical Stack

• Framework: Duct UI (Client-side rendering)
• State Management: Observable pattern with lib0/observable
• Build Tool: Vite
• Graphics: Native SVG with reactive generation
• Styling: CSS with Tailwind utilities
• Architecture: Singleton state with reactive updates
• Languages: TypeScript, JavaScript
• Package Manager: pnpm

🚀 Running Locally

To explore this example locally:

# Clone the repository
git clone https://github.com/navilan/eoeo.git
cd eoeo

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

💡 Key Takeaways

This real-world example demonstrates:

1. Observable State Management: Implementing reactive state with typed events
2. Singleton Pattern: Global state access with proper initialization
3. Reactive Architecture: Automatic updates through observable subscriptions
4. Component Integration: Seamless binding between Duct components and state
5. SVG Generation: Dynamic graphics through reactive graph building
6. Performance Optimization: Efficient state updates with immutable patterns

🔍 Code Examples to Study

Observable State Implementation

Examine app-state.ts to understand the singleton observable pattern and reactive state management.

Graph Generation Logic

Study how buildActiveGraph() creates dynamic visualizations based on state changes.

Component State Binding

See how Duct components integrate with the observable state system for reactive updates.

Event-Driven Architecture

Observe the typed event interfaces and how components subscribe to specific state changes.

🎉 A Reactive Example

This project showcases Duct UI’s capability for building reactive, data-driven applications with sophisticated state management. The observable pattern creates a clean separation between state and UI while maintaining real-time synchronization.

The combination of singleton state management, observable events, and reactive graph generation creates a smooth, responsive user experience that demonstrates advanced architectural patterns.

Visit eoeo.one to experience the reactive visualization, and explore the source code to understand the observable state implementation.

🤝 Share Your Duct UI Project!

Building reactive applications with Duct UI? We’d love to see your work!

Join the conversation: Share your projects, ask questions, and connect with the Duct UI community in our GitHub Discussions.

Whether you’re building data visualizations, reactive interfaces, or state-driven applications, your examples help demonstrate Duct UI’s architectural capabilities and inspire others.

---

Start a discussion about your Duct UI project at github.com/navilan/duct-ui/discussions