diff --git a/DASHBOARD.md b/DASHBOARD.md index a8c4e6b..133c8c5 100644 --- a/DASHBOARD.md +++ b/DASHBOARD.md @@ -84,13 +84,14 @@ python3 generate_index.py **What it scans:** - `threejs_viz/threejs_viz_*.html` → Three.js demos - `sdg_viz/sdg_viz_*.html` → SDG network visualizations +- `d3_test/d3_viz_*.html` → D3 data visualizations - `mapbox_test/mapbox_globe_*/index.html` → Mapbox globe visualizations - `claude_code_devtools/claude_devtool_*.html` → Claude Code developer tools - `src/ui_hybrid_*.html` → UI single-file components - `src_infinite/ui_hybrid_*.html` → Infinite mode UI - `src_group/ui_hybrid_*/index.html` → Modular UI components -**Current stats:** 101 demos across 6 categories +**Current stats:** 107 demos across 7 categories ### File Structure @@ -111,6 +112,11 @@ infinite-agents/ │ ├── sdg_viz_2.html │ └── ... │ +├── d3_test/ # D3 data visualizations +│ ├── d3_viz_1.html +│ ├── d3_viz_2.html +│ └── ... +│ ├── mapbox_test/ # Mapbox globe visualizations │ ├── mapbox_globe_1/ │ │ └── index.html @@ -314,7 +320,7 @@ python3 -m http.server 8889 firefox http://localhost:8889/ # Check status -find threejs_viz sdg_viz src src_infinite src_group -name "*.html" | wc -l +find threejs_viz sdg_viz d3_test mapbox_test claude_code_devtools src src_infinite src_group -name "*.html" | wc -l ``` ## Future Enhancements @@ -331,4 +337,4 @@ Potential improvements to consider: **Last Updated:** October 9, 2025 **Current Version:** Dynamic auto-discovery -**Total Demos:** 101 (and counting!) +**Total Demos:** 107 (and counting!) diff --git a/claude_code_devtools/README.md b/claude_code_devtools/README.md index 2f90ca5..f600c80 100644 --- a/claude_code_devtools/README.md +++ b/claude_code_devtools/README.md @@ -1,7 +1,7 @@ # Claude Code Developer Tools > **Generated via Web-Enhanced Infinite Agentic Loop** -> 8 progressive self-contained tools for Claude Code observability, search, and coordination +> 11 progressive self-contained tools for Claude Code observability, search, and coordination ## Overview @@ -11,7 +11,7 @@ This collection demonstrates the **web-enhanced infinite agentic loop** pattern, 3. Applies those techniques to build a production-quality developer tool 4. Builds upon patterns from previous iterations -**Total Generated**: 8 tools (258KB) +**Total Generated**: 11 tools (391KB) **Pattern**: Foundation → Intermediate → Advanced → Expert **Approach**: Progressive web learning with parallel agent coordination @@ -179,6 +179,77 @@ This collection demonstrates the **web-enhanced infinite agentic loop** pattern, --- +### Wave 3: Advanced Tools (Iterations 9-11) + +#### 9. Web Worker Event Processor (38KB) +**Web Source**: [MDN Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) + +**Techniques Learned**: +- `postMessage()` for main thread ↔ worker communication +- Background processing pattern for CPU-intensive tasks +- Worker lifecycle management (initialization, termination, error handling) + +**Features**: +- Background analysis of large hook event datasets +- 6 analysis types: pattern detection, error correlation, session metrics, agent comparison, anomaly detection +- Real-time progress updates from worker thread +- Processes thousands of events without blocking UI +- Sample data generator for testing +- Results displayed in organized cards + +**Purpose**: Process massive volumes of Claude Code hook events using Web Workers for background analysis without freezing the interface. + +--- + +#### 10. IndexedDB Hook Event Store (42KB) +**Web Source**: [MDN IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) + +**Techniques Learned**: +- Database versioning and migrations with `onupgradeneeded` +- Compound indexes for multi-field queries `[source_app, timestamp]` +- `IDBKeyRange` for efficient time-based and value-based filtering +- Cursor-based iteration for memory-efficient pagination +- Transaction management for data integrity + +**Features**: +- Persistent IndexedDB storage for hook events +- Real-time WebSocket integration (ws://localhost:4000/stream) +- Advanced multi-field filtering and querying +- Cursor-based pagination (50 events per page) +- Import/export JSON/JSONL files +- Aggregated statistics (events per app/session/type) +- Database size monitoring and cleanup +- Sample data with all event types + +**Purpose**: Production-grade persistent storage for Claude Code hook events with efficient querying and real-time updates. + +--- + +#### 11. D3 Agent Coordination Graph (53KB) +**Web Source**: [Observable D3 Force-Directed Graph](https://observablehq.com/@d3/force-directed-graph) + +**Techniques Learned**: +- Force simulation with multiple forces (`forceLink`, `forceManyBody`, `forceCenter`, `forceCollide`) +- Node drag behavior with `dragstarted`, `dragged`, `dragended` handlers +- Tick-based position updates for physics-based animation +- Zoom and pan with `d3.zoom()` behavior + +**Features**: +- Interactive force-directed graph visualization +- Nodes: Agent sessions, Tools, Subagents, User prompts +- Links: Tool usage, Subagent spawning, Temporal sequences +- Draggable nodes with physics simulation +- Configurable physics (repulsion, link distance, strength) +- Timeline replay with play/pause controls +- Real-time WebSocket updates +- Rich tooltips with event details +- Color-coded by entity type +- Sample multi-agent scenario with 3 subagents + +**Purpose**: Visualize agent coordination patterns, tool usage relationships, and multi-agent workflows using interactive force-directed graphs. + +--- + ## 📊 Progressive Learning Demonstrated ### Foundation Level (1-4) @@ -193,11 +264,23 @@ This collection demonstrates the **web-enhanced infinite agentic loop** pattern, - **Interactivity**: Tooltips, sorting, filtering, animations - **Pattern Matching**: Advanced regex, lookahead/behind, named groups +### Advanced Level (9-11) +- **Web Workers**: Background processing, postMessage communication, worker lifecycle +- **Parallel Analysis**: Pattern detection, error correlation, session metrics +- **Progress Tracking**: Real-time progress updates from worker threads +- **IndexedDB**: Database versioning, compound indexes, cursor pagination, transactions +- **Persistent Storage**: Real-time WebSocket integration, efficient querying +- **Force Simulation**: D3 physics-based layout, draggable nodes, zoom/pan +- **Graph Visualization**: Agent coordination, tool relationships, temporal sequences + ### Knowledge Accumulation Each tool builds on previous learnings: - Tool 6 uses FileReader from Tool 1 - Tool 7 combines Canvas concepts from Tool 3 with D3 from Tool 6 - Tool 8 extends search patterns from Tool 6 with regex power +- Tool 9 processes data from Tool 1 using Web Workers for scalability +- Tool 10 extends storage from Tool 2 with production-grade IndexedDB +- Tool 11 combines D3 from Tools 6-7 with force simulation for graphs - All tools share dark theme UI and developer-focused design --- @@ -227,10 +310,13 @@ Claude Code transcripts are stored at: `~/.claude/projects/[project-id]/transcri ### Recommended Workflow 1. **Tool 1**: Load transcripts initially -2. **Tool 2**: Cache important sessions +2. **Tool 2 or 10**: Cache important sessions (LocalStorage or IndexedDB) 3. **Tool 3**: Visualize timeline 4. **Tool 7**: Analyze productivity metrics 5. **Tool 6 or 8**: Search for specific patterns +6. **Tool 9**: Process large event datasets with Web Workers +7. **Tool 10**: Connect to live observability WebSocket feed +8. **Tool 11**: Visualize multi-agent coordination patterns --- @@ -298,11 +384,11 @@ Phase 5: Quality Validation ## 🔮 Future Waves (Planned) -### Wave 3: Advanced Tools (9-12) -- **Tool 9**: Web Workers for background search processing -- **Tool 10**: IndexedDB for large-scale data storage -- **Tool 11**: Force-directed conversation graph (D3) -- **Tool 12**: Hierarchical sunburst for nested data +### Wave 3: Advanced Tools (9-12) - ✅ 3/4 Complete +- **Tool 9**: ✅ Web Workers for background event processing +- **Tool 10**: ✅ IndexedDB for large-scale hook event storage +- **Tool 11**: ✅ Force-directed agent coordination graph (D3) +- **Tool 12**: Hierarchical sunburst for nested data (planned) ### Wave 4: Coordination Tools (13-16) - **Tool 13**: Broadcast Channel for cross-tab messaging @@ -339,24 +425,27 @@ Phase 5: Quality Validation 6. D3.js Getting Started 7. Observable D3 Bar Chart 8. MDN Regular Expressions +9. MDN Web Workers API +10. MDN IndexedDB API +11. Observable D3 Force-Directed Graph --- ## 🎯 Key Achievements ### Technical -✅ 8 self-contained developer tools (258KB total) +✅ 11 self-contained developer tools (391KB total) ✅ Progressive web learning from real documentation ✅ Zero external dependencies (except D3 CDN) -✅ Modern web APIs: FileReader, LocalStorage, Canvas, SVG, D3 -✅ Advanced patterns: regex lookahead/behind, named groups, data binding +✅ Modern web APIs: FileReader, LocalStorage, Canvas, SVG, D3, Web Workers, IndexedDB, WebSocket +✅ Advanced patterns: regex lookahead/behind, named groups, data binding, background processing, force simulation ### Process ✅ Web-enhanced infinite loop successfully demonstrated ✅ Parallel agent coordination with unique web assignments ✅ Knowledge accumulation across iterations ✅ Documented learning with source attribution -✅ Progressive difficulty: foundation → intermediate +✅ Progressive difficulty: foundation → intermediate → advanced ### Design ✅ Consistent dark theme across all tools @@ -372,8 +461,8 @@ Phase 5: Quality Validation - **HTML5**: Semantic structure, Canvas, SVG - **CSS3**: Grid, Flexbox, Transitions, Custom Properties - **JavaScript ES6+**: Async/await, Classes, Arrow functions -- **D3.js v7**: Data binding, scales, transitions -- **Web APIs**: FileReader, LocalStorage, Canvas, Storage Events +- **D3.js v7**: Data binding, scales, transitions, force simulation +- **Web APIs**: FileReader, LocalStorage, IndexedDB, Canvas, Storage Events, Web Workers, WebSocket - **Regex**: Advanced patterns with lookbehind/ahead --- @@ -401,5 +490,6 @@ These tools are generated as examples of the web-enhanced infinite agentic loop **Generated**: October 9, 2025 **Process**: Web-Enhanced Infinite Agentic Loop -**Total Iterations**: 8 (Foundation + Intermediate) -**Remaining Waves**: 4 (Advanced, Coordination, Expert, ML-Enhanced) +**Total Iterations**: 11 (Foundation + Intermediate + Advanced) +**Wave 3 Status**: 3/4 complete (Tools 9-11 ✅, Tool 12 remaining) +**Remaining Waves**: Wave 3 completion, then Waves 4-6 (Coordination, Expert, ML-Enhanced) diff --git a/claude_code_devtools/claude_devtool_10.html b/claude_code_devtools/claude_devtool_10.html new file mode 100644 index 0000000..4474cb1 --- /dev/null +++ b/claude_code_devtools/claude_devtool_10.html @@ -0,0 +1,1105 @@ + + + + + + IndexedDB Event Store - Claude Code DevTools + + + +
+

