# SDG Network Visualizations - Dashboard

## 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 →