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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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.
View Source
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