Progressive Web-Enhanced Learning with D3.js
Basic force-directed graph with UN SDG API. Learn force simulation, drag interactions, and tooltips.
View Demo →World Bank API with 5 environmental indicators. Multi-property encoding with color scales and curved edges.
View Demo →GBIF biodiversity data with advanced interactions. Search, filter, click highlighting, and side panel details.
View Demo →OpenAQ API with localStorage caching. Fixed color encoding issues. Loads instantly on repeat visits.
View Demo →Multi-dimensional color encoding: fill, border, opacity, size. 8+ color schemes with dynamic switching.
View Demo →Complete ETL: Extract → Transform → Load. Multi-year data (2020-2022) embedded. Zero API calls, <500ms load.
View Demo →Exploratory analysis with coordinated views: network, bar chart, scatter plot, data table. Brush to filter.
View Demo →Collapsible hierarchy with 4 layouts: Force, Tree, Radial, Cluster. Smooth 500ms transitions between layouts.
View Demo →Canvas rendering for 1000 nodes at 60fps. Quadtree indexing, viewport culling, LOD rendering, progressive loading.
View Demo →Practical bipartite graph. Blue topics + Red sources. Large nodes with Sonic-style borders. NO entrance animations.
View Demo →Rich side panels with 6 content sections. Real API links (World Bank, NASA, WHO). Click connections to explore.
View Demo →Large beautiful nodes (30px). Radial gradients, inner glow, drop shadows. Perfect Sonic aesthetic with bold borders.
View Demo →Topic filters, source filters, real-time search, connection strength slider. 68 nodes with smart exploration tools.
View Demo →Export PNG/SVG, share links, table view toggle, keyboard shortcuts (ESC, /), accessibility, responsive design.
View Demo →