D3 Data Analysis Showcase

Comprehensive examples demonstrating D3's statistical and analytical visualization capabilities. These charts help you understand data distributions, detect patterns, compare groups, and perform financial analysis.

---

Statistical Distribution Analysis

Salary Distribution Analysis

Compare salary distributions across departments using boxplots to identify outliers and understand compensation patterns.

View Source

type: boxplot
engine: d3
x: department
y: salary
title: Salary Distribution by Department
showOutliers: true
boxWidth: 0.6
width: 600
height: 400
data:
  source: '[{"department": "Engineering", "salary": 95000}, {"department": "Engineering", "salary": 105000}, {"department": "Engineering", "salary": 115000}, {"department": "Engineering", "salary": 125000}, {"department": "Engineering", "salary": 88000}, {"department": "Engineering", "salary": 142000}, {"department": "Engineering", "salary": 98000}, {"department": "Engineering", "salary": 110000}, {"department": "Sales", "salary": 65000}, {"department": "Sales", "salary": 72000}, {"department": "Sales", "salary": 78000}, {"department": "Sales", "salary": 85000}, {"department": "Sales", "salary": 92000}, {"department": "Sales", "salary": 68000}, {"department": "Sales", "salary": 75000}, {"department": "Marketing", "salary": 62000}, {"department": "Marketing", "salary": 68000}, {"department": "Marketing", "salary": 74000}, {"department": "Marketing", "salary": 71000}, {"department": "Marketing", "salary": 82000}, {"department": "Marketing", "salary": 65000}, {"department": "HR", "salary": 55000}, {"department": "HR", "salary": 62000}, {"department": "HR", "salary": 58000}, {"department": "HR", "salary": 67000}]'

Experience Level Comparison

Grouped boxplot showing salary ranges by department and experience level.

View Source

type: boxplot
engine: d3
x: department
y: salary
color: level
title: Salary by Department and Experience
boxWidth: 0.4
colorScheme: schemeSet2
width: 650
height: 400
data:
  source: '[{"department": "Engineering", "salary": 85000, "level": "Junior"}, {"department": "Engineering", "salary": 92000, "level": "Junior"}, {"department": "Engineering", "salary": 78000, "level": "Junior"}, {"department": "Engineering", "salary": 125000, "level": "Senior"}, {"department": "Engineering", "salary": 135000, "level": "Senior"}, {"department": "Engineering", "salary": 142000, "level": "Senior"}, {"department": "Engineering", "salary": 118000, "level": "Senior"}, {"department": "Sales", "salary": 52000, "level": "Junior"}, {"department": "Sales", "salary": 58000, "level": "Junior"}, {"department": "Sales", "salary": 48000, "level": "Junior"}, {"department": "Sales", "salary": 85000, "level": "Senior"}, {"department": "Sales", "salary": 92000, "level": "Senior"}, {"department": "Sales", "salary": 78000, "level": "Senior"}, {"department": "Marketing", "salary": 48000, "level": "Junior"}, {"department": "Marketing", "salary": 55000, "level": "Junior"}, {"department": "Marketing", "salary": 75000, "level": "Senior"}, {"department": "Marketing", "salary": 82000, "level": "Senior"}]'

---

Distribution Shape Analysis

Age Demographics Histogram

Visualize the age distribution of customers or employees to understand demographic patterns.

View Source

type: histogram
engine: d3
x: age
title: Customer Age Distribution
bins: 15
color: steelblue
width: 600
height: 350
data:
  source: '[{"age": 22}, {"age": 25}, {"age": 28}, {"age": 31}, {"age": 34}, {"age": 27}, {"age": 29}, {"age": 35}, {"age": 38}, {"age": 42}, {"age": 45}, {"age": 33}, {"age": 36}, {"age": 39}, {"age": 41}, {"age": 26}, {"age": 30}, {"age": 32}, {"age": 37}, {"age": 44}, {"age": 48}, {"age": 51}, {"age": 23}, {"age": 24}, {"age": 29}, {"age": 46}, {"age": 52}, {"age": 55}, {"age": 58}, {"age": 35}, {"age": 38}, {"age": 42}, {"age": 28}, {"age": 31}, {"age": 27}, {"age": 33}, {"age": 39}, {"age": 43}, {"age": 47}, {"age": 50}]'

Score Distribution Density

Normalized histogram showing the probability density of test scores.

View Source

