See here for the example code that generated this page
Box and Whiskers Plot Examples
This page demonstrates the interactive Box and Whiskers plot type in JSPlots.
- Horizontal box and whiskers: Shows min, Q1, median, Q3, and max for each group
- Mean and standard deviation overlay: Red diamond markers with error bars show mean ± stdev
- Interactive grouping: Organize groups by different categorical variables
- Color coding: Groups can be colored by different attributes
- Filtering: Filter data using interactive dropdowns
- Multiple value columns: Switch between different numeric variables
Example 1: Basic Distribution Comparison
A simple example showing distributions for three groups with different means and spreads.
Features demonstrated:
- Box shows interquartile range (Q1 to Q3) with median line
- Whiskers extend to min and max values
- Red diamond markers show mean with error bars for ± 1 standard deviation
- Each group labeled on the left side
Basic Distribution Comparison
Compare distributions across three groups. Red diamonds show mean ± standard deviation.
Data: basic_data
Example 2: Color-Coded Groups
Groups can be colored by categorical variables to visually distinguish different categories.
Features demonstrated:
- Color by dropdown to choose coloring variable
- Groups with same color attribute share the same color
- Useful for showing nested grouping structures
Color-Coded Distributions
Use the 'Color by' dropdown to color groups by different attributes.
Plot Attributes
0.6
(0.25 - 2.5)
Data: colored_data
Example 3: Organized by Grouping Variable
Groups can be organized and visually separated by categorical variables.
Features demonstrated:
- Group by dropdown to choose organizational variable
- Extra spacing between different grouping categories
- Bold section labels on the left showing grouping categories
- Automatic sorting within each section
Organized by Grouping Variable
Use 'Group by' dropdown to organize groups. Notice the bold section labels and spacing between categories.
Plot Attributes
0.6
(0.25 - 2.5)
Data: grouped_data
Example 4: Multiple Value Columns
Switch between different numeric variables to compare distributions.
Features demonstrated:
- Value dropdown to switch between different metrics
- Each metric has different scale and distribution
- Useful for exploring different aspects of the data
Multiple Metrics Comparison
Switch between Revenue, Units Sold, and Customer Satisfaction using the Value dropdown.
Plot Attributes
0.6
(0.25 - 2.5)
Data: multi_data
Example 5: Interactive Filtering
Filter data by categorical variables to focus on specific subsets.
Features demonstrated:
- Multi-select filters to include/exclude data
- Observation count updates show % remaining after filtering
- Filters work together with color and grouping controls
- Chart dynamically updates based on filtered data
Team Performance with Filtering
Use filters to focus on specific quarters or regions. Watch the observation count update.
Filters
Plot Attributes
0.6
(0.25 - 2.5)
Data: filtered_data
Example 6: Handling Wide Value Ranges
Box and whiskers plots work well with data that has wide ranges or outliers.
Features demonstrated:
- Whiskers extend to min/max showing full data range
- Box (IQR) shows where bulk of data lies
- Mean can be quite different from median in skewed distributions
- Red error bars show standard deviation clearly
Company Revenue Distributions
Notice how box and whiskers effectively shows the different scales and spreads across company sizes.
Data: wide_data
Example 7: Adjustable Aspect Ratio
Control the height-to-width ratio of the chart for optimal viewing.
Features demonstrated:
- Aspect ratio slider adjusts chart height dynamically
- Useful for fitting many groups or adjusting for screen size
- Height automatically scales with number of groups
Many Groups - Adjustable Height
Use the Aspect Ratio slider below to adjust chart height for better visibility of all groups.
Data: aspect_data
This page was created using JSPlots.jl v0.4.0.