Statistical Visualizations - Complete Examples

This guide provides comprehensive examples for histograms, box plots, density plots, and heatmaps using the DataGlass plugin for Obsidian.

---

Table of Contents

1. Histograms

   • Basic Histogram
   • Custom Binning
   • Stacked Histogram
   • Histogram with Density Overlay

2. Box Plots

   • Basic Box Plot
   • Grouped Box Plots
   • Box Plot with Outliers
   • Horizontal Box Plot

3. Density Plots

   • Basic Density Plot
   • Overlapping Density Curves
   • Filled Density Plot
   • Ridgeline Plot

4. Heatmaps

   • Basic Heatmap
   • Correlation Matrix
   • Temporal Heatmap
   • Custom Color Schemes

---

Histograms

Histogram: Basic

Distribution analysis showing frequency of values in bins.

View Source

data:
  source: [
    {"value": 65}, {"value": 68}, {"value": 72}, {"value": 75}, {"value": 78},
    {"value": 71}, {"value": 74}, {"value": 82}, {"value": 79}, {"value": 86},
    {"value": 92}, {"value": 77}, {"value": 84}, {"value": 89}, {"value": 76},
    {"value": 83}, {"value": 87}, {"value": 94}, {"value": 81}, {"value": 75},
    {"value": 90}, {"value": 73}, {"value": 80}, {"value": 95}, {"value": 71},
    {"value": 85}, {"value": 88}, {"value": 91}, {"value": 74}, {"value": 82},
    {"value": 79}, {"value": 86}, {"value": 92}, {"value": 77}, {"value": 84},
    {"value": 89}, {"value": 76}, {"value": 83}, {"value": 87}, {"value": 94},
    {"value": 81}, {"value": 75}, {"value": 90}, {"value": 73}, {"value": 80},
    {"value": 95}, {"value": 71}, {"value": 85}, {"value": 88}, {"value": 91}
  ]
type: histogram
engine: plot
x: value
y: value
title: Test Score Distribution
width: 600
height: 400
marks:
  - type: rectY
    configuration:
      x: value
      fill: steelblue
      tip: true

Histogram: Custom Binning

Control bin widths for better data representation.

View Source

data:
  source: [
    {"age": 22}, {"age": 25}, {"age": 28}, {"age": 31}, {"age": 35},
    {"age": 19}, {"age": 42}, {"age": 38}, {"age": 27}, {"age": 33},
    {"age": 29}, {"age": 48}, {"age": 24}, {"age": 39}, {"age": 36},
    {"age": 52}, {"age": 41}, {"age": 26}, {"age": 34}, {"age": 47},
    {"age": 21}, {"age": 44}, {"age": 37}, {"age": 30}, {"age": 45},
    {"age": 23}, {"age": 49}, {"age": 32}, {"age": 40}, {"age": 46},
    {"age": 20}, {"age": 43}, {"age": 36}, {"age": 29}, {"age": 51},
    {"age": 24}, {"age": 47}, {"age": 33}, {"age": 38}, {"age": 54},
    {"age": 26}, {"age": 50}, {"age": 35}, {"age": 41}, {"age": 55},
    {"age": 28}, {"age": 46}, {"age": 37}, {"age": 44}, {"age": 53}
  ]
type: histogram
engine: plot
x: age
title: Age Distribution (Custom Bins)
width: 600
height: 400
marks:
  - type: rectY
    configuration:
      x: age
      fill: steelblue
      tip: true
      thresholds: [18, 25, 35, 45, 55, 65]

Histogram: Stacked

Compare distributions across multiple categories.

View Source

