Specialized Charts
Advanced visualizations for specific use cases.
All charts on this page require engine: d3.
Statistical Analysis
Boxplot
Show distribution with quartiles and outliers.
```dg
type: boxplot
engine: d3
data:
source: |
[
{"department": "Engineering", "salary": 95000},
{"department": "Engineering", "salary": 105000},
{"department": "Engineering", "salary": 88000},
{"department": "Engineering", "salary": 125000},
{"department": "Sales", "salary": 72000},
{"department": "Sales", "salary": 85000},
{"department": "Sales", "salary": 68000},
{"department": "Marketing", "salary": 65000},
{"department": "Marketing", "salary": 75000}
]
x: department
y: salary
width: 800
height: 400
title: "Salary Distribution by Department"
```When to use: Comparing distributions across categories, spotting outliers.
Histogram
Show frequency distribution of a single variable.
```dg
type: histogram
engine: d3
data:
source: |
[
{"age": 22}, {"age": 25}, {"age": 28}, {"age": 31},
{"age": 35}, {"age": 38}, {"age": 42}, {"age": 45},
{"age": 29}, {"age": 33}, {"age": 27}, {"age": 36}
]
x: age
bins: 8
width: 600
height: 400
title: "Customer Age Distribution"
```When to use: Understanding the shape of a single numeric variable's distribution.
Violin Plot
Distribution shape with density curves.
```dg
type: violin
engine: d3
data:
source: |
[
{"server": "US-East", "latency": 45},
{"server": "US-East", "latency": 52},
{"server": "US-East", "latency": 38},
{"server": "US-West", "latency": 35},
{"server": "US-West", "latency": 42},
{"server": "US-West", "latency": 28},
{"server": "EU", "latency": 85},
{"server": "EU", "latency": 92}
]
x: server
y: latency
width: 600
height: 400
title: "API Latency by Region (ms)"
```When to use: Comparing distribution shapes across categories.
Ridgeline (Joy Plot)
Overlapping density curves for multiple groups.
```dg
type: ridgeline
engine: d3
data:
source: |
[
{"month": "January", "temp": 32},
{"month": "January", "temp": 28},
{"month": "April", "temp": 55},
{"month": "April", "temp": 58},
{"month": "July", "temp": 85},
{"month": "July", "temp": 88}
]
x: temp
group: month
width: 650
height: 450
title: "Temperature by Month"
```When to use: Showing how distributions change across a dimension (time, categories).
Contour (Density)
2D density visualization.
```dg
type: contour
engine: d3
data:
source: |
[
{"x": 35.5, "y": 139.8},
{"x": 35.7, "y": 139.6},
{"x": 34.0, "y": 135.5},
{"x": 34.2, "y": 135.3}
]
x: x
y: y
thresholds: 15
width: 600
height: 450
title: "Event Density Map"
```When to use: Showing concentration of points in 2D space.
Beeswarm
Individual points avoiding overlap.
```dg
type: beeswarm
engine: d3
data:
source: |
[
{"class": "Math", "score": 78},
{"class": "Math", "score": 85},
{"class": "Science", "score": 92},
{"class": "Science", "score": 88}
]
x: score
color: class
width: 600
height: 300
title: "Test Scores by Subject"
```When to use: Showing every data point while avoiding overlap.
Financial Charts
Candlestick
OHLC (Open, High, Low, Close) stock data.
```dg
type: candlestick
engine: d3
data:
source: |
[
{"date": "2024-01-02", "open": 185.0, "high": 186.5, "low": 183.2, "close": 185.2},
{"date": "2024-01-03", "open": 185.2, "high": 186.0, "low": 183.5, "close": 184.5},
{"date": "2024-01-04", "open": 184.5, "high": 185.2, "low": 181.8, "close": 182.8}
]
x: date
width: 700
height: 400
title: "Stock Price"
```When to use: Stock trading analysis, showing price movements.
Bollinger Bands
Price with volatility bands.
```dg
type: bollinger
engine: d3
data:
source: |
[
{"date": "2024-01-02", "price": 185.2},
{"date": "2024-01-03", "price": 184.5},
{"date": "2024-01-04", "price": 182.8},
{"date": "2024-01-05", "price": 181.2}
]
x: date
y: price
period: 10
stdDev: 2
width: 700
height: 400
title: "Price with Volatility Bands"
```When to use: Technical analysis, volatility visualization.
Horizon Chart
Compact time series with layered bands.
```dg
type: horizon
engine: d3
data:
source: |
[
{"time": "2024-01-01T00:00", "cpu": 25},
{"time": "2024-01-01T01:00", "cpu": 45},
{"time": "2024-01-01T02:00", "cpu": 72},
{"time": "2024-01-01T03:00", "cpu": 85}
]
x: time
y: cpu
bands: 4
width: 700
height: 180
title: "Server CPU Usage (%)"
```When to use: Monitoring dashboards, comparing many time series in limited space.
Comparison Charts
Slope Chart
Compare values between two points.
```dg
type: slope
engine: d3
data:
source: |
[
{"company": "TechCorp", "before": 85, "after": 92},
{"company": "DataInc", "before": 78, "after": 65},
{"company": "CloudSys", "before": 92, "after": 88}
]
x: company
y:
- before
- after
width: 550
height: 450
title: "Performance: Before vs After"
```When to use: Before/after comparisons, rankings over two periods.
Parallel Coordinates
Compare multiple dimensions simultaneously.
```dg
type: parallel-coords
engine: d3
data:
source: |
[
{"sepal_l": 5.1, "sepal_w": 3.5, "petal_l": 1.4, "species": "setosa"},
{"sepal_l": 7.0, "sepal_w": 3.2, "petal_l": 4.7, "species": "versicolor"},
{"sepal_l": 6.3, "sepal_w": 3.3, "petal_l": 6.0, "species": "virginica"}
]
dimensions:
- sepal_l
- sepal_w
- petal_l
color: species
width: 700
height: 450
title: "Iris Measurements"
```When to use: Multivariate data exploration, finding patterns across dimensions.
Radial Charts
Radial Bar
Circular bar chart.
```dg
type: radial-bar
engine: d3
data:
source: |
[
{"month": "Jan", "sales": 42000},
{"month": "Feb", "sales": 38000},
{"month": "Mar", "sales": 55000}
]
x: month
y: sales
width: 550
height: 550
title: "Monthly Sales"
```When to use: Cyclical data (months, hours), aesthetic presentation.
Radial Area
Wind rose or radar-style charts.
```dg
type: radial-area
engine: d3
data:
source: |
[
{"direction": "N", "speed": 12.5},
{"direction": "E", "speed": 7.2},
{"direction": "S", "speed": 8.5},
{"direction": "W", "speed": 12.2}
]
x: direction
y: speed
width: 550
height: 550
title: "Wind Speed by Direction"
```When to use: Directional data, cyclical patterns.
Animated Charts
Bar Race
Animated ranking over time.
```dg
type: bar-race
engine: d3
data:
source: |
[
{"company": "Apple", "value": 2100, "year": 2020},
{"company": "Microsoft", "value": 1680, "year": 2020},
{"company": "Apple", "value": 2900, "year": 2021},
{"company": "Microsoft", "value": 2520, "year": 2021}
]
x: company
y: value
time: year
topN: 6
width: 700
height: 400
title: "Market Cap Race ($B)"
```When to use: Ranking changes over time, engaging presentations.
Streamgraph
Flowing stacked areas.
```dg
type: streamgraph
engine: d3
data:
source: |
[
{"year": "2020", "pop": 28, "rock": 22, "hiphop": 25},
{"year": "2021", "pop": 26, "rock": 20, "hiphop": 28},
{"year": "2022", "pop": 24, "rock": 18, "hiphop": 30}
]
x: year
keys:
- pop
- rock
- hiphop
offset: silhouette
width: 700
height: 450
title: "Music Genre Share (%)"
```When to use: Composition changes over time, organic aesthetic.
Interactive Charts
Brushable Scatter
Scatter plot with selection brush.
```dg
type: brushable-scatter
engine: d3
data:
source: |
[
{"mpg": 21.0, "hp": 110, "origin": "USA"},
{"mpg": 26.0, "hp": 97, "origin": "Europe"},
{"mpg": 32.0, "hp": 65, "origin": "Japan"}
]
x: hp
y: mpg
color: origin
width: 650
height: 450
title: "MPG vs Horsepower (brush to select)"
```When to use: Exploring large datasets, selecting subsets for analysis.
Configuration Reference
| Chart Type | Key Options |
|---|---|
boxplot | x, y |
histogram | x, bins |
violin | x, y |
ridgeline | x, group, overlap |
contour | x, y, thresholds |
beeswarm | x, color |
candlestick | x, open, high, low, close |
bollinger | x, y, period, stdDev |
horizon | x, y, bands |
slope | x, y: [before, after] |
parallel-coords | dimensions, color |
radial-bar | x, y |
radial-area | x, y |
bar-race | x, y, time, topN |
streamgraph | x, keys, offset |
brushable-scatter | x, y, color |
Tips
Tip: All specialized charts require
engine: d3. If you see an error, make sure you've added it.
Performance: For large datasets (500+ points), use external files:
yamldata: file: data/large-dataset.json
See Also
- Bar Charts - Basic comparisons
- Line Charts - Time series
- Scatter Plots - Relationships