🗄️ IndexedDB Event Store

+

Production-grade persistent storage for Claude Code hook events

+
+ +
+ +
+
+
+ Database: Initializing... +
+
+
+ WebSocket: Disconnected +
+
+ Events Stored: 0 +
+
+ DB Size: 0 KB +
+
+ + +
+
+

🔌 WebSocket Connection

+ + + +
+ +
+

📂 Import/Export

+ + + +
+ +
+

🧹 Maintenance

+ + + +
+
+ + +
+

🔍 Advanced Query Interface

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+

📊 Query Results

+
+
+ No events to display. Connect to WebSocket or import events to get started. +
+
+ +
+ + +
+

📈 Event Statistics

+
+ +
+
+ + +
+

About This Tool

+ +

Purpose

+

Production-grade persistent storage system for Claude Code hook events using IndexedDB. Store, query, and analyze thousands of events with advanced filtering, compound indexes, and real-time updates from the observability server.

+ +

Features

+ + +

Web Research Integration

+

Source: MDN - IndexedDB API

+

IndexedDB Techniques Applied:

+ + +

Usage

+
    +
  1. Connect to WebSocket: Click "Connect to Stream" to receive real-time events from ws://localhost:4000/stream
    2. +
  2. Import Events: Upload JSON/JSONL files containing hook events from the observability system
    3. +
  3. Query Events: Use filters to search by app, session, event type, or time range
    4. +
  4. View Statistics: Analyze event distribution across apps, sessions, and event types
    5. +
  5. Export Results: Download filtered events as JSON for backup or analysis
    6. +
  6. Pagination: Navigate through large result sets using Previous/Next buttons
    7. +