data:
  source: [
    {"value": 45, "region": "North"}, {"value": 52, "region": "North"}, {"value": 58, "region": "North"},
    {"value": 65, "region": "North"}, {"value": 72, "region": "North"}, {"value": 78, "region": "North"},
    {"value": 51, "region": "North"}, {"value": 59, "region": "North"}, {"value": 66, "region": "North"},
    {"value": 73, "region": "North"}, {"value": 48, "region": "North"}, {"value": 55, "region": "North"},
    {"value": 50, "region": "South"}, {"value": 57, "region": "South"}, {"value": 63, "region": "South"},
    {"value": 70, "region": "South"}, {"value": 77, "region": "South"}, {"value": 83, "region": "South"},
    {"value": 54, "region": "South"}, {"value": 61, "region": "South"}, {"value": 68, "region": "South"},
    {"value": 75, "region": "South"}, {"value": 52, "region": "South"}, {"value": 59, "region": "South"},
    {"value": 48, "region": "East"}, {"value": 55, "region": "East"}, {"value": 61, "region": "East"},
    {"value": 68, "region": "East"}, {"value": 75, "region": "East"}, {"value": 81, "region": "East"},
    {"value": 53, "region": "East"}, {"value": 60, "region": "East"}, {"value": 67, "region": "East"},
    {"value": 74, "region": "East"}, {"value": 50, "region": "East"}, {"value": 57, "region": "East"},
    {"value": 53, "region": "West"}, {"value": 60, "region": "West"}, {"value": 66, "region": "West"},
    {"value": 73, "region": "West"}, {"value": 80, "region": "West"}, {"value": 86, "region": "West"},
    {"value": 58, "region": "West"}, {"value": 65, "region": "West"}, {"value": 72, "region": "West"},
    {"value": 79, "region": "West"}, {"value": 55, "region": "West"}, {"value": 62, "region": "West"},
    {"value": 69, "region": "West"}, {"value": 76, "region": "West"}
  ]
type: histogram
engine: plot
x: value
color: region
title: Regional Sales Distribution
width: 600
height: 400
marks:
  - type: rectY
    configuration:
      x: value
      fill: region
      tip: true

Histogram: With Density Overlay

Combine histogram with smooth density curve.

View Source

data:
  source: [
    {"temperature": 18.5}, {"temperature": 19.2}, {"temperature": 20.1}, {"temperature": 21.3},
    {"temperature": 22.0}, {"temperature": 22.5}, {"temperature": 23.1}, {"temperature": 23.8},
    {"temperature": 24.2}, {"temperature": 24.6}, {"temperature": 25.0}, {"temperature": 25.5},
    {"temperature": 26.1}, {"temperature": 26.8}, {"temperature": 27.2}, {"temperature": 27.9},
    {"temperature": 28.3}, {"temperature": 28.7}, {"temperature": 29.1}, {"temperature": 29.8},
    {"temperature": 22.3}, {"temperature": 23.5}, {"temperature": 24.8}, {"temperature": 25.3},
    {"temperature": 26.5}, {"temperature": 21.7}, {"temperature": 20.5}, {"temperature": 19.8},
    {"temperature": 23.2}, {"temperature": 24.5}, {"temperature": 25.8}, {"temperature": 26.2},
    {"temperature": 27.5}, {"temperature": 22.8}, {"temperature": 21.1}, {"temperature": 20.3},
    {"temperature": 24.1}, {"temperature": 25.4}, {"temperature": 26.7}, {"temperature": 27.1},
    {"temperature": 28.4}, {"temperature": 23.7}, {"temperature": 22.2}, {"temperature": 21.5},
    {"temperature": 25.1}, {"temperature": 26.4}, {"temperature": 27.7}, {"temperature": 28.1},
    {"temperature": 29.4}, {"temperature": 24.3}
  ]
type: histogram
engine: plot
x: temperature
title: Temperature Distribution with Density
width: 600
height: 400
marks:
  - type: rectY
    configuration:
      x: temperature
      fill: steelblue
      fillOpacity: 0.5
      tip: true
  - type: density
    configuration:
      x: temperature
      stroke: darkblue
      strokeWidth: 2

---

Box Plots

Box Plot: Basic

Display quartiles, median, and range of a distribution.

View Source

data:
  source: [
    {"value": 45}, {"value": 52}, {"value": 58}, {"value": 61}, {"value": 65},
    {"value": 68}, {"value": 72}, {"value": 75}, {"value": 78}, {"value": 82},
    {"value": 85}, {"value": 88}, {"value": 91}, {"value": 94}, {"value": 97},
    {"value": 55}, {"value": 63}, {"value": 70}, {"value": 77}, {"value": 84},
    {"value": 50}, {"value": 57}, {"value": 64}, {"value": 71}, {"value": 79},
    {"value": 86}, {"value": 93}, {"value": 60}, {"value": 67}, {"value": 74},
    {"value": 81}, {"value": 89}, {"value": 53}, {"value": 62}, {"value": 69},
    {"value": 76}, {"value": 83}, {"value": 90}, {"value": 48}, {"value": 56},
    {"value": 66}, {"value": 73}, {"value": 80}, {"value": 87}, {"value": 95},
    {"value": 59}, {"value": 68}, {"value": 75}, {"value": 82}, {"value": 92}
  ]