type: histogram
engine: d3
x: score
normalize: true
title: Test Score Density Distribution
bins: 12
width: 600
height: 350
data:
  source: '[{"score": 45}, {"score": 52}, {"score": 58}, {"score": 62}, {"score": 65}, {"score": 68}, {"score": 71}, {"score": 72}, {"score": 74}, {"score": 75}, {"score": 76}, {"score": 77}, {"score": 78}, {"score": 79}, {"score": 80}, {"score": 81}, {"score": 82}, {"score": 83}, {"score": 84}, {"score": 85}, {"score": 86}, {"score": 87}, {"score": 88}, {"score": 89}, {"score": 90}, {"score": 91}, {"score": 92}, {"score": 94}, {"score": 96}, {"score": 98}]'

---

Multi-Distribution Comparison

Monthly Temperature Patterns

Ridgeline chart comparing temperature distributions across months, revealing seasonal patterns.

View Source

type: ridgeline
engine: d3
x: temperature
group: month
title: Temperature Distribution by Month
overlap: 0.65
bandwidth: 8
width: 600
height: 450
data:
  source: '[{"month": "January", "temperature": 28}, {"month": "January", "temperature": 32}, {"month": "January", "temperature": 30}, {"month": "January", "temperature": 25}, {"month": "January", "temperature": 35}, {"month": "January", "temperature": 29}, {"month": "February", "temperature": 35}, {"month": "February", "temperature": 38}, {"month": "February", "temperature": 42}, {"month": "February", "temperature": 36}, {"month": "February", "temperature": 40}, {"month": "February", "temperature": 33}, {"month": "March", "temperature": 48}, {"month": "March", "temperature": 52}, {"month": "March", "temperature": 55}, {"month": "March", "temperature": 50}, {"month": "March", "temperature": 45}, {"month": "March", "temperature": 58}, {"month": "April", "temperature": 58}, {"month": "April", "temperature": 62}, {"month": "April", "temperature": 65}, {"month": "April", "temperature": 60}, {"month": "April", "temperature": 68}, {"month": "April", "temperature": 55}, {"month": "May", "temperature": 68}, {"month": "May", "temperature": 72}, {"month": "May", "temperature": 75}, {"month": "May", "temperature": 70}, {"month": "May", "temperature": 78}, {"month": "May", "temperature": 65}, {"month": "June", "temperature": 78}, {"month": "June", "temperature": 82}, {"month": "June", "temperature": 85}, {"month": "June", "temperature": 80}, {"month": "June", "temperature": 88}, {"month": "June", "temperature": 75}]'

Species Measurement Analysis

Violin chart showing full distribution shapes for biological measurements.

View Source

type: violin
engine: d3
x: species
y: petalLength
title: Petal Length Distribution by Species
showBox: true
bandwidth: 3
width: 600
height: 400
data:
  source: '[{"species": "setosa", "petalLength": 1.4}, {"species": "setosa", "petalLength": 1.3}, {"species": "setosa", "petalLength": 1.5}, {"species": "setosa", "petalLength": 1.7}, {"species": "setosa", "petalLength": 1.4}, {"species": "setosa", "petalLength": 1.2}, {"species": "setosa", "petalLength": 1.6}, {"species": "setosa", "petalLength": 1.9}, {"species": "versicolor", "petalLength": 4.5}, {"species": "versicolor", "petalLength": 4.7}, {"species": "versicolor", "petalLength": 4.0}, {"species": "versicolor", "petalLength": 3.9}, {"species": "versicolor", "petalLength": 4.2}, {"species": "versicolor", "petalLength": 4.8}, {"species": "versicolor", "petalLength": 3.5}, {"species": "versicolor", "petalLength": 4.1}, {"species": "virginica", "petalLength": 5.6}, {"species": "virginica", "petalLength": 5.9}, {"species": "virginica", "petalLength": 6.1}, {"species": "virginica", "petalLength": 5.8}, {"species": "virginica", "petalLength": 5.1}, {"species": "virginica", "petalLength": 6.4}, {"species": "virginica", "petalLength": 5.5}, {"species": "virginica", "petalLength": 6.0}]'

---

2D Density Analysis

Customer Behavior Clusters

Contour density map revealing clusters in customer behavior data.

View Source

