Analysis Charts
Explore statistical distributions and identify patterns in your data. These charts reveal the shape, spread, and central tendency of datasets, making them essential for understanding variation, detecting outliers, and comparing groups.
Boxplot
Summarize a distribution with five key statistics: minimum, first quartile, median, third quartile, and maximum. Boxplots expose outliers as individual points and enable quick comparisons across multiple groups. Use them when you need to compare distributions without showing every data point.
Configuration
| Parameter | Type | Default | Description |
|---|---|---|---|
type | string | - | 'boxplot' |
x | string | required | Group/category field |
y | string | required | Numeric value field |
boxWidth | number | 0.6 | Width of box (0-1) |
showOutliers | boolean | true | Display outlier points |
whiskerRatio | number | 1.5 | IQR multiplier for whiskers |
color | string | - | Field for color grouping |
colorScheme | string | 'schemeCategory10' | Color palette |
Basic Example
View Source
type: boxplot
engine: d3
x: department
y: salary
title: Salary Distribution by Department
showOutliers: true
width: 500
height: 350
data:
source: '[{"department": "Engineering", "salary": 95000}, {"department": "Engineering", "salary": 105000}, {"department": "Engineering", "salary": 115000}, {"department": "Engineering", "salary": 125000}, {"department": "Engineering", "salary": 88000}, {"department": "Sales", "salary": 65000}, {"department": "Sales", "salary": 72000}, {"department": "Sales", "salary": 78000}, {"department": "Sales", "salary": 85000}, {"department": "Marketing", "salary": 62000}, {"department": "Marketing", "salary": 68000}, {"department": "Marketing", "salary": 74000}, {"department": "Marketing", "salary": 71000}]'Grouped Boxplot
View Source
type: boxplot
engine: d3
x: department
y: salary
color: level
title: Salary by Department and Level
boxWidth: 0.5
colorScheme: schemeSet2
width: 550
height: 350
data:
source: '[{"department": "Engineering", "salary": 95000, "level": "Junior"}, {"department": "Engineering", "salary": 125000, "level": "Senior"}, {"department": "Engineering", "salary": 85000, "level": "Junior"}, {"department": "Engineering", "salary": 135000, "level": "Senior"}, {"department": "Sales", "salary": 55000, "level": "Junior"}, {"department": "Sales", "salary": 85000, "level": "Senior"}, {"department": "Sales", "salary": 60000, "level": "Junior"}, {"department": "Sales", "salary": 90000, "level": "Senior"}]'Histogram
Show how continuous data distributes across value ranges by grouping observations into bins. Histograms reveal the shape of your data—whether it's normal, skewed, bimodal, or uniform. Adjust the number of bins to balance detail against noise; too few bins hide patterns, too many create false peaks.
Configuration
| Parameter | Type | Default | Description |
|---|---|---|---|
type | string | - | 'histogram' |
x | string | required | Numeric field to bin |
bins | number | 20 | Number of bins |
normalize | boolean | false | Show density instead of counts |
color | string | - | Fill color or field |
colorScheme | string | 'schemeCategory10' | Color palette |
Basic Example
View Source
type: histogram
engine: d3
x: age
title: Age Distribution
bins: 12
width: 500
height: 300
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}]'Normalized (Density)
View Source
type: histogram
engine: d3
x: score
normalize: true
title: Score Density
bins: 15
width: 500
height: 300
data:
source: '[{"score": 65}, {"score": 72}, {"score": 78}, {"score": 82}, {"score": 85}, {"score": 88}, {"score": 91}, {"score": 75}, {"score": 79}, {"score": 83}, {"score": 86}, {"score": 89}, {"score": 70}, {"score": 74}, {"score": 77}, {"score": 81}, {"score": 84}, {"score": 87}, {"score": 90}, {"score": 93}, {"score": 68}, {"score": 73}, {"score": 80}, {"score": 76}]'Ridgeline
Compare multiple distributions by stacking density plots vertically with slight overlap. Ridgeline charts (also called joy plots) excel at showing how distributions shift across ordered categories like months, years, or experimental conditions. The overlap creates a compact visualization that would otherwise require many separate plots.
Configuration
| Parameter | Type | Default | Description |
|---|---|---|---|
type | string | - | 'ridgeline' |
x | string | required | Numeric value field |
group | string | required | Grouping field for rows |
overlap | number | 0.6 | Vertical overlap (0-1) |
bandwidth | number | 10 | KDE bandwidth |
colorScheme | string | 'schemeCategory10' | Color palette |
Basic Example
View Source
type: ridgeline
engine: d3
x: temperature
group: month
title: Temperature Distribution by Month
overlap: 0.7
width: 500
height: 400
data:
source: '[{"month": "Jan", "temperature": 32}, {"month": "Jan", "temperature": 35}, {"month": "Jan", "temperature": 30}, {"month": "Jan", "temperature": 28}, {"month": "Feb", "temperature": 38}, {"month": "Feb", "temperature": 42}, {"month": "Feb", "temperature": 35}, {"month": "Feb", "temperature": 40}, {"month": "Mar", "temperature": 52}, {"month": "Mar", "temperature": 48}, {"month": "Mar", "temperature": 55}, {"month": "Mar", "temperature": 50}, {"month": "Apr", "temperature": 62}, {"month": "Apr", "temperature": 58}, {"month": "Apr", "temperature": 65}, {"month": "Apr", "temperature": 60}]'Violin
Combine the statistical summary of a boxplot with the full shape of a kernel density estimate. Violin charts mirror the density curve on both sides, creating a symmetric shape that reveals distribution characteristics boxplots conceal: multiple modes, asymmetry, and the full spread of data concentration.
Configuration
| Parameter | Type | Default | Description |
|---|---|---|---|
type | string | - | 'violin' |
x | string | required | Group/category field |
y | string | required | Numeric value field |
bandwidth | number | 10 | KDE bandwidth |
showBox | boolean | true | Show inner boxplot |
colorScheme | string | 'schemeCategory10' | Color palette |
Basic Example
View Source
type: violin
engine: d3
x: species
y: sepalLength
title: Sepal Length by Species
width: 500
height: 350
data:
source: '[{"species": "setosa", "sepalLength": 5.1}, {"species": "setosa", "sepalLength": 4.9}, {"species": "setosa", "sepalLength": 4.7}, {"species": "setosa", "sepalLength": 5.0}, {"species": "setosa", "sepalLength": 5.4}, {"species": "versicolor", "sepalLength": 7.0}, {"species": "versicolor", "sepalLength": 6.4}, {"species": "versicolor", "sepalLength": 6.9}, {"species": "versicolor", "sepalLength": 5.5}, {"species": "versicolor", "sepalLength": 6.5}, {"species": "virginica", "sepalLength": 6.3}, {"species": "virginica", "sepalLength": 5.8}, {"species": "virginica", "sepalLength": 7.1}, {"species": "virginica", "sepalLength": 6.3}, {"species": "virginica", "sepalLength": 6.5}]'Contour
Visualize the density of two-dimensional point data using contour lines or filled regions. Contour charts transform scattered points into a topographic map where elevation represents data concentration. They reveal clusters, patterns, and density gradients that scatter plots obscure when data points overlap.
Configuration
| Parameter | Type | Default | Description |
|---|---|---|---|
type | string | - | 'contour' |
x | string | required | X-axis numeric field |
y | string | required | Y-axis numeric field |
bandwidth | number | 20 | Smoothing bandwidth |
thresholds | number | 10 | Number of contour levels |
colorScheme | string | 'schemeBlues' | Color palette |
Basic Example
View Source
type: contour
engine: d3
x: x
y: y
title: Density Map
thresholds: 10
colorScheme: schemeYlOrRd
width: 500
height: 400
data:
source: '[{"x": 10, "y": 20}, {"x": 12, "y": 22}, {"x": 11, "y": 21}, {"x": 15, "y": 25}, {"x": 14, "y": 24}, {"x": 13, "y": 23}, {"x": 30, "y": 40}, {"x": 32, "y": 42}, {"x": 31, "y": 41}, {"x": 28, "y": 38}, {"x": 29, "y": 39}, {"x": 50, "y": 30}, {"x": 52, "y": 32}, {"x": 51, "y": 31}, {"x": 48, "y": 28}, {"x": 49, "y": 29}, {"x": 20, "y": 35}, {"x": 22, "y": 37}, {"x": 21, "y": 36}]'Bollinger
Overlay price data with a moving average and volatility bands. Bollinger Bands plot a simple moving average with upper and lower bands at a configurable number of standard deviations. Traders use them to identify overbought and oversold conditions: prices near the upper band suggest overextension, while touches of the lower band may signal buying opportunities.
Configuration
| Parameter | Type | Default | Description |
|---|---|---|---|
type | string | - | 'bollinger' |
x | string | required | Date/time field |
y | string | required | Price/value field |
period | number | 20 | Moving average period |
standardDeviations | number | 2 | Band width in std devs |
colorScheme | string | - | Color palette |
Basic Example
View Source
type: bollinger
engine: d3
x: date
y: close
title: Price with Bollinger Bands
period: 5
standardDeviations: 2
width: 550
height: 350
data:
source: '[{"date": "2024-01-01", "close": 100}, {"date": "2024-01-02", "close": 102}, {"date": "2024-01-03", "close": 101}, {"date": "2024-01-04", "close": 105}, {"date": "2024-01-05", "close": 108}, {"date": "2024-01-06", "close": 106}, {"date": "2024-01-07", "close": 110}, {"date": "2024-01-08", "close": 112}, {"date": "2024-01-09", "close": 109}, {"date": "2024-01-10", "close": 115}, {"date": "2024-01-11", "close": 118}, {"date": "2024-01-12", "close": 116}, {"date": "2024-01-13", "close": 120}, {"date": "2024-01-14", "close": 122}]'Heatmap
Display values in a 2D grid with color intensity representing magnitude. Heatmaps excel at showing correlation matrices, time-based patterns, or any data with two categorical dimensions and a numeric value.
Configuration
| Parameter | Type | Default | Description |
|---|---|---|---|
type | string | - | 'heatmap' |
x | string | required | Column field |
y | string | required | Row field |
colorScheme | string | 'RdYlBu' | Color scheme (viridis, plasma, turbo, inferno, magma, cool, warm, RdYlGn) |
colorDomain | array | auto | [min, max] for color scale |
reverseColors | boolean | false | Reverse color scale direction |
showValues | boolean | true | Show numeric values in cells |
showLegend | boolean | true | Show color legend |
format | string | '.2f' | Number format for values |
xLabel | string | - | X-axis label |
yLabel | string | - | Y-axis label |
Basic Example
View Source
type: heatmap
engine: d3
colorScheme: viridis
showValues: true
showLegend: true
title: Correlation Matrix
width: 500
height: 400
data:
source: '[{"x": "A", "y": "A", "value": 1.0}, {"x": "A", "y": "B", "value": 0.8}, {"x": "A", "y": "C", "value": 0.3}, {"x": "B", "y": "A", "value": 0.8}, {"x": "B", "y": "B", "value": 1.0}, {"x": "B", "y": "C", "value": 0.6}, {"x": "C", "y": "A", "value": 0.3}, {"x": "C", "y": "B", "value": 0.6}, {"x": "C", "y": "C", "value": 1.0}]'Activity Heatmap
View Source
type: heatmap
engine: d3
colorScheme: RdYlGn
showValues: false
title: Weekly Activity
width: 600
height: 300
data:
source: '[{"x": "Mon", "y": "Morning", "value": 5}, {"x": "Mon", "y": "Afternoon", "value": 8}, {"x": "Mon", "y": "Evening", "value": 3}, {"x": "Tue", "y": "Morning", "value": 7}, {"x": "Tue", "y": "Afternoon", "value": 9}, {"x": "Tue", "y": "Evening", "value": 4}, {"x": "Wed", "y": "Morning", "value": 6}, {"x": "Wed", "y": "Afternoon", "value": 7}, {"x": "Wed", "y": "Evening", "value": 5}, {"x": "Thu", "y": "Morning", "value": 8}, {"x": "Thu", "y": "Afternoon", "value": 6}, {"x": "Thu", "y": "Evening", "value": 2}, {"x": "Fri", "y": "Morning", "value": 4}, {"x": "Fri", "y": "Afternoon", "value": 5}, {"x": "Fri", "y": "Evening", "value": 7}]'Type Aliases
| Primary | Aliases |
|---|---|
boxplot | box-plot, box-and-whisker, analysis/boxplot |
histogram | frequency, analysis/histogram |
ridgeline | joyplot, joy-plot, analysis/ridgeline |
violin | analysis/violin |
contour | analysis/contour, density-2d |
bollinger | analysis/bollinger, bollinger-bands |
heatmap | correlation, matrix, analysis/heatmap |