type: boxplot
engine: plot
y: value
title: Value Distribution Summary
width: 600
height: 400
marks:
  - type: boxY
    configuration:
      y: value
      fill: steelblue
      tip: true

Box Plot: Grouped

Compare distributions across categories.

View Source

data:
  source: [
    {"category": "North", "value": 65}, {"category": "North", "value": 72}, {"category": "North", "value": 78},
    {"category": "North", "value": 85}, {"category": "North", "value": 91}, {"category": "North", "value": 88},
    {"category": "North", "value": 70}, {"category": "North", "value": 76}, {"category": "North", "value": 82},
    {"category": "North", "value": 89}, {"category": "North", "value": 75}, {"category": "North", "value": 81},
    {"category": "South", "value": 70}, {"category": "South", "value": 75}, {"category": "South", "value": 80},
    {"category": "South", "value": 82}, {"category": "South", "value": 88}, {"category": "South", "value": 92},
    {"category": "South", "value": 77}, {"category": "South", "value": 83}, {"category": "South", "value": 86},
    {"category": "South", "value": 90}, {"category": "South", "value": 74}, {"category": "South", "value": 79},
    {"category": "East", "value": 60}, {"category": "East", "value": 68}, {"category": "East", "value": 73},
    {"category": "East", "value": 79}, {"category": "East", "value": 84}, {"category": "East", "value": 90},
    {"category": "East", "value": 65}, {"category": "East", "value": 71}, {"category": "East", "value": 76},
    {"category": "East", "value": 82}, {"category": "East", "value": 87}, {"category": "East", "value": 93},
    {"category": "West", "value": 75}, {"category": "West", "value": 80}, {"category": "West", "value": 85},
    {"category": "West", "value": 88}, {"category": "West", "value": 93}, {"category": "West", "value": 96},
    {"category": "West", "value": 78}, {"category": "West", "value": 83}, {"category": "West", "value": 87},
    {"category": "West", "value": 91}, {"category": "West", "value": 81}, {"category": "West", "value": 86}
  ]
engine: plot
x: category
y: value
color: category
title: Regional Sales Comparison
width: 600
height: 400
marks:
  - type: boxY
    configuration:
      x: category
      y: value
      fill: category
      tip: true

Box Plot: With Outliers

Detect and visualize outliers using IQR method.

View Source

data:
  source: [
    {"value": 50}, {"value": 52}, {"value": 55}, {"value": 58}, {"value": 60},
    {"value": 62}, {"value": 65}, {"value": 67}, {"value": 70}, {"value": 72},
    {"value": 75}, {"value": 78}, {"value": 80}, {"value": 82}, {"value": 85},
    {"value": 53}, {"value": 57}, {"value": 61}, {"value": 64}, {"value": 68},
    {"value": 71}, {"value": 74}, {"value": 77}, {"value": 79}, {"value": 83},
    {"value": 54}, {"value": 59}, {"value": 63}, {"value": 66}, {"value": 69},
    {"value": 73}, {"value": 76}, {"value": 81}, {"value": 84}, {"value": 56},
    {"value": 15}, {"value": 20}, {"value": 18}, {"value": 22},
    {"value": 120}, {"value": 125}, {"value": 118}, {"value": 122},
    {"value": 61}, {"value": 65}, {"value": 69}, {"value": 74}, {"value": 78}
  ]
engine: plot
y: value
title: Distribution with Outliers
width: 600
height: 400
marks:
  - type: boxY
    configuration:
      y: value
      fill: steelblue
      tip: true

Box Plot: Horizontal

Horizontal orientation for better label readability.

View Source

data:
  source: [
    {"dept": "Customer Support", "score": 65}, {"dept": "Customer Support", "score": 72},
    {"dept": "Customer Support", "score": 78}, {"dept": "Customer Support", "score": 85},
    {"dept": "Customer Support", "score": 68}, {"dept": "Customer Support", "score": 75},
    {"dept": "Customer Support", "score": 81}, {"dept": "Customer Support", "score": 70},
    {"dept": "Customer Support", "score": 77}, {"dept": "Customer Support", "score": 83},
    {"dept": "Product Dev", "score": 70}, {"dept": "Product Dev", "score": 75},
    {"dept": "Product Dev", "score": 82}, {"dept": "Product Dev", "score": 88},
    {"dept": "Product Dev", "score": 73}, {"dept": "Product Dev", "score": 79},
    {"dept": "Product Dev", "score": 85}, {"dept": "Product Dev", "score": 76},
    {"dept": "Product Dev", "score": 81}, {"dept": "Product Dev", "score": 87},
    {"dept": "Sales", "score": 60}, {"dept": "Sales", "score": 68},
    {"dept": "Sales", "score": 73}, {"dept": "Sales", "score": 80},
    {"dept": "Sales", "score": 64}, {"dept": "Sales", "score": 71},
    {"dept": "Sales", "score": 77}, {"dept": "Sales", "score": 67},
    {"dept": "Sales", "score": 74}, {"dept": "Sales", "score": 81},
    {"dept": "Marketing", "score": 72}, {"dept": "Marketing", "score": 78},
    {"dept": "Marketing", "score": 84}, {"dept": "Marketing", "score": 90},
    {"dept": "Marketing", "score": 75}, {"dept": "Marketing", "score": 81},
    {"dept": "Marketing", "score": 87}, {"dept": "Marketing", "score": 79},
    {"dept": "Marketing", "score": 85}, {"dept": "Marketing", "score": 91},
    {"dept": "Engineering", "score": 68}, {"dept": "Engineering", "score": 74},
    {"dept": "Engineering", "score": 80}, {"dept": "Engineering", "score": 86},
    {"dept": "Engineering", "score": 71}, {"dept": "Engineering", "score": 77},
    {"dept": "Engineering", "score": 83}, {"dept": "Engineering", "score": 75},
    {"dept": "Engineering", "score": 81}, {"dept": "Engineering", "score": 88}
  ]
engine: plot
x: score
y: dept
color: dept
title: Department Performance Scores
width: 600
height: 400
margin: 
	left: 140
marks:
  - type: boxX
    configuration:
      y: dept
      x: score
      fill: dept
      tip: true

---

Density Plots

Density Plot: Basic

Smooth distribution curve showing probability density.

View Source

data:
  source: [
    {"value": 45}, {"value": 48}, {"value": 52}, {"value": 55}, {"value": 58},
    {"value": 61}, {"value": 65}, {"value": 68}, {"value": 72}, {"value": 75},
    {"value": 78}, {"value": 82}, {"value": 85}, {"value": 88}, {"value": 91},
    {"value": 54}, {"value": 63}, {"value": 70}, {"value": 77}, {"value": 84},
    {"value": 50}, {"value": 57}, {"value": 64}, {"value": 71}, {"value": 79},
    {"value": 86}, {"value": 93}, {"value": 60}, {"value": 67}, {"value": 74},
    {"value": 81}, {"value": 89}, {"value": 53}, {"value": 62}, {"value": 69},
    {"value": 76}, {"value": 83}, {"value": 90}, {"value": 47}, {"value": 56},
    {"value": 66}, {"value": 73}, {"value": 80}, {"value": 87}, {"value": 95},
    {"value": 59}, {"value": 68}, {"value": 75}, {"value": 82}, {"value": 92}
  ]
type: density
engine: plot
title: Value Density Distribution
width: 600
height: 400
x: value
marks:
  - type: density
    configuration:
      x: value
      fill: steelblue
      fillOpacity: 0.3
      stroke: steelblue
      strokeWidth: 2
xLabel: Value
y:
  label: Density

Density Plot: Overlapping

Compare multiple distributions with overlaid curves.

View Source

