Phase 5A: Interactive Legends & Multi-Select
This guide showcases Phase 5A features: interactive legends with series toggling, multi-select with shift-click, and enhanced tooltips.
Table of Contents
Interactive Legend Toggle
Sales Dashboard with Region Filtering
Click legend items to toggle regions on/off without reloading the chart. Perfect for focused analysis.
View Source
engine: d3
type: line
width: 800
height: 400
title: "Q1 Sales by Region (Click legend to toggle)"
marks:
- type: line
x: week
y: sales
stroke: region
strokeWidth: 2
- type: dot
x: week
y: sales
fill: region
r: 4
decorators:
axes:
x: true
y: true
grid:
x: true
y: true
legend:
position: "top-right"
title: "Regions"
interactions:
tooltip:
enabled: true
data:
source: |
[
{"week": 1, "sales": 12000, "region": "North America"},
{"week": 1, "sales": 15000, "region": "Europe"},
{"week": 1, "sales": 9500, "region": "Asia Pacific"},
{"week": 1, "sales": 8200, "region": "Latin America"},
{"week": 2, "sales": 13500, "region": "North America"},
{"week": 2, "sales": 16200, "region": "Europe"},
{"week": 2, "sales": 11000, "region": "Asia Pacific"},
{"week": 2, "sales": 9800, "region": "Latin America"},
{"week": 3, "sales": 14200, "region": "North America"},
{"week": 3, "sales": 17500, "region": "Europe"},
{"week": 3, "sales": 12500, "region": "Asia Pacific"},
{"week": 3, "sales": 11200, "region": "Latin America"},
{"week": 4, "sales": 15800, "region": "North America"},
{"week": 4, "sales": 18900, "region": "Europe"},
{"week": 4, "sales": 14200, "region": "Asia Pacific"},
{"week": 4, "sales": 13100, "region": "Latin America"}
]Use case: Executives filtering to specific regions for performance analysis. Hide underperforming regions to focus on successes.
Product Performance Comparison
Compare product categories and quickly hide non-relevant ones to compare winners.
View Source
engine: d3
type: bar
width: 700
height: 450
title: "Product Line Performance (Click legend to compare)"
marks:
- type: bar
x: product
y: revenue
fill: category
decorators:
axes:
x: true
y: true
grid:
y: true
legend:
position: "right"
title: "Categories"
interactions:
tooltip:
enabled: true
data:
source: |
[
{"product": "Laptop", "revenue": 185000, "category": "Electronics"},
{"product": "Monitor", "revenue": 92000, "category": "Electronics"},
{"product": "Keyboard", "revenue": 45000, "category": "Electronics"},
{"product": "Desk Chair", "revenue": 78000, "category": "Furniture"},
{"product": "Standing Desk", "revenue": 135000, "category": "Furniture"},
{"product": "Bookshelf", "revenue": 42000, "category": "Furniture"},
{"product": "Coffee Sub", "revenue": 125000, "category": "Services"},
{"product": "Support", "revenue": 85000, "category": "Services"},
{"product": "Training", "revenue": 95000, "category": "Services"}
]Multi-Select Analysis
Customer Segmentation with Shift-Click
Use single-click to select one customer segment, shift-click to add/remove segments for comparison analysis.
View Source
engine: d3
type: scatter
width: 800
height: 500
title: "Customer LTV vs Acquisition Cost (Shift-click to compare)"
marks:
- type: dot
x: acq_cost
y: ltv
fill: segment
r: 8
decorators:
axes:
x: true
y: true
grid:
x: true
y: true
legend:
position: "top-right"
interactions:
selection:
enabled: true
tooltip:
enabled: true
data:
source: |
[
{"customer": "Acme", "acq_cost": 5000, "ltv": 125000, "segment": "Enterprise"},
{"customer": "TechStart", "acq_cost": 2000, "ltv": 45000, "segment": "Growth"},
{"customer": "F500", "acq_cost": 8000, "ltv": 280000, "segment": "Enterprise"},
{"customer": "SmallBiz", "acq_cost": 500, "ltv": 8000, "segment": "SMB"},
{"customer": "MidMkt", "acq_cost": 3500, "ltv": 85000, "segment": "Growth"},
{"customer": "Global", "acq_cost": 12000, "ltv": 450000, "segment": "Enterprise"},
{"customer": "Startup", "acq_cost": 1500, "ltv": 32000, "segment": "Growth"},
{"customer": "Freelance", "acq_cost": 300, "ltv": 4000, "segment": "SMB"},
{"customer": "Agency", "acq_cost": 2500, "ltv": 62000, "segment": "Growth"},
{"customer": "MegaCorp", "acq_cost": 15000, "ltv": 580000, "segment": "Enterprise"},
{"customer": "Consulting", "acq_cost": 4000, "ltv": 95000, "segment": "Growth"},
{"customer": "Retail", "acq_cost": 1000, "ltv": 15000, "segment": "SMB"}
]Workflow:
- Single-click a segment to highlight one group
- Shift-click other segments to build custom comparison
- Hover to see details
- Click background to clear selection
Enhanced Tooltips
Time Series with Nearest Mark
Hover to see data at cursor position. Tooltip shows the nearest data point only, not all overlapping points.
View Source
engine: d3
type: line
width: 800
height: 400
title: "Website Traffic Metrics (Hover for nearest value)"
marks:
- type: line
x: date
y: pageviews
stroke: "#3b82f6"
strokeWidth: 2
- type: dot
x: date
y: pageviews
fill: "#3b82f6"
r: 3
decorators:
axes:
x: true
y: true
grid:
x: true
y: true
interactions:
tooltip:
enabled: true
data:
source: |
[
{"date": "Jan 8", "pageviews": 2450, "visitors": 1820, "bounce": 0.42},
{"date": "Jan 9", "pageviews": 1398, "visitors": 920, "bounce": 0.38},
{"date": "Jan 10", "pageviews": 9800, "visitors": 8120, "bounce": 0.51},
{"date": "Jan 11", "pageviews": 3908, "visitors": 3890, "bounce": 0.29},
{"date": "Jan 12", "pageviews": 4800, "visitors": 3820, "bounce": 0.35},
{"date": "Jan 13", "pageviews": 3800, "visitors": 2820, "bounce": 0.39},
{"date": "Jan 14", "pageviews": 4300, "visitors": 3210, "bounce": 0.33},
{"date": "Jan 15", "pageviews": 6200, "visitors": 5120, "bounce": 0.44}
]Combined Dashboard
Executive Dashboard with All Phase 5A Features
Combines interactive legends, multi-select, tooltips, and grids for comprehensive analysis.
View Source
engine: d3
type: scatter
width: 900
height: 550
title: "Executive Dashboard (Click legend | Shift-click dots | Hover for values)"
marks:
- type: dot
x: month
y: revenue
fill: department
r: 8
- type: line
x: month
y: revenue
stroke: department
strokeWidth: 2
opacity: 0.6
decorators:
axes:
x: true
y: true
grid:
x: true
y: true
legend:
position: "top-right"
title: "Department"
interactions:
tooltip:
enabled: true
selection:
enabled: true
data:
source: |
[
{"month": "Jan", "revenue": 142000, "department": "Sales"},
{"month": "Jan", "revenue": 89000, "department": "Marketing"},
{"month": "Jan", "revenue": 95000, "department": "Operations"},
{"month": "Feb", "revenue": 158000, "department": "Sales"},
{"month": "Feb", "revenue": 102000, "department": "Marketing"},
{"month": "Feb", "revenue": 99000, "department": "Operations"},
{"month": "Mar", "revenue": 175000, "department": "Sales"},
{"month": "Mar", "revenue": 118000, "department": "Marketing"},
{"month": "Mar", "revenue": 105000, "department": "Operations"},
{"month": "Apr", "revenue": 192000, "department": "Sales"},
{"month": "Apr", "revenue": 135000, "department": "Marketing"},
{"month": "Apr", "revenue": 112000, "department": "Operations"},
{"month": "May", "revenue": 210000, "department": "Sales"},
{"month": "May", "revenue": 151000, "department": "Marketing"},
{"month": "May", "revenue": 118000, "department": "Operations"}
]Interaction Guide
Click legend items to toggle series visibility on/off. Single-click dots to select one data point, shift-click to add/remove from multi-selection. Hover to see tooltip for nearest mark only.
Legend toggle provides quick series filtering without reloading. Multi-select enables comparison analysis and outlier detection. Tooltips show context fields for verification.