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.
Plot Attributes
0.6(0.25 - 2.5)
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 5b: Single-Select Choices vs Multi-Select Filters
Demonstrates the difference between choices (single-select) and filters (multi-select).
Features demonstrated:
Choices: Single-select dropdown - user picks exactly ONE value at a time
Filters: Multi-select dropdown - user can select multiple values
Use choices when comparison should be one value at a time
Example 5b: BoxAndWhiskers with Single-Select Choice
This example demonstrates the difference between choices and filters:
- **quarter (choice)**: Single-select dropdown - pick exactly ONE quarter at a time
- **division (filter)**: Multi-select dropdown - can select multiple divisions
Use choices when the user must select exactly one option (e.g., viewing one quarter at a time).
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.
Plot Attributes
0.6(0.25 - 2.5)
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.