data:
  source: [
    {"group": "A", "value": 50}, {"group": "A", "value": 55}, {"group": "A", "value": 60},
    {"group": "A", "value": 65}, {"group": "A", "value": 70}, {"group": "A", "value": 75},
    {"group": "A", "value": 52}, {"group": "A", "value": 57}, {"group": "A", "value": 62},
    {"group": "A", "value": 67}, {"group": "A", "value": 72}, {"group": "A", "value": 54},
    {"group": "A", "value": 59}, {"group": "A", "value": 64}, {"group": "A", "value": 69},
    {"group": "A", "value": 74}, {"group": "A", "value": 56},
    {"group": "B", "value": 60}, {"group": "B", "value": 65}, {"group": "B", "value": 70},
    {"group": "B", "value": 75}, {"group": "B", "value": 80}, {"group": "B", "value": 85},
    {"group": "B", "value": 62}, {"group": "B", "value": 67}, {"group": "B", "value": 72},
    {"group": "B", "value": 77}, {"group": "B", "value": 82}, {"group": "B", "value": 64},
    {"group": "B", "value": 69}, {"group": "B", "value": 74}, {"group": "B", "value": 79},
    {"group": "B", "value": 84}, {"group": "B", "value": 66},
    {"group": "C", "value": 45}, {"group": "C", "value": 50}, {"group": "C", "value": 55},
    {"group": "C", "value": 60}, {"group": "C", "value": 65}, {"group": "C", "value": 70},
    {"group": "C", "value": 47}, {"group": "C", "value": 52}, {"group": "C", "value": 57},
    {"group": "C", "value": 62}, {"group": "C", "value": 67}, {"group": "C", "value": 49},
    {"group": "C", "value": 54}, {"group": "C", "value": 59}, {"group": "C", "value": 64},
    {"group": "C", "value": 69}, {"group": "C", "value": 51}
  ]

engine: plot
title: Distribution Comparison Across Groups
width: 600
height: 400
marks:
  - type: density
    configuration:
      x: value
      stroke: group
      strokeWidth: 2
      fill: group
      fillOpacity: 0.2
x:
  label: Value
y:
  label: Density
color:
  legend: true

Density Plot: Filled

Emphasized area under the curve.

View Source

data:
  source: [
    {"price": 25.5}, {"price": 28.2}, {"price": 31.8}, {"price": 35.1}, {"price": 38.7},
    {"price": 42.3}, {"price": 45.9}, {"price": 49.2}, {"price": 52.8}, {"price": 56.4},
    {"price": 30.1}, {"price": 33.7}, {"price": 37.3}, {"price": 40.6}, {"price": 44.2},
    {"price": 47.8}, {"price": 51.4}, {"price": 54.7}, {"price": 58.3}, {"price": 27.3},
    {"price": 32.4}, {"price": 36.0}, {"price": 39.3}, {"price": 42.9}, {"price": 46.5},
    {"price": 50.1}, {"price": 53.4}, {"price": 57.0}, {"price": 29.6}, {"price": 34.2},
    {"price": 37.8}, {"price": 41.1}, {"price": 44.7}, {"price": 48.3}, {"price": 51.9},
    {"price": 55.2}, {"price": 58.8}, {"price": 26.7}, {"price": 31.3}, {"price": 34.9},
    {"price": 38.2}, {"price": 41.8}, {"price": 45.4}, {"price": 49.0}, {"price": 52.3},
    {"price": 55.9}, {"price": 28.9}, {"price": 33.5}, {"price": 37.1}, {"price": 40.4}
  ]
type: density
engine: plot
title: Price Density Distribution
width: 600
height: 400
x: price
marks:
  - type: density
    configuration:
      x: price
      fill: "#ff7f0e"
      fillOpacity: 0.6
      stroke: "#d62728"
      strokeWidth: 2
x:
  label: Price ($)
y:
  label: Density

Density Plot: Ridgeline

Vertically stacked density curves for temporal comparison.

View Source