+ +

Event Structure

+

Events from the multi-agent observability system have this structure:

+ + +

IndexedDB Schema

+

Database: HookEventsDB, Version: 1

+

Object Store: events

+ +
+
+ + + + + + diff --git a/claude_code_devtools/claude_devtool_11.html b/claude_code_devtools/claude_devtool_11.html new file mode 100644 index 0000000..75884a7 --- /dev/null +++ b/claude_code_devtools/claude_devtool_11.html @@ -0,0 +1,1380 @@ + + + + + + D3 Agent Coordination Graph - Claude Code DevTools + + + + +
+

D3 Agent Coordination Graph

+

Force-directed visualization of multi-agent relationships, tool usage, and coordination patterns

+
+ +
+
+
+ + +
-150
+
+
+ + + +
+
+ + +
0.5
+
+
+ +
+ +
+ + +
+
+
+
+ +
+ + +
+
+
+ +
Disconnected
+ +
+
+ +
+
+
+
0
+
Total Nodes
+
+
+
0
+
Agents
+
+
+
0
+
Tools
+
+
+
0
+
Subagents
+
+
+ +
Connections
+
+
+
0
+
Events
+
+
+
+ +
+

Timeline Replay

+
+ Event 0 / 0 + +
+
+ + + +
+ + +
500ms
+
+
+
+ +
+ +
+
+
+
+
+ +
+

