D3.js & MUI5 Visualization Gallery
Interactive

D3.js Visualization Showcase

A comprehensive collection of interactive data visualizations powered by D3.js and Material-UI 5

Statistical Charts

Common charts for data analysis and business intelligence

Bar Chart

Compare categorical data with vertical bars. Hover to see details.

Line Chart

Display trends over time with smooth animations and interactive points.

Area Chart

Stacked areas showing multiple data series with smooth curves.

Scatter Plot

Visualize relationships between two variables with color-coded categories.

Pie Chart

Show proportions of a whole with interactive slices.

Donut Chart

Pie chart variation with a hollow center for additional information.

Radar Chart

Compare multiple variables on a circular grid.

Heatmap

Visualize data density with color-coded cells and gradient legend.

Histogram

Analyze value distribution using binned frequencies.

Box Plot

Summarize distribution with quartiles, whiskers, and outliers.

Violin Plot

Compare distributions across categories with density shapes.

Bubble Chart

Show 3 variables with X, Y, and bubble size encoding.

Waterfall Chart

Track cumulative positive and negative changes across stages.

Funnel Chart

Visualize stage-by-stage conversion drop-off.

Calendar Heatmap

Track daily activity intensity across weeks and months.

Lollipop Chart

Compare ranked categories with stem-and-dot markers.

Candlestick Chart (OHLC)

Track open-high-low-close price movement over time.

Streamgraph

Visualize flowing composition changes across multiple time series.

Parallel Coordinates

Compare multivariate samples across multiple dimensions.

Chord Diagram

Show bidirectional relationship strengths between categories.

Hexbin Plot

Aggregate dense scatter points into hexagonal density bins.

Ridgeline Chart

Compare many category distributions as layered density ridges.

Horizon Chart

Compact layered time-series view with positive and negative bands.

Bump Chart

Track ranking position changes across periods.

Radar Small Multiples

Compare many radar profiles side-by-side in a compact grid.

Hybrid SVG+Canvas Large Scatter

Render large point clouds with canvas while preserving SVG axes.


Hierarchical Visualizations

Explore nested and hierarchical data structures

TreeMap

Display hierarchical data as nested rectangles with size proportional to values.

Sunburst Chart

Radial visualization of hierarchical data with interactive segments.

Circle Packing

Nested circles representing hierarchical partitions by size.

Icicle Chart

Partitioned hierarchy layout shown as stacked rectangular layers.

Tree Diagram

Classic tree layout showing parent-child relationships.

Dendrogram

Cluster-style hierarchical tree for leaf relationship distance patterns.


Network & Flow Visualizations

Visualize connections, relationships, and flows between entities

Force-Directed Graph

Interactive network visualization with draggable nodes and physics simulation.

Sankey Diagram

Flow diagram showing the magnitude of flows between nodes.

Alluvial Chart

Track categorical transitions across sequential stages.

Network Adjacency Matrix

Matrix view of connection intensity between network nodes.


Geospatial Visualizations

Map-based views for regional intensity, symbol scaling, and population density patterns

Choropleth Map

Encode region-level values using sequential color intensity.

Proportional Symbol Map

Compare regional magnitude with size-scaled symbols.

Dot Density Map

Represent regional concentration using sampled point densities.

Cartogram

Distort region area by metric value while preserving rough geography.

New Chart Variants & Extensions

Additional chart types including grouped, stacked, and specialized visualizations

Grouped Bar Chart

Side-by-side bars comparing multiple series across categories.

Stacked Bar Chart

Bars with segments showing part-to-whole composition.

Stacked Area Chart

Cumulative area trends showing composition over time.

Waffle Chart

Grid of squares for intuitive percentage visualization.

Sparklines

Tiny inline charts for compact trend visualization.

Small Multiples Grid

Trellis display of multiple small charts for comparison.

Gantt Chart

Project timeline with task durations and progress tracking.

Bullet Chart

KPI performance gauge with qualitative ranges and targets.

Slope Chart

Before/after comparison showing ranking changes.

Beeswarm Plot

Force-simulated scatter plot with no overlapping points.

Arc Diagram

Linear network visualization with curved connection arcs.

Marimekko Chart

Two-dimensional market share with variable column widths.

Venn Diagram

Set relationships with overlapping circles and intersections.

Contour Plot

Isolines showing elevation or density patterns.

Polar Area Chart

Radial chart with varying radii (Coxcomb/Nightingale Rose).

Population Pyramid

Back-to-back demographic bars by age and gender.

Timeline Chart

Event timeline with markers and date labels.

Flow Map

Geographic movement visualization with curved flow lines.

Voronoi Diagram

Nearest-neighbor spatial partitioning with colored cells.

Radial Tree

Circular hierarchical layout with radial branches.

About This Project

This is a comprehensive showcase of 60 D3.js visualizations integrated with Material-UI 5 in a Next.js application. All visualizations feature: