D3.js Examples

This document demonstrates all available D3.js visualization types with interactive examples.

Bar Chart

A simple bar chart showing monthly sales data with interactive tooltips.

::d3[Monthly Sales]{data="/assets/viz/data/sales.json" script="/assets/viz/scripts/bar-chart.js" width="100%" height="400"}

Line Chart

A multi-series line chart displaying time series data across multiple categories. Features include:

• Multiple data series with different colors
• Interactive tooltips on hover
• Legend showing all series
• Grid lines for easier reading

::d3[Sales Over Time]{data="/assets/viz/data/line-data.json" script="/assets/viz/scripts/line-chart.js" width="100%" height="400"}

Pie Chart

An interactive pie/donut chart showing categorical distribution. Features include:

• Animated hover effects
• Percentage labels on slices
• External labels with connecting lines
• Interactive tooltips

::d3[Market Share Distribution]{data="/assets/viz/data/pie-data.json" script="/assets/viz/scripts/pie-chart.js" width="100%" height="500"}

Scatter Plot

An interactive scatter plot for correlation analysis. Features include:

• Color-coded categories
• Interactive tooltips showing coordinates
• Grid lines for reference
• Legend for category identification

::d3[Correlation Analysis]{data="/assets/viz/data/scatter-data.json" script="/assets/viz/scripts/scatter-plot.js" width="100%" height="400"}

Area Chart

A stacked area chart showing cumulative values over time. Features include:

• Stacked areas with different colors
• Interactive tooltips showing all series values
• Legend for series identification
• Smooth curves for better visualization

::d3[Revenue Breakdown]{data="/assets/viz/data/area-data.json" script="/assets/viz/scripts/area-chart.js" width="100%" height="400"}

Network Graph

A force-directed network graph showing relationships between nodes. Features include:

• Interactive drag-and-drop nodes
• Dynamic force simulation
• Color-coded node groups
• Hover effects highlighting connections
• Adjustable link thickness based on relationship strength

::d3[Network Relationships]{data="/assets/viz/data/network-data.json" script="/assets/viz/scripts/network-graph.js" width="100%" height="500"}

Treemap

A hierarchical treemap visualization showing nested data structures. Features include:

• Nested rectangles sized by value
• Color-coded categories
• Interactive hover effects
• Value labels for large enough cells
• Automatic layout optimization

::d3[Product Categories]{data="/assets/viz/data/treemap-data.json" script="/assets/viz/scripts/treemap.js" width="100%" height="400"}

Sunburst Chart

A radial partition (sunburst) chart displaying hierarchical data in a circular layout. Features include:

• Multi-level hierarchy visualization
• Color-coded segments by category
• Interactive tooltips
• Radial labels for readability
• Smooth color gradients

::d3[Category Hierarchy]{data="/assets/viz/data/sunburst-data.json" script="/assets/viz/scripts/sunburst.js" width="100%" height="500"}

Heatmap

A heatmap visualization showing value intensity across two categorical dimensions. Features include:

• Color gradient based on values
• Interactive tooltips
• Value labels in cells
• Color legend
• Rotated axis labels for readability

::d3[Quarterly Performance]{data="/assets/viz/data/heatmap-data.json" script="/assets/viz/scripts/heatmap.js" width="100%" height="400"}

Polar Clock

A real-time polar clock displaying time as circular arcs. Features include:

• Three concentric rings for hours, minutes, and seconds
• Smooth animated transitions
• Color-coded time units
• Updates in real-time
• No data file required (uses JavaScript Date)

::d3[Polar Clock]{data="/assets/viz/data/empty.json" script="/assets/viz/scripts/polar-clock.js" width="100%" height="500"}

Voronoi Stippling

A Voronoi diagram visualization creating stippling effects from point data. Features include:

• Voronoi cells generated from point coordinates
• Color-coded cells based on position
• Interactive hover effects
• Point markers (stipples) at cell centers
• Can use provided data or generate random points

::d3[Voronoi Stippling]{data="/assets/viz/data/voronoi-stippling-data.json" script="/assets/viz/scripts/voronoi-stippling.js" width="100%" height="400"}

Usage Notes

All visualizations use the ::d3 directive with the following parameters:

• data: Path to JSON data file (relative to /assets/viz/)
• script: Path to visualization script (relative to /assets/viz/)
• width: CSS width value (default: "100%")
• height: CSS height value (default: "400")
• className: Optional Tailwind/CSS classes

Data Format Requirements

Each visualization type expects different data formats:

• Bar Chart: Array of objects with category and value fields
• Line Chart: Array of objects with date and series value fields
• Pie Chart: Array of objects with name and value fields
• Scatter Plot: Array of objects with x, y, and optional category fields
• Area Chart: Array of objects with date and series value fields
• Network Graph: Object with nodes array (id, group, name, size) and links array (source, target, value)
• Treemap: Array of objects with name, value, and category fields (or hierarchical object)
• Sunburst: Array of objects with name, value, and parent fields (or hierarchical object)
• Heatmap: Array of objects with x, y, and value fields
• Polar Clock: Empty object {} (uses JavaScript Date for real-time updates)
• Voronoi Stippling: Array of objects with x and y coordinates (or generates random points if empty)

Customization

You can customize visualizations by:

• Adjusting width and height parameters
• Modifying the JavaScript files in assets/viz/scripts/
• Updating the data files in assets/viz/data/
• Adding custom CSS classes via the className parameter