Legend

+
+
+

Node Types

+
+
+ Agent Session +
+
+
+ Tool +
+
+
+ Subagent +
+
+
+ User Prompt +
+
+
+

Link Types

+
+
+ Uses Tool +
+
+
+ Spawns Subagent +
+
+
+ Temporal Sequence +
+
+
+ Error Propagation +
+
+
+

Node Size

+

+ Node size represents activity level (event count). Larger nodes indicate more events/interactions. +

+
+
+

Interactions

+

+ • Drag nodes to reposition
+ • Scroll to zoom in/out
+ • Hover for details
+ • Click to focus +

+
+
+
+ +
+

About This Tool

+ +

Purpose

+

The D3 Agent Coordination Graph visualizes the complex relationships between Claude Code agents, tools, and subagents in multi-agent systems. It uses D3's force-directed graph layout to reveal coordination patterns, tool usage frequencies, and agent spawning hierarchies through an interactive network visualization.

+ +

Features

+ + +

Web Research Integration

+

Source: D3 Force-Directed Graph - Observable

+

Techniques Applied:

+ + +

Graph Data Structure

+

The visualization processes Claude Code hook events into a graph structure:

+ + +

Usage

+
    +
  1. Load Data - Click "Sample Data" to load example multi-agent scenario, or use "Import Events" to load .json/.jsonl hook event files
    2. +
  2. Adjust Physics - Tune node repulsion, link distance, and link strength sliders to optimize layout for your data size
    3. +
  3. Explore Graph - Drag nodes to reposition, scroll to zoom, hover for tooltips showing event counts and details
    4. +
  4. Timeline Replay - Use timeline slider to step through events chronologically, or click Play to auto-replay graph evolution
    5. +
  5. Connect Live - Click "Connect" under WebSocket to stream real-time events from observability server (requires server at localhost:4000)
    6. +
  6. Analyze Patterns - Identify heavily-used tools (large purple nodes), agent hierarchies (green subagent connections), and coordination bottlenecks
    7. +
+ +

Hook Event Mapping

+

The tool processes these Claude Code hook events:

+ + +

Sample Data Scenario

+

The included sample data demonstrates a realistic multi-agent workflow:

