445 lines
17 KiB
HTML
445 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SDG Network Visualizations - Dashboard</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
color: white;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
font-weight: 800;
|
|
margin-bottom: 10px;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2em;
|
|
opacity: 0.9;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
margin-top: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat {
|
|
background: rgba(255,255,255,0.2);
|
|
padding: 15px 30px;
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 25px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.card-number {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.3em;
|
|
font-weight: 700;
|
|
color: #2d3748;
|
|
margin-bottom: 10px;
|
|
padding-right: 50px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.card-description {
|
|
color: #718096;
|
|
font-size: 0.95em;
|
|
margin-bottom: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.card-meta {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 0.85em;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-size: 0.75em;
|
|
font-weight: 600;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.badge-foundation {
|
|
background: #e6f7ff;
|
|
color: #0066ff;
|
|
}
|
|
|
|
.badge-intermediate {
|
|
background: #fff4e6;
|
|
color: #ff9800;
|
|
}
|
|
|
|
.badge-advanced {
|
|
background: #ffe6f0;
|
|
color: #e91e63;
|
|
}
|
|
|
|
.badge-expert {
|
|
background: #f3e6ff;
|
|
color: #9c27b0;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.section-title {
|
|
color: white;
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
margin: 40px 0 25px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
color: white;
|
|
padding: 40px 20px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.footer-links {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: white;
|
|
text-decoration: none;
|
|
margin: 0 15px;
|
|
opacity: 0.9;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
opacity: 1;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>SDG Network Visualizations</h1>
|
|
<p class="subtitle">Progressive Web-Enhanced Learning with D3.js</p>
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<span class="stat-number">14</span>
|
|
<span class="stat-label">Iterations</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-number">9</span>
|
|
<span class="stat-label">APIs Integrated</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-number">25+</span>
|
|
<span class="stat-label">D3 Techniques</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<h2 class="section-title">Foundation (Iterations 1-5)</h2>
|
|
<div class="grid">
|
|
<!-- Iteration 1 -->
|
|
<div class="card">
|
|
<div class="card-number">#1</div>
|
|
<h3 class="card-title">UN SDG Goals Network</h3>
|
|
<p class="card-description">Basic force-directed graph with UN SDG API. Learn force simulation, drag interactions, and tooltips.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-foundation">Foundation</span>
|
|
<span class="meta-item">📊 17 nodes</span>
|
|
<span class="meta-item">⚡ D3.js v7</span>
|
|
</div>
|
|
<a href="sdg_viz_1.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 2 -->
|
|
<div class="card">
|
|
<div class="card-number">#2</div>
|
|
<h3 class="card-title">Environmental Indicators Network</h3>
|
|
<p class="card-description">World Bank API with 5 environmental indicators. Multi-property encoding with color scales and curved edges.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-foundation">Foundation</span>
|
|
<span class="meta-item">🌍 15 countries</span>
|
|
<span class="meta-item">🎨 Color scales</span>
|
|
</div>
|
|
<a href="sdg_viz_2.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 3 -->
|
|
<div class="card">
|
|
<div class="card-number">#3</div>
|
|
<h3 class="card-title">Global Biodiversity Network</h3>
|
|
<p class="card-description">GBIF biodiversity data with advanced interactions. Search, filter, click highlighting, and side panel details.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-foundation">Foundation</span>
|
|
<span class="meta-item">🦋 37 species</span>
|
|
<span class="meta-item">🔍 Search</span>
|
|
</div>
|
|
<a href="sdg_viz_3.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 4 -->
|
|
<div class="card">
|
|
<div class="card-number">#4</div>
|
|
<h3 class="card-title">Air Quality with Smart Caching</h3>
|
|
<p class="card-description">OpenAQ API with localStorage caching. Fixed color encoding issues. Loads instantly on repeat visits.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-foundation">Foundation</span>
|
|
<span class="meta-item">💾 Cached</span>
|
|
<span class="meta-item">⚡ <2s load</span>
|
|
</div>
|
|
<a href="sdg_viz_4.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 5 -->
|
|
<div class="card">
|
|
<div class="card-number">#5</div>
|
|
<h3 class="card-title">Advanced Color Encodings</h3>
|
|
<p class="card-description">Multi-dimensional color encoding: fill, border, opacity, size. 8+ color schemes with dynamic switching.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-foundation">Foundation</span>
|
|
<span class="meta-item">🌈 8 schemes</span>
|
|
<span class="meta-item">🎨 Multi-encoding</span>
|
|
</div>
|
|
<a href="sdg_viz_5.html" class="btn">View Demo →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">Intermediate (Iterations 6-9)</h2>
|
|
<div class="grid">
|
|
<!-- Iteration 6 -->
|
|
<div class="card">
|
|
<div class="card-number">#6</div>
|
|
<h3 class="card-title">ETL Pipeline with Embedded Data</h3>
|
|
<p class="card-description">Complete ETL: Extract → Transform → Load. Multi-year data (2020-2022) embedded. Zero API calls, <500ms load.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-intermediate">Intermediate</span>
|
|
<span class="meta-item">📦 ETL</span>
|
|
<span class="meta-item">💾 Embedded</span>
|
|
</div>
|
|
<a href="sdg_viz_6.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 7 -->
|
|
<div class="card">
|
|
<div class="card-number">#7</div>
|
|
<h3 class="card-title">Brushing & Linking (4 Views)</h3>
|
|
<p class="card-description">Exploratory analysis with coordinated views: network, bar chart, scatter plot, data table. Brush to filter.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-intermediate">Intermediate</span>
|
|
<span class="meta-item">🖱️ Brush</span>
|
|
<span class="meta-item">🔗 4 views</span>
|
|
</div>
|
|
<a href="sdg_viz_7.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 8 -->
|
|
<div class="card">
|
|
<div class="card-number">#8</div>
|
|
<h3 class="card-title">Hierarchical SDG Taxonomy</h3>
|
|
<p class="card-description">Collapsible hierarchy with 4 layouts: Force, Tree, Radial, Cluster. Smooth 500ms transitions between layouts.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-intermediate">Intermediate</span>
|
|
<span class="meta-item">🌳 Hierarchy</span>
|
|
<span class="meta-item">🔄 4 layouts</span>
|
|
</div>
|
|
<a href="sdg_viz_8.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 9 -->
|
|
<div class="card">
|
|
<div class="card-number">#9</div>
|
|
<h3 class="card-title">High Performance Canvas (1000 nodes)</h3>
|
|
<p class="card-description">Canvas rendering for 1000 nodes at 60fps. Quadtree indexing, viewport culling, LOD rendering, progressive loading.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-intermediate">Intermediate</span>
|
|
<span class="meta-item">🎨 Canvas</span>
|
|
<span class="meta-item">⚡ 60fps</span>
|
|
</div>
|
|
<a href="sdg_viz_9.html" class="btn">View Demo →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">Advanced - Practical Dashboards (Iterations 10-14)</h2>
|
|
<div class="grid">
|
|
<!-- Iteration 10 -->
|
|
<div class="card">
|
|
<div class="card-number">#10</div>
|
|
<h3 class="card-title">Bipartite Dashboard (Topics ↔ Sources)</h3>
|
|
<p class="card-description">Practical bipartite graph. Blue topics + Red sources. Large nodes with Sonic-style borders. NO entrance animations.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-advanced">Advanced</span>
|
|
<span class="meta-item">🎨 Sonic colors</span>
|
|
<span class="meta-item">📊 Bipartite</span>
|
|
</div>
|
|
<a href="sdg_viz_10.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 11 -->
|
|
<div class="card">
|
|
<div class="card-number">#11</div>
|
|
<h3 class="card-title">Enhanced Side Panels & Information</h3>
|
|
<p class="card-description">Rich side panels with 6 content sections. Real API links (World Bank, NASA, WHO). Click connections to explore.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-advanced">Advanced</span>
|
|
<span class="meta-item">📋 Rich panels</span>
|
|
<span class="meta-item">🔗 Real APIs</span>
|
|
</div>
|
|
<a href="sdg_viz_11.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 12 -->
|
|
<div class="card">
|
|
<div class="card-number">#12</div>
|
|
<h3 class="card-title">Refined Aesthetics & Beautiful Nodes</h3>
|
|
<p class="card-description">Large beautiful nodes (30px). Radial gradients, inner glow, drop shadows. Perfect Sonic aesthetic with bold borders.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-advanced">Advanced</span>
|
|
<span class="meta-item">🌟 Beautiful</span>
|
|
<span class="meta-item">🎨 Gradients</span>
|
|
</div>
|
|
<a href="sdg_viz_12.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 13 -->
|
|
<div class="card">
|
|
<div class="card-number">#13</div>
|
|
<h3 class="card-title">Advanced Filtering & Exploration</h3>
|
|
<p class="card-description">Topic filters, source filters, real-time search, connection strength slider. 68 nodes with smart exploration tools.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-advanced">Advanced</span>
|
|
<span class="meta-item">🔍 Search</span>
|
|
<span class="meta-item">☑️ Filters</span>
|
|
</div>
|
|
<a href="sdg_viz_13.html" class="btn">View Demo →</a>
|
|
</div>
|
|
|
|
<!-- Iteration 14 -->
|
|
<div class="card">
|
|
<div class="card-number">#14</div>
|
|
<h3 class="card-title">Production-Ready Dashboard ⭐</h3>
|
|
<p class="card-description">Export PNG/SVG, share links, table view toggle, keyboard shortcuts (ESC, /), accessibility, responsive design.</p>
|
|
<div class="card-meta">
|
|
<span class="badge badge-expert">Expert</span>
|
|
<span class="meta-item">📸 Export</span>
|
|
<span class="meta-item">⌨️ Shortcuts</span>
|
|
</div>
|
|
<a href="sdg_viz_14.html" class="btn">View Demo →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p><strong>SDG Network Visualizations</strong></p>
|
|
<p>Web-Enhanced Infinite Agentic Loop - Progressive D3.js Learning</p>
|
|
<p style="margin-top: 10px; opacity: 0.7;">14 iterations demonstrating foundation → expert techniques</p>
|
|
<div class="footer-links">
|
|
<a href="../SDG_NETWORK_GUIDE.md">User Guide</a>
|
|
<a href="../SDG_NETWORK_ANALYSIS.md">Technical Analysis</a>
|
|
<a href="../specs/sdg_network_progressive.md">Specification</a>
|
|
</div>
|
|
<p style="margin-top: 20px; font-size: 0.9em;">Generated with Claude Code - Infinite Agentic Loop Pattern</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|