data:
  source: [
    {"month": "Jan", "temp": 5}, {"month": "Jan", "temp": 7}, {"month": "Jan", "temp": 8},
    {"month": "Jan", "temp": 10}, {"month": "Jan", "temp": 12}, {"month": "Jan", "temp": 6},
    {"month": "Jan", "temp": 9}, {"month": "Jan", "temp": 11}, {"month": "Jan", "temp": 7},
    {"month": "Jan", "temp": 8}, {"month": "Jan", "temp": 10}, {"month": "Jan", "temp": 9},
    {"month": "Feb", "temp": 8}, {"month": "Feb", "temp": 10}, {"month": "Feb", "temp": 12},
    {"month": "Feb", "temp": 14}, {"month": "Feb", "temp": 16}, {"month": "Feb", "temp": 9},
    {"month": "Feb", "temp": 11}, {"month": "Feb", "temp": 13}, {"month": "Feb", "temp": 15},
    {"month": "Feb", "temp": 10}, {"month": "Feb", "temp": 12}, {"month": "Feb", "temp": 14},
    {"month": "Mar", "temp": 12}, {"month": "Mar", "temp": 15}, {"month": "Mar", "temp": 18},
    {"month": "Mar", "temp": 20}, {"month": "Mar", "temp": 22}, {"month": "Mar", "temp": 14},
    {"month": "Mar", "temp": 16}, {"month": "Mar", "temp": 19}, {"month": "Mar", "temp": 21},
    {"month": "Mar", "temp": 17}, {"month": "Mar", "temp": 19}, {"month": "Mar", "temp": 20},
    {"month": "Apr", "temp": 18}, {"month": "Apr", "temp": 20}, {"month": "Apr", "temp": 22},
    {"month": "Apr", "temp": 24}, {"month": "Apr", "temp": 26}, {"month": "Apr", "temp": 19},
    {"month": "Apr", "temp": 21}, {"month": "Apr", "temp": 23}, {"month": "Apr", "temp": 25},
    {"month": "Apr", "temp": 22}, {"month": "Apr", "temp": 24}, {"month": "Apr", "temp": 23}
  ]
type: density
engine: plot
title: Temperature Distribution by Month
width: 600
height: 500
x: temp
facet:
  y: month
marks:
  - type: density
    configuration:
      x: temp
      fill: month
      fillOpacity: 0.5
      stroke: month
      strokeWidth: 2
x:
  label: Temperature (°C)
color:
  legend: true

---

Heatmaps

Heatmap: Basic

2D data intensity visualization using color.

View Source

data:
  source: [
    {"x": "Mon", "y": "9AM", "value": 12}, {"x": "Mon", "y": "10AM", "value": 18}, {"x": "Mon", "y": "11AM", "value": 15},
    {"x": "Mon", "y": "12PM", "value": 22}, {"x": "Mon", "y": "1PM", "value": 25}, {"x": "Mon", "y": "2PM", "value": 20},
    {"x": "Tue", "y": "9AM", "value": 15}, {"x": "Tue", "y": "10AM", "value": 22}, {"x": "Tue", "y": "11AM", "value": 18},
    {"x": "Tue", "y": "12PM", "value": 26}, {"x": "Tue", "y": "1PM", "value": 28}, {"x": "Tue", "y": "2PM", "value": 23},
    {"x": "Wed", "y": "9AM", "value": 14}, {"x": "Wed", "y": "10AM", "value": 20}, {"x": "Wed", "y": "11AM", "value": 17},
    {"x": "Wed", "y": "12PM", "value": 24}, {"x": "Wed", "y": "1PM", "value": 27}, {"x": "Wed", "y": "2PM", "value": 22},
    {"x": "Thu", "y": "9AM", "value": 16}, {"x": "Thu", "y": "10AM", "value": 23}, {"x": "Thu", "y": "11AM", "value": 19},
    {"x": "Thu", "y": "12PM", "value": 28}, {"x": "Thu", "y": "1PM", "value": 30}, {"x": "Thu", "y": "2PM", "value": 25},
    {"x": "Fri", "y": "9AM", "value": 18}, {"x": "Fri", "y": "10AM", "value": 25}, {"x": "Fri", "y": "11AM", "value": 21},
    {"x": "Fri", "y": "12PM", "value": 30}, {"x": "Fri", "y": "1PM", "value": 32}, {"x": "Fri", "y": "2PM", "value": 27},
    {"x": "Sat", "y": "9AM", "value": 10}, {"x": "Sat", "y": "10AM", "value": 14}, {"x": "Sat", "y": "11AM", "value": 12},
    {"x": "Sat", "y": "12PM", "value": 18}, {"x": "Sat", "y": "1PM", "value": 20}, {"x": "Sat", "y": "2PM", "value": 16},
    {"x": "Sun", "y": "9AM", "value": 8}, {"x": "Sun", "y": "10AM", "value": 12}, {"x": "Sun", "y": "11AM", "value": 10},
    {"x": "Sun", "y": "12PM", "value": 15}, {"x": "Sun", "y": "1PM", "value": 17}, {"x": "Sun", "y": "2PM", "value": 14},
    {"x": "Mon", "y": "3PM", "value": 17}, {"x": "Tue", "y": "3PM", "value": 20}, {"x": "Wed", "y": "3PM", "value": 19},
    {"x": "Thu", "y": "3PM", "value": 22}, {"x": "Fri", "y": "3PM", "value": 24}, {"x": "Sat", "y": "3PM", "value": 13},
    {"x": "Sun", "y": "3PM", "value": 11}
  ]