type: contour
engine: d3
x: purchaseFrequency
y: avgOrderValue
title: Customer Segmentation Density
thresholds: 12
colorScheme: schemeYlGnBu
bandwidth: 15
width: 600
height: 450
data:
  source: '[{"purchaseFrequency": 2, "avgOrderValue": 45}, {"purchaseFrequency": 3, "avgOrderValue": 52}, {"purchaseFrequency": 2, "avgOrderValue": 48}, {"purchaseFrequency": 4, "avgOrderValue": 55}, {"purchaseFrequency": 3, "avgOrderValue": 50}, {"purchaseFrequency": 5, "avgOrderValue": 62}, {"purchaseFrequency": 4, "avgOrderValue": 58}, {"purchaseFrequency": 3, "avgOrderValue": 47}, {"purchaseFrequency": 12, "avgOrderValue": 125}, {"purchaseFrequency": 15, "avgOrderValue": 142}, {"purchaseFrequency": 14, "avgOrderValue": 135}, {"purchaseFrequency": 13, "avgOrderValue": 128}, {"purchaseFrequency": 16, "avgOrderValue": 150}, {"purchaseFrequency": 11, "avgOrderValue": 118}, {"purchaseFrequency": 14, "avgOrderValue": 138}, {"purchaseFrequency": 8, "avgOrderValue": 85}, {"purchaseFrequency": 9, "avgOrderValue": 92}, {"purchaseFrequency": 7, "avgOrderValue": 78}, {"purchaseFrequency": 10, "avgOrderValue": 98}, {"purchaseFrequency": 8, "avgOrderValue": 88}, {"purchaseFrequency": 6, "avgOrderValue": 72}, {"purchaseFrequency": 7, "avgOrderValue": 82}]'

Geographic Activity Hotspots

Density visualization for spatial data analysis.

View Source

type: contour
engine: d3
x: longitude
y: latitude
title: Activity Density Map
thresholds: 8
colorScheme: schemeOrRd
bandwidth: 12
width: 600
height: 450
data:
  source: '[{"longitude": -122.4, "latitude": 37.78}, {"longitude": -122.42, "latitude": 37.79}, {"longitude": -122.41, "latitude": 37.77}, {"longitude": -122.43, "latitude": 37.78}, {"longitude": -122.39, "latitude": 37.8}, {"longitude": -122.44, "latitude": 37.76}, {"longitude": -122.38, "latitude": 37.81}, {"longitude": -73.99, "latitude": 40.73}, {"longitude": -74.0, "latitude": 40.72}, {"longitude": -73.98, "latitude": 40.74}, {"longitude": -74.01, "latitude": 40.71}, {"longitude": -73.97, "latitude": 40.75}, {"longitude": -74.02, "latitude": 40.7}, {"longitude": -87.63, "latitude": 41.88}, {"longitude": -87.64, "latitude": 41.87}, {"longitude": -87.62, "latitude": 41.89}, {"longitude": -87.65, "latitude": 41.86}, {"longitude": -87.61, "latitude": 41.9}]'

---

Financial Analysis

Stock Price with Bollinger Bands

Technical analysis overlay showing price volatility and potential reversal points.

View Source

type: bollinger
engine: d3
x: date
y: close
title: AAPL Stock with Bollinger Bands
period: 5
standardDeviations: 2
width: 700
height: 400
data:
  source: '[{"date": "2024-01-02", "close": 185.5}, {"date": "2024-01-03", "close": 184.2}, {"date": "2024-01-04", "close": 182.8}, {"date": "2024-01-05", "close": 185.0}, {"date": "2024-01-08", "close": 186.5}, {"date": "2024-01-09", "close": 188.2}, {"date": "2024-01-10", "close": 187.5}, {"date": "2024-01-11", "close": 190.0}, {"date": "2024-01-12", "close": 189.2}, {"date": "2024-01-16", "close": 191.5}, {"date": "2024-01-17", "close": 193.0}, {"date": "2024-01-18", "close": 192.5}, {"date": "2024-01-19", "close": 195.2}, {"date": "2024-01-22", "close": 194.8}, {"date": "2024-01-23", "close": 196.5}, {"date": "2024-01-24", "close": 198.0}, {"date": "2024-01-25", "close": 197.2}, {"date": "2024-01-26", "close": 199.5}]'

Crypto Price Action

Candlestick chart for cryptocurrency trading analysis.

View Source

type: candlestick
engine: d3
title: BTC/USD Daily
dateField: date
openField: open
highField: high
lowField: low
closeField: close
upColor: "#22c55e"
downColor: "#ef4444"
width: 700
height: 400
data:
  source: '[{"date": "2024-01-01", "open": 42500, "high": 43200, "low": 42100, "close": 42800}, {"date": "2024-01-02", "open": 42800, "high": 43800, "low": 42600, "close": 43500}, {"date": "2024-01-03", "open": 43500, "high": 44200, "low": 43100, "close": 43200}, {"date": "2024-01-04", "open": 43200, "high": 43600, "low": 42400, "close": 42600}, {"date": "2024-01-05", "open": 42600, "high": 43900, "low": 42500, "close": 43700}, {"date": "2024-01-06", "open": 43700, "high": 45100, "low": 43500, "close": 44800}, {"date": "2024-01-07", "open": 44800, "high": 45500, "low": 44200, "close": 44500}, {"date": "2024-01-08", "open": 44500, "high": 46200, "low": 44300, "close": 45900}, {"date": "2024-01-09", "open": 45900, "high": 46800, "low": 45100, "close": 45400}, {"date": "2024-01-10", "open": 45400, "high": 47200, "low": 45200, "close": 46800}]'

