dataviz-reference-app

A gallery of data visualization techniques for Next.js 16 - both a showcase and a practical reference for implementation patterns.

The Problem

Building data visualizations in React requires choosing between multiple approaches:

D3 direct DOM manipulation vs React declarative rendering
SVG vs Canvas vs WebGL
Library-specific patterns (Recharts, React Flow, R3F)
SSR compatibility and code splitting

Most tutorials show isolated examples. Real applications need proven patterns that work together in a production Next.js environment.

The Solution

Nine visualization patterns, one gallery. Each demonstrates a different technique:

Pattern	Library	Technique
Climate Radial	D3	SVG radial heatmap with dynamic arc generation
Network Graph	D3	Force simulation with draggable nodes
Stream Graph	D3	Stacked area with wiggle offset baseline
Hex Map	D3	Hexbin choropleth for geographic data
Economics Chart	Recharts	Declarative composed chart with multiple series
Data Pipeline	@xyflow/react	Custom nodes, animated edges, simulation
Neural Topology	R3F	3D network with orbit controls
Shader Art	R3F	GLSL fragment shader with fBM noise
Algorithmic Art	Canvas 2D	Flow field with seeded PRNG

Key Patterns

D3 + React Ref Pattern

const svgRef = useRef<SVGSVGElement>(null);
useEffect(() => {
  d3.select(svgRef.current).selectAll('path').data(data)...
}, [data]);

React owns the container, D3 owns the contents.

Dynamic Import for Heavy Libraries

const NeuralTopology = dynamic(
  () => import('./neural-topology').then(m => m.NeuralTopology),
  { ssr: false, loading: () => <Skeleton /> }
);

Prevents SSR issues, enables code splitting.

AI-Powered Insights Optional Gemini integration that provides contextual commentary on visualizations. Gracefully hides when no API key is configured.

Tech Stack

Next.js 16 + React 19
D3.js 7 for complex SVG visualizations
Three.js + React Three Fiber for 3D
@xyflow/react for node-based diagrams
Recharts for declarative charts
Canvas 2D for generative art
Tailwind CSS v4 with paper/ink theme

Visual Identity

Editorial aesthetic inspired by data journalism:

Paper (#fcfbf9) - warm white background
Ink (#1a1a1a) - near black text
Merriweather - serif headlines
Inter - sans-serif body

Status

v0.0.0 - Initial release with 9 visualization patterns.