2365 lines
100 KiB
HTML
2365 lines
100 KiB
HTML
<!-- Auto-generated: 2025-10-09 18:32:26 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-09 18:45:46 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-09 18:56:45 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-09 19:49:20 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-10 16:28:22 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-10 17:56:39 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-10 18:00:44 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-14 16:10:03 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-11-23 07:51:18 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-25 08:59:58 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-11-08 00:50:18 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-11-08 02:26:00 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-11-08 02:42:34 by generate_index.py -->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Infinite Agents - Demo Dashboard</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--primary: #6366f1;
|
||
--primary-dark: #4f46e5;
|
||
--secondary: #8b5cf6;
|
||
--success: #10b981;
|
||
--warning: #f59e0b;
|
||
--danger: #ef4444;
|
||
--dark: #1e293b;
|
||
--dark-light: #334155;
|
||
--light: #f8fafc;
|
||
--border: #e2e8f0;
|
||
--text: #0f172a;
|
||
--text-muted: #64748b;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* Header */
|
||
header {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
padding: 30px 0;
|
||
margin-bottom: 40px;
|
||
border-radius: 20px;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.header-content {
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.2rem;
|
||
color: var(--text-muted);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Stats Bar */
|
||
.stats-bar {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
padding: 25px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 2.5rem;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.stat-label {
|
||
color: var(--text-muted);
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* Search & Filter */
|
||
.controls {
|
||
background: white;
|
||
padding: 25px;
|
||
border-radius: 15px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
#searchInput {
|
||
flex: 1;
|
||
padding: 15px 20px;
|
||
border: 2px solid var(--border);
|
||
border-radius: 10px;
|
||
font-size: 1rem;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
#searchInput:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.filter-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-btn {
|
||
padding: 10px 20px;
|
||
border: 2px solid var(--border);
|
||
background: white;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.filter-btn:hover {
|
||
border-color: var(--primary);
|
||
color: var(--primary);
|
||
}
|
||
|
||
.filter-btn.active {
|
||
background: var(--primary);
|
||
color: white;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
/* Category Sections */
|
||
.category-section {
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.category-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
margin-bottom: 25px;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.category-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
||
}
|
||
|
||
.category-title {
|
||
flex: 1;
|
||
}
|
||
|
||
.category-title h2 {
|
||
font-size: 1.8rem;
|
||
color: var(--text);
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.category-title p {
|
||
color: var(--text-muted);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.category-count {
|
||
background: var(--light);
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* Demo Grid */
|
||
.demo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 25px;
|
||
}
|
||
|
||
.demo-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.demo-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* Screenshot Preview in Card */
|
||
.demo-screenshot {
|
||
width: 100%;
|
||
height: 200px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.demo-screenshot img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.demo-card:hover .demo-screenshot img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.demo-screenshot-placeholder {
|
||
color: white;
|
||
font-size: 4rem;
|
||
opacity: 0.5;
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.demo-screenshot-placeholder-text {
|
||
font-size: 0.9rem;
|
||
opacity: 0.7;
|
||
margin-top: 10px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.demo-screenshot-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.demo-card:hover .demo-screenshot-overlay {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.demo-screenshot-overlay span {
|
||
background: white;
|
||
color: var(--primary);
|
||
padding: 10px 20px;
|
||
border-radius: 25px;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.demo-card:hover .demo-screenshot-overlay span {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.demo-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
|
||
}
|
||
|
||
.demo-header {
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||
}
|
||
|
||
.demo-number {
|
||
display: inline-block;
|
||
background: var(--primary);
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 15px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.demo-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.demo-description {
|
||
color: var(--text-muted);
|
||
font-size: 0.9rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.demo-footer {
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.demo-type {
|
||
font-size: 0.85rem;
|
||
color: var(--text-muted);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.demo-link {
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
transition: gap 0.3s ease;
|
||
}
|
||
|
||
.demo-link:hover {
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
padding: 30px;
|
||
margin-top: 50px;
|
||
border-radius: 20px;
|
||
text-align: center;
|
||
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
footer p {
|
||
color: var(--text-muted);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.github-link {
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.demo-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stats-bar {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
/* Loading State */
|
||
.loading {
|
||
text-align: center;
|
||
padding: 50px;
|
||
color: white;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Hidden */
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="header-content">
|
||
<h1>🤖 Infinite Agents</h1>
|
||
<p class="subtitle">Progressive AI-Generated Demo Gallery</p>
|
||
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
||
Exploring web-enhanced infinite agentic loops for progressive learning
|
||
</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Statistics -->
|
||
<div class="stats-bar">
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="totalDemos">153</div>
|
||
<div class="stat-label">Total Demos</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">8</div>
|
||
<div class="stat-label">Categories</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="threejsCount">13</div>
|
||
<div class="stat-label">Three.js 3D</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="uiCount">65</div>
|
||
<div class="stat-label">UI Components</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Search & Filter Controls -->
|
||
<div class="controls">
|
||
<div class="search-box">
|
||
<input type="text" id="searchInput" placeholder="🔍 Search demos by name, type, or technique...">
|
||
</div>
|
||
<div class="filter-buttons">
|
||
<button class="filter-btn active" data-filter="all">All Demos</button>
|
||
<button class="filter-btn" data-filter="threejs">Three.js 3D</button>
|
||
<button class="filter-btn" data-filter="sdg">SDG Networks</button>
|
||
<button class="filter-btn" data-filter="d3">D3 Visualizations</button>
|
||
<button class="filter-btn" data-filter="mapbox">Mapbox Globes</button>
|
||
<button class="filter-btn" data-filter="vaccineTimeseries">Vaccine Timelines</button>
|
||
<button class="filter-btn" data-filter="claudeDevTools">Claude DevTools</button>
|
||
<button class="filter-btn" data-filter="ui-single">UI Hybrid (Single File)</button>
|
||
<button class="filter-btn" data-filter="ui-modular">UI Hybrid (Modular)</button>
|
||
<button class="filter-btn" data-filter="infiniteVariants">Infinite Variants</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Three.js Category -->
|
||
<div class="category-section" data-category="threejs">
|
||
<div class="category-header">
|
||
<div class="category-icon">🎨</div>
|
||
<div class="category-title">
|
||
<h2>Three.js 3D Visualizations</h2>
|
||
<p>Progressive WebGL/WebGPU visualizations with foundation → expert learning path</p>
|
||
</div>
|
||
<div class="category-count">13 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="threejs-grid"></div>
|
||
</div>
|
||
|
||
<!-- SDG Networks Category -->
|
||
<div class="category-section" data-category="sdg">
|
||
<div class="category-header">
|
||
<div class="category-icon">🌍</div>
|
||
<div class="category-title">
|
||
<h2>SDG Network Visualizations</h2>
|
||
<p>Force-directed network graphs with API discovery and progressive D3.js techniques</p>
|
||
</div>
|
||
<div class="category-count">14 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="sdg-grid"></div>
|
||
</div>
|
||
|
||
<!-- D3 Visualizations Category -->
|
||
<div class="category-section" data-category="d3">
|
||
<div class="category-header">
|
||
<div class="category-icon">📊</div>
|
||
<div class="category-title">
|
||
<h2>D3 Data Visualizations</h2>
|
||
<p>Interactive SVG-based data visualizations showcasing D3.js selection patterns and techniques</p>
|
||
</div>
|
||
<div class="category-count">3 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="d3-grid"></div>
|
||
</div>
|
||
|
||
<!-- Mapbox Globes Category -->
|
||
<div class="category-section" data-category="mapbox">
|
||
<div class="category-header">
|
||
<div class="category-icon">🌐</div>
|
||
<div class="category-title">
|
||
<h2>Mapbox Globe Visualizations</h2>
|
||
<p>Interactive 3D globe visualizations with geospatial data using Mapbox GL JS</p>
|
||
</div>
|
||
<div class="category-count">14 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="mapbox-grid"></div>
|
||
</div>
|
||
|
||
<!-- Vaccine Timeseries Category -->
|
||
<div class="category-section" data-category="vaccineTimeseries">
|
||
<div class="category-header">
|
||
<div class="category-icon">💉</div>
|
||
<div class="category-title">
|
||
<h2>Vaccine Impact Timelines</h2>
|
||
<p>Interactive globe visualizations showing vaccination coverage and disease reduction over time (2000-2023) with Chart.js integration</p>
|
||
</div>
|
||
<div class="category-count">3 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="vaccineTimeseries-grid"></div>
|
||
</div>
|
||
|
||
<!-- Claude DevTools Category -->
|
||
<div class="category-section" data-category="claudeDevTools">
|
||
<div class="category-header">
|
||
<div class="category-icon">🛠️</div>
|
||
<div class="category-title">
|
||
<h2>Claude Code Developer Tools</h2>
|
||
<p>Interactive developer tools for Claude Code sessions, transcripts, and analytics</p>
|
||
</div>
|
||
<div class="category-count">11 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="devtools-grid"></div>
|
||
</div>
|
||
|
||
<!-- UI Hybrid Single File Category -->
|
||
<div class="category-section" data-category="ui-single">
|
||
<div class="category-header">
|
||
<div class="category-icon">✨</div>
|
||
<div class="category-title">
|
||
<h2>Themed Hybrid UI Components</h2>
|
||
<p>Self-contained HTML components with unique themes and multi-functional design</p>
|
||
</div>
|
||
<div class="category-count">60 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="ui-single-grid"></div>
|
||
</div>
|
||
|
||
<!-- UI Hybrid Modular Category -->
|
||
<div class="category-section" data-category="ui-modular">
|
||
<div class="category-header">
|
||
<div class="category-icon">🧩</div>
|
||
<div class="category-title">
|
||
<h2>Modular UI Components</h2>
|
||
<p>Professional 3-file architecture (HTML/CSS/JS) with separation of concerns</p>
|
||
</div>
|
||
<div class="category-count">5 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="ui-modular-grid"></div>
|
||
</div>
|
||
|
||
<!-- Infinite Variants Category -->
|
||
<div class="category-section" data-category="infiniteVariants">
|
||
<div class="category-header">
|
||
<div class="category-icon">🔄</div>
|
||
<div class="category-title">
|
||
<h2>Infinite Loop Variants</h2>
|
||
<p>7 self-contained infinite loop repositories testing different architectural innovations</p>
|
||
</div>
|
||
<div class="category-count">30 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="infinite-variants-grid"></div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p><strong>Infinite Agents</strong> - Web-Enhanced Infinite Agentic Loop Pattern</p>
|
||
<p>Generated with parallel AI agents using progressive learning from web sources</p>
|
||
<p style="margin-top: 15px;">
|
||
<a href="CLAUDE.md" class="github-link">📖 Documentation</a> •
|
||
<a href="ai_docs/threejs_infinite_loop_manual.md" class="github-link">📚 Three.js Manual</a> •
|
||
<a href="README.md" class="github-link">ℹ️ About</a>
|
||
</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// Demo Data
|
||
const demos = {
|
||
"threejs": [
|
||
{
|
||
"number": 1,
|
||
"title": "Rotating Geometries",
|
||
"description": "Basic scene setup with animated rotation",
|
||
"path": "threejs_viz/threejs_viz_1.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "Cosmic Bloom Garden",
|
||
"description": "Post-Processing with UnrealBloomPass",
|
||
"path": "threejs_viz/threejs_viz_10.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "Earth Orbit Simulator - Moon System Integration",
|
||
"description": "Interactive demo",
|
||
"path": "threejs_viz/threejs_viz_11.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "Earth Orbit Simulator - Kepler's Laws Visualization",
|
||
"description": "Interactive demo",
|
||
"path": "threejs_viz/threejs_viz_12.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "Earth Orbit Simulator - Enhanced Visual Realism (Iteration 13)",
|
||
"description": "Interactive demo",
|
||
"path": "threejs_viz/threejs_viz_13.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "Animated Lighting",
|
||
"description": "Dynamic lighting with moving light sources",
|
||
"path": "threejs_viz/threejs_viz_2.html",
|
||
"type": "Intermediate",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "Three.js Particle Universe",
|
||
"description": "Technique: GPU-accelerated particle system",
|
||
"path": "threejs_viz/threejs_viz_3.html",
|
||
"type": "Intermediate",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "Material Gallery",
|
||
"description": "Comparing Three.js material types",
|
||
"path": "threejs_viz/threejs_viz_4.html",
|
||
"type": "Intermediate",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "Three.js Visualization 5: Geometry Morphing",
|
||
"description": "Dynamic geometry transformation and scaling",
|
||
"path": "threejs_viz/threejs_viz_5.html",
|
||
"type": "Intermediate",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 10,
|
||
"title": "Texture Mapping & Filter Comparison",
|
||
"description": "TextureLoader, minFilter, magFilter comparison",
|
||
"path": "threejs_viz/threejs_viz_6.html",
|
||
"type": "Intermediate",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 11,
|
||
"title": "Interactive Crystal Garden",
|
||
"description": "OrbitControls for immersive 3D exploration",
|
||
"path": "threejs_viz/threejs_viz_7.html",
|
||
"type": "Intermediate",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 12,
|
||
"title": "Particle Wave System",
|
||
"description": "BufferGeometry with Points for dynamic particle waves",
|
||
"path": "threejs_viz/threejs_viz_8.html",
|
||
"type": "Intermediate",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 13,
|
||
"title": "Geometry Gallery",
|
||
"description": "Multiple advanced geometries with varied materials",
|
||
"path": "threejs_viz/threejs_viz_9.html",
|
||
"type": "Advanced",
|
||
"techniques": []
|
||
}
|
||
],
|
||
"sdg": [
|
||
{
|
||
"number": 1,
|
||
"title": "SDG Network Visualization - Force-Directed Graph",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_1.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "SDG Visualization 10 - Practical Bipartite Dashboard",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_10.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "SDG Network Visualization 11 - Enhanced Side Panels & Information Design",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_11.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "SDG Network - Iteration 12: Refined Aesthetics & Beautiful Nodes",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_12.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "SDG Network Visualization 13 - Advanced Filtering & Exploration",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_13.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "SDG Network Dashboard v1.0 - Production Ready",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_14.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "SDG Network Viz 2: Environmental Indicators Network",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_2.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "SDG Network Viz 3 - Global Biodiversity Interaction Network",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_3.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "SDG Network - Air Quality Monitoring (Performance Optimized)",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_4.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 10,
|
||
"title": "SDG Network Viz 5 - Advanced Color Encodings & Visual Hierarchy",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_5.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 11,
|
||
"title": "SDG Network Viz 6 - ETL Pipeline with Embedded Multi-Year Data",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_6.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 12,
|
||
"title": "SDG Network - Exploratory Analysis: Brushing & Linking",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_7.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 13,
|
||
"title": "SDG Network Viz 8 - Hierarchical SDG Taxonomy with Multi-Layout Transitions",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_8.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 14,
|
||
"title": "SDG Network Visualization 9 - High Performance Canvas Rendering",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_9.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
}
|
||
],
|
||
"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,
|
||
"title": "Global Population Distribution",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_1/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "Polio Eradication Progress (1980-2020) - Global Vaccination Coverage",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_10/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "Measles Vaccination Coverage vs. Outbreaks (2000-2023)",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_11/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "Smallpox Eradication Campaign (1950-1980) - Interactive Globe",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_12/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "DTP3 Vaccine Coverage & Child Mortality - Global Correlation Analysis 2024",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_13/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "HPV Vaccine Impact on Cervical Cancer",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_14/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "Global Temperature Anomaly Heatmap - Mapbox Globe",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_2/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "Globe Visualization 3: Global Economic Dashboard",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_3/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "Globe Visualization 4: Global Digital Infrastructure",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_4/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 10,
|
||
"title": "Global Educational Institutions",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_5/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 11,
|
||
"title": "Global University Rankings & Research",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_6/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 12,
|
||
"title": "Global Online Education Growth Timeline (2010-2024)",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_7/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 13,
|
||
"title": "Global School Infrastructure Clustering",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_8/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 14,
|
||
"title": "Global Educational Funding & Teacher Training",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_9/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
}
|
||
],
|
||
"vaccineTimeseries": [
|
||
{
|
||
"number": 1,
|
||
"title": "Measles Vaccination Coverage Timeline (2000-2023)",
|
||
"description": "Interactive demo",
|
||
"path": "vaccine_timeseries/vaccine_timeseries_1_measles/index.html",
|
||
"type": "Timeline Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"Chart.js",
|
||
"Time Series",
|
||
"Public Health"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "Polio Eradication Progress: Global Vaccination Time Series 2000-2023",
|
||
"description": "Interactive demo",
|
||
"path": "vaccine_timeseries/vaccine_timeseries_2_polio/index.html",
|
||
"type": "Timeline Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"Chart.js",
|
||
"Time Series",
|
||
"Public Health"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "COVID-19 Vaccination Timeline - Global Equity Analysis",
|
||
"description": "Interactive demo",
|
||
"path": "vaccine_timeseries/vaccine_timeseries_3_covid/index.html",
|
||
"type": "Timeline Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"Chart.js",
|
||
"Time Series",
|
||
"Public Health"
|
||
]
|
||
}
|
||
],
|
||
"claudeDevTools": [
|
||
{
|
||
"number": 1,
|
||
"title": "Transcript Loader",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_1.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"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",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "Session Timeline Visualizer",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_3.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "Dashboard Layout Tool",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_4.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "Tool Usage Chart",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_5.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "Advanced Transcript Search",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_6.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "Analytics Dashboard",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_7.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 10,
|
||
"title": "Advanced Pattern Search",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_8.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"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": [
|
||
{
|
||
"number": 1,
|
||
"title": "UI Hybrid 1",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_1.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "UI Hybrid 2",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_10.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "UI Hybrid 3",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_11.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "UI Hybrid 4",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_12.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "UI Hybrid 5",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_13.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "UI Hybrid 6",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_14.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "UI Hybrid 7",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_15.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "UI Hybrid 8",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_16.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "UI Hybrid 9",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_17.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 10,
|
||
"title": "UI Hybrid 10",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_18.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 11,
|
||
"title": "UI Hybrid 11",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_19.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 12,
|
||
"title": "UI Hybrid 12",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_2.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 13,
|
||
"title": "UI Hybrid 13",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_20.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 14,
|
||
"title": "UI Hybrid 14",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_21.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 15,
|
||
"title": "UI Hybrid 15",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_22.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 16,
|
||
"title": "UI Hybrid 16",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_23.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 17,
|
||
"title": "UI Hybrid 17",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_24.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 18,
|
||
"title": "UI Hybrid 18",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_25.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 19,
|
||
"title": "UI Hybrid 19",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_26.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 20,
|
||
"title": "UI Hybrid 20",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_27.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 21,
|
||
"title": "UI Hybrid 21",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_28.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 22,
|
||
"title": "UI Hybrid 22",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_29.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 23,
|
||
"title": "UI Hybrid 23",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_3.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 24,
|
||
"title": "UI Hybrid 24",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_30.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 25,
|
||
"title": "UI Hybrid 25",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_31.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 26,
|
||
"title": "UI Hybrid 26",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_32.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 27,
|
||
"title": "UI Hybrid 27",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_33.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 28,
|
||
"title": "UI Hybrid 28",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_34.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 29,
|
||
"title": "UI Hybrid 29",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_35.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 30,
|
||
"title": "UI Hybrid 30",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_4.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 31,
|
||
"title": "UI Hybrid 31",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_5.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 32,
|
||
"title": "UI Hybrid 32",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_6.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 33,
|
||
"title": "UI Hybrid 33",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_7.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 34,
|
||
"title": "UI Hybrid 34",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_8.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 35,
|
||
"title": "UI Hybrid 35",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_9.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 36,
|
||
"title": "UI Hybrid 1 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_1.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 37,
|
||
"title": "UI Hybrid 2 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_10.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 38,
|
||
"title": "UI Hybrid 3 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_11.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 39,
|
||
"title": "UI Hybrid 4 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_12.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 40,
|
||
"title": "UI Hybrid 5 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_13.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 41,
|
||
"title": "UI Hybrid 6 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_14.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 42,
|
||
"title": "UI Hybrid 7 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_15.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 43,
|
||
"title": "UI Hybrid 8 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_16.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 44,
|
||
"title": "UI Hybrid 9 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_17.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 45,
|
||
"title": "UI Hybrid 10 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_18.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 46,
|
||
"title": "UI Hybrid 11 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_19.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 47,
|
||
"title": "UI Hybrid 12 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_2.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 48,
|
||
"title": "UI Hybrid 13 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_20.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 49,
|
||
"title": "UI Hybrid 14 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_21.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 50,
|
||
"title": "UI Hybrid 15 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_22.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 51,
|
||
"title": "UI Hybrid 16 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_23.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 52,
|
||
"title": "UI Hybrid 17 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_24.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 53,
|
||
"title": "UI Hybrid 18 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_25.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 54,
|
||
"title": "UI Hybrid 19 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_3.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 55,
|
||
"title": "UI Hybrid 20 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_4.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 56,
|
||
"title": "UI Hybrid 21 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_5.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 57,
|
||
"title": "UI Hybrid 22 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_6.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 58,
|
||
"title": "UI Hybrid 23 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_7.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 59,
|
||
"title": "UI Hybrid 24 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_8.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 60,
|
||
"title": "UI Hybrid 25 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_9.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
}
|
||
],
|
||
"uiModular": [
|
||
{
|
||
"number": 1,
|
||
"title": "UI Hybrid 1 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_1/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "UI Hybrid 2 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_2/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "UI Hybrid 3 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_3/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "UI Hybrid 4 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_4/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "UI Hybrid 5 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_5/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
}
|
||
],
|
||
"infiniteVariants": [
|
||
{
|
||
"number": 1,
|
||
"title": "Sales Trends Dashboard - Iteration 01",
|
||
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_01_sales_trends.html",
|
||
"type": "Utility Commands",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Utility Commands"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "Social Network Graph - Iteration 02",
|
||
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_02_network_graph.html",
|
||
"type": "Utility Commands",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Utility Commands"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "Geographic Sales Heatmap - Iteration 03",
|
||
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_03_geographic_heatmap.html",
|
||
"type": "Utility Commands",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Utility Commands"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "Multi-Line Time Series - Iteration 04",
|
||
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_04_time_series_comparison.html",
|
||
"type": "Utility Commands",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Utility Commands"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "Budget Allocation Treemap - Iteration 05",
|
||
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_05_hierarchical_treemap.html",
|
||
"type": "Utility Commands",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Utility Commands"
|
||
]
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "Abstract Flow Visualization - Iteration 4",
|
||
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_3/test_output/viz_abstract_004.html",
|
||
"type": "Pluggable Templates",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Pluggable Templates"
|
||
]
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "Data Metrics Visualization - Iteration 3",
|
||
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_3/test_output/viz_datadriven_003.html",
|
||
"type": "Pluggable Templates",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Pluggable Templates"
|
||
]
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "Geometric Patterns Visualization - Iteration 1",
|
||
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_3/test_output/viz_geometric_001.html",
|
||
"type": "Pluggable Templates",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Pluggable Templates"
|
||
]
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "Interactive Network Visualization - Iteration 5",
|
||
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_3/test_output/viz_interactive_005.html",
|
||
"type": "Pluggable Templates",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Pluggable Templates"
|
||
]
|
||
},
|
||
{
|
||
"number": 10,
|
||
"title": "Organic Growth Visualization - Iteration 2",
|
||
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_3/test_output/viz_organic_002.html",
|
||
"type": "Pluggable Templates",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Pluggable Templates"
|
||
]
|
||
},
|
||
{
|
||
"number": 11,
|
||
"title": "Climate Data Visualization",
|
||
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_4/test_output/visualization_001_climate.html",
|
||
"type": "Quality Evaluation",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Quality Evaluation"
|
||
]
|
||
},
|
||
{
|
||
"number": 12,
|
||
"title": "Cosmic Garden - Data Sonification",
|
||
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_4/test_output/visualization_002_cosmic_garden.html",
|
||
"type": "Quality Evaluation",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Quality Evaluation"
|
||
]
|
||
},
|
||
{
|
||
"number": 13,
|
||
"title": "Global Population Flow",
|
||
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_4/test_output/visualization_003_population_flow.html",
|
||
"type": "Quality Evaluation",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Quality Evaluation"
|
||
]
|
||
},
|
||
{
|
||
"number": 14,
|
||
"title": "Stock Chart",
|
||
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_4/test_output/visualization_004_stocks.html",
|
||
"type": "Quality Evaluation",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Quality Evaluation"
|
||
]
|
||
},
|
||
{
|
||
"number": 15,
|
||
"title": "Ocean Current Velocity Patterns - Interactive 3D Visualization",
|
||
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_4/test_output/visualization_005_ocean_currents.html",
|
||
"type": "Quality Evaluation",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Quality Evaluation"
|
||
]
|
||
},
|
||
{
|
||
"number": 16,
|
||
"title": "DNA Sequence Visualization",
|
||
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_5/test_output/biology_dev_004.html",
|
||
"type": "Config-Driven",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Config-Driven"
|
||
]
|
||
},
|
||
{
|
||
"number": 17,
|
||
"title": "Global Temperature Anomaly Visualization",
|
||
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_5/test_output/climate_dev_001.html",
|
||
"type": "Config-Driven",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Config-Driven"
|
||
]
|
||
},
|
||
{
|
||
"number": 18,
|
||
"title": "Stock Market Candlestick Chart",
|
||
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_5/test_output/financial_dev_003.html",
|
||
"type": "Config-Driven",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Config-Driven"
|
||
]
|
||
},
|
||
{
|
||
"number": 19,
|
||
"title": "World Population Density Map",
|
||
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_5/test_output/geography_dev_005.html",
|
||
"type": "Config-Driven",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Config-Driven"
|
||
]
|
||
},
|
||
{
|
||
"number": 20,
|
||
"title": "Social Network Force Graph",
|
||
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_5/test_output/network_dev_002.html",
|
||
"type": "Config-Driven",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"Config-Driven"
|
||
]
|
||
},
|
||
{
|
||
"number": 21,
|
||
"title": "Real-Time Weather Dashboard - Iteration 1",
|
||
"description": "[Variant 6: State Management] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_6/test_output/visualization_1.html",
|
||
"type": "State Management",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"State Management"
|
||
]
|
||
},
|
||
{
|
||
"number": 22,
|
||
"title": "Network Connection Graph - Iteration 2",
|
||
"description": "[Variant 6: State Management] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_6/test_output/visualization_2.html",
|
||
"type": "State Management",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"State Management"
|
||
]
|
||
},
|
||
{
|
||
"number": 23,
|
||
"title": "Interactive Line Chart with Brush - Iteration 3",
|
||
"description": "[Variant 6: State Management] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_6/test_output/visualization_3.html",
|
||
"type": "State Management",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"State Management"
|
||
]
|
||
},
|
||
{
|
||
"number": 24,
|
||
"title": "Hierarchical Tree Diagram - Iteration 4",
|
||
"description": "[Variant 6: State Management] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_6/test_output/visualization_4.html",
|
||
"type": "State Management",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"State Management"
|
||
]
|
||
},
|
||
{
|
||
"number": 25,
|
||
"title": "Animated Scatter Plot - Iteration 5",
|
||
"description": "[Variant 6: State Management] Interactive demo",
|
||
"path": "infinite_variants/infinite_variant_6/test_output/visualization_5.html",
|
||
"type": "State Management",
|
||
"techniques": [
|
||
"Infinite Loop Variant",
|
||
"State Management"
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
// Render demos
|
||
function renderDemoCard(demo, category) {
|
||
const screenshotPath = `screenshots/${demo.path.replace(/\//g, '_').replace('.html', '.png')}`;
|
||
|
||
// Category emoji mapping
|
||
const categoryEmojis = {
|
||
'threejs': '🎨',
|
||
'sdg': '🌍',
|
||
'd3': '📊',
|
||
'mapbox': '🌐',
|
||
'claudeDevTools': '🛠️',
|
||
'ui-single': '✨',
|
||
'ui-modular': '🧩',
|
||
'infiniteVariants': '🔄'
|
||
};
|
||
const emoji = categoryEmojis[category] || '🖼️';
|
||
|
||
return `
|
||
<div class="demo-card" data-category="${category}" data-title="${demo.title.toLowerCase()}" data-type="${demo.type.toLowerCase()}" data-path="${demo.path}" onclick="window.location.href='${demo.path}'">
|
||
<div class="demo-screenshot">
|
||
<img src="${screenshotPath}"
|
||
alt="${demo.title} screenshot"
|
||
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
|
||
<div class="demo-screenshot-placeholder" style="display:none;">
|
||
${emoji}
|
||
<div class="demo-screenshot-placeholder-text">Click to view</div>
|
||
</div>
|
||
<div class="demo-screenshot-overlay">
|
||
<span>👁️ Click to view</span>
|
||
</div>
|
||
</div>
|
||
<div class="demo-header">
|
||
<span class="demo-number">#${demo.number}</span>
|
||
<h3 class="demo-title">${demo.title}</h3>
|
||
<p class="demo-description">${demo.description}</p>
|
||
</div>
|
||
<div class="demo-footer">
|
||
<span class="demo-type">${demo.type}</span>
|
||
<a href="${demo.path}" class="demo-link">
|
||
View Demo →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 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('vaccineTimeseries-grid').innerHTML = demos.vaccineTimeseries.map(d => renderDemoCard(d, 'vaccineTimeseries')).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('');
|
||
document.getElementById('ui-modular-grid').innerHTML = demos.uiModular.map(d => renderDemoCard(d, 'ui-modular')).join('');
|
||
document.getElementById('infinite-variants-grid').innerHTML = demos.infiniteVariants.map(d => renderDemoCard(d, 'infiniteVariants')).join('');
|
||
|
||
// Search functionality
|
||
const searchInput = document.getElementById('searchInput');
|
||
searchInput.addEventListener('input', (e) => {
|
||
const searchTerm = e.target.value.toLowerCase();
|
||
document.querySelectorAll('.demo-card').forEach(card => {
|
||
const title = card.dataset.title;
|
||
const type = card.dataset.type;
|
||
const matches = title.includes(searchTerm) || type.includes(searchTerm);
|
||
card.classList.toggle('hidden', !matches);
|
||
});
|
||
});
|
||
|
||
// Filter functionality
|
||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
// Update active state
|
||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
const filter = btn.dataset.filter;
|
||
|
||
// Show/hide category sections
|
||
document.querySelectorAll('.category-section').forEach(section => {
|
||
if (filter === 'all') {
|
||
section.classList.remove('hidden');
|
||
} else {
|
||
section.classList.toggle('hidden', section.dataset.category !== filter);
|
||
}
|
||
});
|
||
|
||
// Reset search
|
||
searchInput.value = '';
|
||
document.querySelectorAll('.demo-card').forEach(card => {
|
||
card.classList.remove('hidden');
|
||
});
|
||
});
|
||
});
|
||
|
||
|
||
// Update stats
|
||
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 + demos.infiniteVariants.length;
|
||
document.getElementById('threejsCount').textContent = demos.threejs.length;
|
||
document.getElementById('uiCount').textContent = demos.uiSingle.length + demos.uiModular.length;
|
||
</script>
|
||
</body>
|
||
</html>
|