---

Trend Comparison

Year-over-Year Performance

Slope chart comparing metrics between two time periods.

View Source

type: slope
engine: d3
x: metric
y: value
time: year
title: Department Performance 2023 vs 2024
leftLabel: "2023"
rightLabel: "2024"
lineWidth: 3
dotRadius: 6
width: 500
height: 400
data:
  source: '[{"metric": "Engineering", "value": 82, "year": "2023"}, {"metric": "Engineering", "value": 91, "year": "2024"}, {"metric": "Sales", "value": 78, "year": "2023"}, {"metric": "Sales", "value": 85, "year": "2024"}, {"metric": "Marketing", "value": 71, "year": "2023"}, {"metric": "Marketing", "value": 68, "year": "2024"}, {"metric": "Operations", "value": 88, "year": "2023"}, {"metric": "Operations", "value": 92, "year": "2024"}, {"metric": "HR", "value": 65, "year": "2023"}, {"metric": "HR", "value": 75, "year": "2024"}]'

---

Multi-Dimensional Analysis

Product Attributes Comparison

Parallel coordinates chart for comparing multiple product dimensions.

View Source

type: parallel-coords
engine: d3
title: Product Comparison
color: category
lineOpacity: 0.6
width: 700
height: 400
dimensions:
  - price
  - quality
  - durability
  - satisfaction
data:
  source: '[{"name": "Product A", "category": "Premium", "price": 95, "quality": 92, "durability": 88, "satisfaction": 90}, {"name": "Product B", "category": "Premium", "price": 88, "quality": 85, "durability": 92, "satisfaction": 87}, {"name": "Product C", "category": "Standard", "price": 65, "quality": 72, "durability": 78, "satisfaction": 75}, {"name": "Product D", "category": "Standard", "price": 58, "quality": 68, "durability": 72, "satisfaction": 70}, {"name": "Product E", "category": "Budget", "price": 35, "quality": 55, "durability": 60, "satisfaction": 62}, {"name": "Product F", "category": "Budget", "price": 42, "quality": 58, "durability": 55, "satisfaction": 58}, {"name": "Product G", "category": "Premium", "price": 92, "quality": 90, "durability": 95, "satisfaction": 93}, {"name": "Product H", "category": "Standard", "price": 70, "quality": 75, "durability": 80, "satisfaction": 78}]'

Time Series Compression

Horizon chart for comparing multiple time series in compact space.

View Source

type: horizon
engine: d3
x: month
y: deviation
title: Monthly Performance Deviation
bands: 4
colorScheme: schemeRdBu
width: 700
height: 200
data:
  source: '[{"month": "Jan", "deviation": 2.5}, {"month": "Feb", "deviation": 1.8}, {"month": "Mar", "deviation": -0.5}, {"month": "Apr", "deviation": -1.2}, {"month": "May", "deviation": 0.8}, {"month": "Jun", "deviation": 3.2}, {"month": "Jul", "deviation": 4.5}, {"month": "Aug", "deviation": 2.1}, {"month": "Sep", "deviation": -0.8}, {"month": "Oct", "deviation": -2.1}, {"month": "Nov", "deviation": 1.5}, {"month": "Dec", "deviation": 3.8}]'

---

Best Practices

Choosing the Right Chart

Analysis Goal	Recommended Chart
Compare distributions across groups	Boxplot, Violin
Show distribution shape	Histogram, Ridgeline
Identify density clusters	Contour
Financial technical analysis	Bollinger, Candlestick
Before/after comparison	Slope
Multi-variable relationships	Parallel Coordinates
Compact time series comparison	Horizon

Configuration Tips

1. Boxplots: Use showOutliers: true to identify unusual values
2. Histograms: Adjust bins based on data size (sqrt of n is a good start)
3. Ridgelines: Set overlap between 0.5-0.8 for best readability
4. Contours: Increase bandwidth for smoother density estimation
5. Bollinger: Standard period: 20 and standardDeviations: 2 work well

---

See Also

• D3 Chart Reference - Complete analysis chart documentation
• Statistical Visualizations - Observable Plot statistics
• D3 Framework Examples - All D3 chart types