type: heatmap
engine: plot
x: x
y: y
title: Activity Heatmap
width: 600
height: 400
color:
  scheme: Blues
marks:
  - type: cell
    configuration:
      x: x
      y: y
      fill: value
      tip: true

Heatmap: Correlation

Correlation matrix with diverging color scheme.

View Source

data:
  source: [
    {"var1": "Sales", "var2": "Sales", "corr": 1.0}, {"var1": "Sales", "var2": "Marketing", "corr": 0.75},
    {"var1": "Sales", "var2": "Support", "corr": 0.45}, {"var1": "Sales", "var2": "Dev", "corr": 0.32},
    {"var1": "Marketing", "var2": "Sales", "corr": 0.75}, {"var1": "Marketing", "var2": "Marketing", "corr": 1.0},
    {"var1": "Marketing", "var2": "Support", "corr": 0.52}, {"var1": "Marketing", "var2": "Dev", "corr": 0.28},
    {"var1": "Support", "var2": "Sales", "corr": 0.45}, {"var1": "Support", "var2": "Marketing", "corr": 0.52},
    {"var1": "Support", "var2": "Support", "corr": 1.0}, {"var1": "Support", "var2": "Dev", "corr": 0.68},
    {"var1": "Dev", "var2": "Sales", "corr": 0.32}, {"var1": "Dev", "var2": "Marketing", "corr": 0.28},
    {"var1": "Dev", "var2": "Support", "corr": 0.68}, {"var1": "Dev", "var2": "Dev", "corr": 1.0}
  ]
type: heatmap
engine: plot
x: var1
y: var2
title: Variable Correlation Matrix
width: 600
height: 500
color:
  scheme: RdBu
  domain: [-1, 1]
marks:
  - type: cell
    configuration:
      x: var1
      y: var2
      fill: corr
      tip: true

Heatmap: Temporal

Time-based activity patterns.

View Source

data:
  source: [
    {"day": "Mon", "hour": "6AM", "activity": 5}, {"day": "Mon", "hour": "9AM", "activity": 45}, {"day": "Mon", "hour": "12PM", "activity": 85},
    {"day": "Mon", "hour": "3PM", "activity": 75}, {"day": "Mon", "hour": "6PM", "activity": 60}, {"day": "Mon", "hour": "9PM", "activity": 25},
    {"day": "Tue", "hour": "6AM", "activity": 8}, {"day": "Tue", "hour": "9AM", "activity": 50}, {"day": "Tue", "hour": "12PM", "activity": 90},
    {"day": "Tue", "hour": "3PM", "activity": 80}, {"day": "Tue", "hour": "6PM", "activity": 65}, {"day": "Tue", "hour": "9PM", "activity": 30},
    {"day": "Wed", "hour": "6AM", "activity": 7}, {"day": "Wed", "hour": "9AM", "activity": 48}, {"day": "Wed", "hour": "12PM", "activity": 88},
    {"day": "Wed", "hour": "3PM", "activity": 78}, {"day": "Wed", "hour": "6PM", "activity": 62}, {"day": "Wed", "hour": "9PM", "activity": 28},
    {"day": "Thu", "hour": "6AM", "activity": 9}, {"day": "Thu", "hour": "9AM", "activity": 52}, {"day": "Thu", "hour": "12PM", "activity": 92},
    {"day": "Thu", "hour": "3PM", "activity": 82}, {"day": "Thu", "hour": "6PM", "activity": 68}, {"day": "Thu", "hour": "9PM", "activity": 32},
    {"day": "Fri", "hour": "6AM", "activity": 10}, {"day": "Fri", "hour": "9AM", "activity": 55}, {"day": "Fri", "hour": "12PM", "activity": 95},
    {"day": "Fri", "hour": "3PM", "activity": 85}, {"day": "Fri", "hour": "6PM", "activity": 70}, {"day": "Fri", "hour": "9PM", "activity": 35},
    {"day": "Sat", "hour": "6AM", "activity": 3}, {"day": "Sat", "hour": "9AM", "activity": 20}, {"day": "Sat", "hour": "12PM", "activity": 50},
    {"day": "Sat", "hour": "3PM", "activity": 45}, {"day": "Sat", "hour": "6PM", "activity": 40}, {"day": "Sat", "hour": "9PM", "activity": 22},
    {"day": "Sun", "hour": "6AM", "activity": 2}, {"day": "Sun", "hour": "9AM", "activity": 15}, {"day": "Sun", "hour": "12PM", "activity": 42},
    {"day": "Sun", "hour": "3PM", "activity": 38}, {"day": "Sun", "hour": "6PM", "activity": 35}, {"day": "Sun", "hour": "9PM", "activity": 18}
  ]
