Dot Charts

Point-based visualizations that preserve individual data points while organizing them for clarity. Unlike scatter plots that can suffer from overplotting, these charts use force simulation or jittering to prevent overlap while maintaining the connection between each dot and its value.

Beeswarm

Arrange individual points along an axis using force simulation to prevent overlap. Beeswarm plots show every data point while clustering them around their true position. The result reveals distribution shape, density, and individual values simultaneously—something histograms and box plots sacrifice for summarization.

Configuration

Parameter	Type	Default	Description
type	string	-	'beeswarm'
x	string	required	Numeric value field
y	string	-	Category field (optional)
radius	number	5	Dot radius
strength	number	0.5	Force simulation strength
color	string	-	Field for color grouping
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: beeswarm
engine: d3
x: value
title: Value Distribution
radius: 4
width: 500
height: 250
data:
  source: '[{"value": 23}, {"value": 25}, {"value": 27}, {"value": 24}, {"value": 26}, {"value": 28}, {"value": 30}, {"value": 29}, {"value": 31}, {"value": 33}, {"value": 35}, {"value": 32}, {"value": 45}, {"value": 47}, {"value": 48}, {"value": 46}, {"value": 50}, {"value": 52}, {"value": 55}, {"value": 60}]'

Grouped

View Source

type: beeswarm
engine: d3
x: score
y: category
color: category
title: Scores by Category
radius: 5
strength: 0.6
colorScheme: schemeSet2
width: 500
height: 300
data:
  source: '[{"score": 72, "category": "A"}, {"score": 78, "category": "A"}, {"score": 75, "category": "A"}, {"score": 80, "category": "A"}, {"score": 85, "category": "A"}, {"score": 65, "category": "B"}, {"score": 68, "category": "B"}, {"score": 70, "category": "B"}, {"score": 72, "category": "B"}, {"score": 75, "category": "B"}, {"score": 88, "category": "C"}, {"score": 90, "category": "C"}, {"score": 92, "category": "C"}, {"score": 95, "category": "C"}, {"score": 87, "category": "C"}]'

Dense Plot

View Source

type: beeswarm
engine: d3
x: measurement
radius: 3
strength: 0.8
title: Measurement Distribution
width: 500
height: 200
data:
  source: '[{"measurement": 10.2}, {"measurement": 10.5}, {"measurement": 10.3}, {"measurement": 10.8}, {"measurement": 11.0}, {"measurement": 10.9}, {"measurement": 11.2}, {"measurement": 11.5}, {"measurement": 11.3}, {"measurement": 11.8}, {"measurement": 12.0}, {"measurement": 12.2}, {"measurement": 12.5}, {"measurement": 12.8}, {"measurement": 13.0}, {"measurement": 13.2}, {"measurement": 13.5}, {"measurement": 14.0}, {"measurement": 14.2}, {"measurement": 14.5}, {"measurement": 15.0}, {"measurement": 15.5}, {"measurement": 16.0}]'

---

Type Aliases

Primary	Aliases
beeswarm	swarm, strip, dots/beeswarm