See here for the example code that generated this page
PieChart Examples
This page demonstrates the key features of PieChart plots in JSPlots.
Basic pie chart: Simple proportional visualization
Donut charts: Pie charts with hollow centers
Interactive filters: Dropdown menus to filter data dynamically
Faceting: Facet wrap (1 variable) and facet grid (2 variables)
Aggregation: Automatic aggregation of values by label
Color consistency: Same labels always get same colors
Example 1: Market Share by Revenue
Basic pie chart showing relative market share. Toggle between revenue and units sold using the dropdown.
Plot Attributes
Slice size:
revenue
units
Data: market_data
Example 2: Budget Allocation (Donut Chart)
Donut chart (hole=0.4) showing budget distribution across categories
Data: budget_data
Example 3: Product Sales with Filters
Interactive filters allow you to select different regions and years. Try selecting multiple options!
Filters
year:
2022
2023
2024
region:
East
North
South
West
Data: sales_data
Example 4: Product Sales Faceted by Region
Facet wrap creates a grid of pie charts, one for each region. Note single facet dropdown!
Filters
year:
2022
2023
2024
Faceting
Facet by:
None
region
Data: sales_data
Example 5: Device Preference by Age and Gender (Facet Grid)
2D facet grid showing device preferences across age groups (rows) and gender (columns)
Faceting
Facet 1:
None
age_group
gender
Facet 2:
None
age_group
gender
Data: demo_data
Example 6: Department Expenses by Type
Expenses broken down by type for each department. Try switching slice grouping to see department distribution!
Filters
quarter:
Q1
Q2
Q3
Q4
Plot Attributes
Slice grouping:
expense_type
department
Faceting
Facet by:
None
department
Data: expense_data
Example 7: Revenue Contribution by Customer Segment (%)
Donut chart showing percentage revenue contribution from different customer segments
Data: segment_data
Example 8: Category Sales by Store
Compare product category distribution across different store locations (single facet variable)
Faceting
Facet by:
None
store
Data: store_data
Example 9: Website Traffic Analysis - Dynamic Faceting
Use the facet dropdowns to explore traffic patterns. Try: no faceting, facet by country only, or facet by both. Also try switching slice grouping!
Plot Attributes
Slice grouping:
browser
device
Faceting
Facet 1:
None
country
device
Facet 2:
None
country
device
Data: traffic_data
Example 10: Comprehensive Sales Analysis - All Features Combined
This example demonstrates ALL PieChart features: (1) Multiple slice size options (revenue, units, profit, customers), (2) Multiple grouping options (by product, channel, or region), (3) Flexible faceting (choose 0, 1, or 2 facet variables), (4) Interactive filters (select quarters). Try different combinations!
Filters
quarter:
Q1-2024
Q2-2024
Q3-2024
Q4-2024
Plot Attributes
Slice size:
revenue
units_sold
profit
customer_count
Slice grouping:
product
channel
region
Faceting
Facet 1:
None
region
channel
quarter
Facet 2:
None
region
channel
quarter
Data: comprehensive_data
Key Features Summary
Automatic aggregation: Values are automatically summed by label
Donut charts: Set hole parameter (0 = pie, >0 = donut)
Color consistency: Same labels always get the same colors across facets
Interactive filters: Multi-select dropdowns for dynamic data filtering
Variable selection: Choose which columns to use for slice sizes and groupings
Faceting support: Create small multiples with 1 or 2 faceting variables
Smart facet controls: Single dropdown when only one facet variable is available
Flexible layout: Facet wrap automatically arranges charts in a grid
Hover details: See exact values and percentages on hover
Tip: Hover over slices to see exact values and percentages. Use faceting to compare distributions across categories. Try switching between different value and label columns!
This page was created using JSPlots.jl .