type: heatmap
engine: plot
x: day
y: hour
title: Weekly Activity Patterns
width: 600
height: 400
color:
  scheme: Greens
marks:
  - type: cell
    configuration:
      x: day
      y: hour
      fill: activity
      tip: true

Heatmap: Custom Colors

Demonstrate different color schemes.

View Source

data:
  source: [
    {"product": "Widget A", "region": "North", "sales": 125}, {"product": "Widget A", "region": "South", "sales": 98},
    {"product": "Widget A", "region": "East", "sales": 145}, {"product": "Widget A", "region": "West", "sales": 132},
    {"product": "Widget B", "region": "North", "sales": 88}, {"product": "Widget B", "region": "South", "sales": 112},
    {"product": "Widget B", "region": "East", "sales": 95}, {"product": "Widget B", "region": "West", "sales": 105},
    {"product": "Widget C", "region": "North", "sales": 156}, {"product": "Widget C", "region": "South", "sales": 142},
    {"product": "Widget C", "region": "East", "sales": 168}, {"product": "Widget C", "region": "West", "sales": 178},
    {"product": "Widget D", "region": "North", "sales": 92}, {"product": "Widget D", "region": "South", "sales": 85},
    {"product": "Widget D", "region": "East", "sales": 102}, {"product": "Widget D", "region": "West", "sales": 96},
    {"product": "Widget E", "region": "North", "sales": 134}, {"product": "Widget E", "region": "South", "sales": 128},
    {"product": "Widget E", "region": "East", "sales": 148}, {"product": "Widget E", "region": "West", "sales": 152},
    {"product": "Gadget A", "region": "North", "sales": 78}, {"product": "Gadget A", "region": "South", "sales": 68},
    {"product": "Gadget A", "region": "East", "sales": 82}, {"product": "Gadget A", "region": "West", "sales": 75},
    {"product": "Gadget B", "region": "North", "sales": 165}, {"product": "Gadget B", "region": "South", "sales": 158},
    {"product": "Gadget B", "region": "East", "sales": 172}, {"product": "Gadget B", "region": "West", "sales": 185}
  ]
type: heatmap
engine: plot
x: region
y: product
title: Product Sales by Region (Viridis)
width: 600
height: 400
color:
  scheme: Viridis
marks:
  - type: cell
    configuration:
      x: region
      y: product
      fill: sales
      tip: true

---

Usage Notes

General Tips

• Data Format: All examples use inline JSON with source: prefix
• Dimensions: Standard size is 600×400 pixels
• Tooltips: Enable with tip: true for interactivity
• Color Schemes: Blues, Greens, RdBu, Viridis, category10
• Grid Lines: Add with grid: true for better readability

Chart Selection Guide

• Histogram: Distribution of single continuous variable
• Box Plot: Compare distributions, identify quartiles and outliers
• Density Plot: Smooth distribution curves, probability density
• Heatmap: 2D patterns, correlations, temporal data

Color Scheme Guide

• Sequential (Blues, Greens, Viridis): Single variable intensity
• Diverging (RdBu): Data with meaningful midpoint (correlations)
• Categorical (category10): Distinct groups/categories

---

Generated for obsidian-d3 plugin - Statistical Visualizations Guide