+ + +

WebSocket Integration

+

Connect to the Claude Code hooks observability server for real-time updates:

+
    +
  1. Start the observability server: ./scripts/start-system.sh
    2. +
  2. Click "Connect" in the WebSocket Connection section
    3. +
  3. Graph will update automatically as new events arrive
    4. +
  4. New nodes animate in with transitions, links strengthen with repeated usage
    5. +
  5. Compatible with the multi-agent observability system architecture
    6. +
+
+
+ + + + + + diff --git a/claude_code_devtools/claude_devtool_9.html b/claude_code_devtools/claude_devtool_9.html new file mode 100644 index 0000000..616e96a --- /dev/null +++ b/claude_code_devtools/claude_devtool_9.html @@ -0,0 +1,998 @@ + + + + + + Web Worker Event Processor - Claude Code DevTools + + + +
+

⚙️ Web Worker Event Processor

+

Background analysis of Claude Code hook events using Web Workers

+
+ +
+
+

📥 Load Hook Events

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+

🔄 Worker Status

+
+
+ No worker initialized +
+ +
+ +
+

📊 Analysis Results

+
+
+

Load event data and run analysis to see results

+
+
+
+ +
+

About This Tool

+ +

Purpose

+

Process large volumes of Claude Code hook events in the background using Web Workers. Analyze patterns, detect errors, compare agent behavior, and identify anomalies without blocking the UI.

+ +

Features

+ + +

Web Research Integration

+

Source: MDN Web Workers API Documentation

+

Techniques Applied:

+ + +

Usage

+
    +
  1. Click "Load Sample Data" to test with example hook events, or upload your own JSON/JSONL file
    2. +
  2. Select an analysis type (Pattern Detection, Error Correlation, etc.)
    3. +
  3. Click "Start Analysis" to spawn a Web Worker and begin background processing
    4. +
  4. Watch the progress bar update in real-time as the worker processes events
    5. +
  5. Review results displayed in organized cards when analysis completes
    6. +
  6. Try different analysis types to explore various insights
    7. +
+ +

Hook Event Structure

+

Events follow this structure:

+
+ 
{
+  "source_app": "demo-agent",
+  "session_id": "abc123",
+  "hook_event_type": "PreToolUse|PostToolUse|UserPromptSubmit|Notification|Stop|SubagentStop",
+  "payload": {
+    "tool_name": "Bash",
+    "tool_input": {...},
+    "tool_output": {...}
+  },
+  "timestamp": 1696867200000
+}
+
+ +

Analysis Types

+ +
+
+ + + + + + diff --git a/generate_index.py b/generate_index.py index 881ac35..e2eefc1 100755 --- a/generate_index.py +++ b/generate_index.py @@ -85,6 +85,7 @@ def generate_demo_data(): demos = { 'threejs': [], 'sdg': [], + 'd3': [], 'mapbox': [], 'claudeDevTools': [], 'uiSingle': [], @@ -121,6 +122,27 @@ def generate_demo_data(): 'techniques': ['D3.js', 'Force Simulation'] }) + # Scan D3 demos + d3_files = scan_directory('d3_test', 'd3_viz_*.html') + for i, filepath in enumerate(d3_files, 1): + title = extract_title_from_html(filepath) or f"D3 Viz {i}" + description = extract_description_from_html(filepath) + + # Remove "D3 Visualization N: " prefix if present + if title.startswith('D3 Visualization'): + parts = title.split(':', 1) + if len(parts) > 1: + title = parts[1].strip() + + demos['d3'].append({ + 'number': i, + 'title': title, + 'description': description, + 'path': filepath, + 'type': 'D3 Visualization', + 'techniques': ['D3.js', 'Data Visualization', 'SVG'] + }) + # Scan Mapbox Globe demos mapbox_dirs = sorted(Path('mapbox_test').glob('mapbox_globe_*/index.html')) if os.path.exists('mapbox_test') else [] for i, filepath in enumerate(mapbox_dirs, 1): @@ -206,6 +228,7 @@ def generate_index_html(demos): total_demos = sum(len(demos[cat]) for cat in demos) threejs_count = len(demos['threejs']) sdg_count = len(demos['sdg']) + d3_count = len(demos['d3']) mapbox_count = len(demos['mapbox']) devtools_count = len(demos['claudeDevTools']) ui_count = len(demos['uiSingle']) + len(demos['uiModular']) @@ -289,6 +312,7 @@ def main(): print(f"\n📊 Found demos:") print(f" • Three.js: {len(demos['threejs'])}") print(f" • SDG Networks: {len(demos['sdg'])}") + print(f" • D3 Visualizations: {len(demos['d3'])}") print(f" • Mapbox Globes: {len(demos['mapbox'])}") print(f" • Claude DevTools: {len(demos['claudeDevTools'])}") print(f" • UI Single File: {len(demos['uiSingle'])}") diff --git a/index.html b/index.html index 7beec41..5708dfe 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + @@ -374,11 +375,11 @@
-
101
+
107
Total Demos
-
6
+
7
Categories
@@ -400,6 +401,7 @@ + @@ -433,6 +435,19 @@
+ +
+
+
📊
+
+

D3 Data Visualizations

+

Interactive SVG-based data visualizations showcasing D3.js selection patterns and techniques

+
+
3 demos
+
+
+
+
@@ -454,7 +469,7 @@

Claude Code Developer Tools

Interactive developer tools for Claude Code sessions, transcripts, and analytics

-
8 demos
+
11 demos
@@ -697,6 +712,44 @@ ] } ], + "d3": [ + { + "number": 1, + "title": "Interactive Technology Adoption Dashboard", + "description": "Interactive demo", + "path": "d3_test/d3_viz_1.html", + "type": "D3 Visualization", + "techniques": [ + "D3.js", + "Data Visualization", + "SVG" + ] + }, + { + "number": 2, + "title": "Multi-Scale Temperature Analysis", + "description": "Interactive demo", + "path": "d3_test/d3_viz_2.html", + "type": "D3 Visualization", + "techniques": [ + "D3.js", + "Data Visualization", + "SVG" + ] + }, + { + "number": 3, + "title": "Global Coffee Production Analysis", + "description": "Interactive demo", + "path": "d3_test/d3_viz_3.html", + "type": "D3 Visualization", + "techniques": [ + "D3.js", + "Data Visualization", + "SVG" + ] + } + ], "mapbox": [ { "number": 1, @@ -821,6 +874,28 @@ }, { "number": 2, + "title": "IndexedDB Event Store", + "description": "Interactive demo", + "path": "claude_code_devtools/claude_devtool_10.html", + "type": "DevTool", + "techniques": [ + "Developer Tools", + "Web APIs" + ] + }, + { + "number": 3, + "title": "D3 Agent Coordination Graph", + "description": "Interactive demo", + "path": "claude_code_devtools/claude_devtool_11.html", + "type": "DevTool", + "techniques": [ + "Developer Tools", + "Web APIs" + ] + }, + { + "number": 4, "title": "Session Cache Manager", "description": "Interactive demo", "path": "claude_code_devtools/claude_devtool_2.html", @@ -831,7 +906,7 @@ ] }, { - "number": 3, + "number": 5, "title": "Session Timeline Visualizer", "description": "Interactive demo", "path": "claude_code_devtools/claude_devtool_3.html", @@ -842,7 +917,7 @@ ] }, { - "number": 4, + "number": 6, "title": "Dashboard Layout Tool", "description": "Interactive demo", "path": "claude_code_devtools/claude_devtool_4.html", @@ -853,7 +928,7 @@ ] }, { - "number": 5, + "number": 7, "title": "Tool Usage Chart", "description": "Interactive demo", "path": "claude_code_devtools/claude_devtool_5.html", @@ -864,7 +939,7 @@ ] }, { - "number": 6, + "number": 8, "title": "Advanced Transcript Search", "description": "Interactive demo", "path": "claude_code_devtools/claude_devtool_6.html", @@ -875,7 +950,7 @@ ] }, { - "number": 7, + "number": 9, "title": "Analytics Dashboard", "description": "Interactive demo", "path": "claude_code_devtools/claude_devtool_7.html", @@ -886,7 +961,7 @@ ] }, { - "number": 8, + "number": 10, "title": "Advanced Pattern Search", "description": "Interactive demo", "path": "claude_code_devtools/claude_devtool_8.html", @@ -895,6 +970,17 @@ "Developer Tools", "Web APIs" ] + }, + { + "number": 11, + "title": "Web Worker Event Processor", + "description": "Interactive demo", + "path": "claude_code_devtools/claude_devtool_9.html", + "type": "DevTool", + "techniques": [ + "Developer Tools", + "Web APIs" + ] } ], "uiSingle": [ @@ -1663,6 +1749,7 @@ // Initialize grids document.getElementById('threejs-grid').innerHTML = demos.threejs.map(d => renderDemoCard(d, 'threejs')).join(''); document.getElementById('sdg-grid').innerHTML = demos.sdg.map(d => renderDemoCard(d, 'sdg')).join(''); + document.getElementById('d3-grid').innerHTML = demos.d3.map(d => renderDemoCard(d, 'd3')).join(''); document.getElementById('mapbox-grid').innerHTML = demos.mapbox.map(d => renderDemoCard(d, 'mapbox')).join(''); document.getElementById('devtools-grid').innerHTML = demos.claudeDevTools.map(d => renderDemoCard(d, 'claudeDevTools')).join(''); document.getElementById('ui-single-grid').innerHTML = demos.uiSingle.map(d => renderDemoCard(d, 'ui-single')).join(''); @@ -1717,7 +1804,7 @@ }); // Update stats - document.getElementById('totalDemos').textContent = demos.threejs.length + demos.sdg.length + demos.mapbox.length + demos.claudeDevTools.length + demos.uiSingle.length + demos.uiModular.length; + document.getElementById('totalDemos').textContent = demos.threejs.length + demos.sdg.length + demos.d3.length + demos.mapbox.length + demos.claudeDevTools.length + demos.uiSingle.length + demos.uiModular.length; document.getElementById('threejsCount').textContent = demos.threejs.length; document.getElementById('uiCount').textContent = demos.uiSingle.length + demos.uiModular.length; diff --git a/sdg_viz/index.html b/sdg_viz/index.html new file mode 100644 index 0000000..1e20ccc --- /dev/null +++ b/sdg_viz/index.html @@ -0,0 +1,444 @@ + + + + + + SDG Network Visualizations - Dashboard + + + +
+
+

SDG Network Visualizations

+

Progressive Web-Enhanced Learning with D3.js

+
+
+ 14 + Iterations +
+
+ 9 + APIs Integrated +
+
+ 25+ + D3 Techniques +
+
+
+ +

Foundation (Iterations 1-5)

+
+ +
+
#1
+

UN SDG Goals Network

+

Basic force-directed graph with UN SDG API. Learn force simulation, drag interactions, and tooltips.

+
+ Foundation + 📊 17 nodes + ⚡ D3.js v7 +
+ View Demo → +
+ + +
+
#2
+

Environmental Indicators Network

+

World Bank API with 5 environmental indicators. Multi-property encoding with color scales and curved edges.

+
+ Foundation + 🌍 15 countries + 🎨 Color scales +
+ View Demo → +
+ + +
+
#3
+

Global Biodiversity Network

+

GBIF biodiversity data with advanced interactions. Search, filter, click highlighting, and side panel details.

+
+ Foundation + 🦋 37 species + 🔍 Search +
+ View Demo → +
+ + +
+
#4
+

Air Quality with Smart Caching

+

OpenAQ API with localStorage caching. Fixed color encoding issues. Loads instantly on repeat visits.

+
+ Foundation + 💾 Cached + ⚡ <2s load +
+ View Demo → +
+ + +
+
#5
+

Advanced Color Encodings

+

Multi-dimensional color encoding: fill, border, opacity, size. 8+ color schemes with dynamic switching.

+
+ Foundation + 🌈 8 schemes + 🎨 Multi-encoding +
+ View Demo → +
+
+ +

Intermediate (Iterations 6-9)

+
+ +
+
#6
+

ETL Pipeline with Embedded Data

+

Complete ETL: Extract → Transform → Load. Multi-year data (2020-2022) embedded. Zero API calls, <500ms load.

+
+ Intermediate + 📦 ETL + 💾 Embedded +
+ View Demo → +
+ + +
+
#7
+

Brushing & Linking (4 Views)

+

Exploratory analysis with coordinated views: network, bar chart, scatter plot, data table. Brush to filter.

+
+ Intermediate + 🖱️ Brush + 🔗 4 views +
+ View Demo → +
+ + +
+
#8
+

Hierarchical SDG Taxonomy

+

Collapsible hierarchy with 4 layouts: Force, Tree, Radial, Cluster. Smooth 500ms transitions between layouts.

+
+ Intermediate + 🌳 Hierarchy + 🔄 4 layouts +
+ View Demo → +
+ + +
+
#9
+

High Performance Canvas (1000 nodes)

+

Canvas rendering for 1000 nodes at 60fps. Quadtree indexing, viewport culling, LOD rendering, progressive loading.

+
+ Intermediate + 🎨 Canvas + ⚡ 60fps +
+ View Demo → +
+
+ +

Advanced - Practical Dashboards (Iterations 10-14)

+
+ +
+
#10
+

Bipartite Dashboard (Topics ↔ Sources)

+

Practical bipartite graph. Blue topics + Red sources. Large nodes with Sonic-style borders. NO entrance animations.

+
+ Advanced + 🎨 Sonic colors + 📊 Bipartite +
+ View Demo → +
+ + +
+
#11
+

Enhanced Side Panels & Information

+

Rich side panels with 6 content sections. Real API links (World Bank, NASA, WHO). Click connections to explore.

+
+ Advanced + 📋 Rich panels + 🔗 Real APIs +
+ View Demo → +
+ + +
+
#12
+

Refined Aesthetics & Beautiful Nodes

+

Large beautiful nodes (30px). Radial gradients, inner glow, drop shadows. Perfect Sonic aesthetic with bold borders.

+
+ Advanced + 🌟 Beautiful + 🎨 Gradients +
+ View Demo → +
+ + +
+
#13
+

Advanced Filtering & Exploration

+

Topic filters, source filters, real-time search, connection strength slider. 68 nodes with smart exploration tools.

+
+ Advanced + 🔍 Search + ☑️ Filters +
+ View Demo → +
+ + +
+
#14
+

Production-Ready Dashboard ⭐

+

Export PNG/SVG, share links, table view toggle, keyboard shortcuts (ESC, /), accessibility, responsive design.

+
+ Expert + 📸 Export + ⌨️ Shortcuts +
+ View Demo → +
+
+ + +
+ + diff --git a/watch_and_update.sh b/watch_and_update.sh new file mode 100755 index 0000000..c1322be --- /dev/null +++ b/watch_and_update.sh @@ -0,0 +1,52 @@ +#!/bin/bash +# watch_and_update.sh - Auto-regenerate dashboard when demos change +# +# Usage: +# ./watch_and_update.sh +# +# Watches demo directories and regenerates index.html automatically + +echo "🔍 Watching for changes in demo directories..." +echo "Press Ctrl+C to stop" +echo "" + +# Function to regenerate +regenerate() { + echo "📝 Change detected - regenerating dashboard..." + python3 generate_index.py + echo "✅ Dashboard updated!" + echo "" +} + +# Initial generation +regenerate + +# Watch for changes (requires inotify-tools: sudo apt install inotify-tools) +if command -v inotifywait &> /dev/null; then + while true; do + # Watch for new HTML files or changes to existing ones + inotifywait -q -e create,modify,delete -r \ + threejs_viz/ sdg_viz/ d3_test/ mapbox_test/ claude_code_devtools/ src/ src_infinite/ src_group/ 2>/dev/null || break + + # Regenerate after a short delay to batch changes + sleep 1 + regenerate + done +else + echo "⚠️ inotifywait not found. Install with: sudo apt install inotify-tools" + echo "Falling back to polling mode (checks every 5 seconds)..." + echo "" + + # Polling fallback + last_count=$(find threejs_viz sdg_viz d3_test mapbox_test claude_code_devtools src src_infinite src_group -name "*.html" 2>/dev/null | wc -l) + + while true; do + sleep 5 + current_count=$(find threejs_viz sdg_viz d3_test mapbox_test claude_code_devtools src src_infinite src_group -name "*.html" 2>/dev/null | wc -l) + + if [ "$current_count" != "$last_count" ]; then + regenerate + last_count=$current_count + fi + done +fi