Phase 5A: Advanced Interactive Patterns
Advanced patterns and specialized use cases for Phase 5A interactions.
Table of Contents
A/B Testing Analysis
Variant Performance Comparison
Toggle variant lines to compare conversion rates. Shift-click data points to compare specific experiments.
View Source
engine: d3
type: scatter
width: 850
height: 480
title: "A/B Test Results: Conversion Rate by Variant"
marks:
- type: line
x: day
y: conv_rate
stroke: variant
strokeWidth: 2
- type: dot
x: day
y: conv_rate
fill: variant
r: 5
decorators:
axes:
x: true
y: true
grid:
x: true
y: true
legend:
position: "top-right"
title: "Variants"
interactions:
selection:
enabled: true
tooltip:
enabled: true
data:
source: |
[
{"day": 1, "conv_rate": 0.032, "variant": "Control"},
{"day": 1, "conv_rate": 0.035, "variant": "Variant A"},
{"day": 1, "conv_rate": 0.038, "variant": "Variant B"},
{"day": 2, "conv_rate": 0.034, "variant": "Control"},
{"day": 2, "conv_rate": 0.042, "variant": "Variant A"},
{"day": 2, "conv_rate": 0.041, "variant": "Variant B"},
{"day": 3, "conv_rate": 0.033, "variant": "Control"},
{"day": 3, "conv_rate": 0.044, "variant": "Variant A"},
{"day": 3, "conv_rate": 0.043, "variant": "Variant B"},
{"day": 4, "conv_rate": 0.035, "variant": "Control"},
{"day": 4, "conv_rate": 0.046, "variant": "Variant A"},
{"day": 4, "conv_rate": 0.045, "variant": "Variant B"},
{"day": 5, "conv_rate": 0.036, "variant": "Control"},
{"day": 5, "conv_rate": 0.048, "variant": "Variant A"},
{"day": 5, "conv_rate": 0.047, "variant": "Variant B"}
]Workflow: Click legend to hide Control and focus on variants. Hover to verify exact rates. Shift-click days to compare periods.
Portfolio Performance Tracking
Stock Portfolio Allocation vs Performance
Toggle sectors to analyze portfolio composition. Select stocks to compare performance within categories.
View Source
engine: d3
type: scatter
width: 900
height: 520
title: "Portfolio: Sector Allocation vs YTD Return"
marks:
- type: dot
x: alloc_pct
y: ytd_return
fill: sector
r: 10
decorators:
axes:
x: true
y: true
grid:
x: true
y: true
legend:
position: "right"
title: "Sectors"
interactions:
selection:
enabled: true
tooltip:
enabled: true
data:
source: |
[
{"symbol": "AAPL", "sector": "Tech", "alloc_pct": 8.5, "ytd_return": 0.28},
{"symbol": "MSFT", "sector": "Tech", "alloc_pct": 7.2, "ytd_return": 0.31},
{"symbol": "NVDA", "sector": "Tech", "alloc_pct": 6.1, "ytd_return": 0.52},
{"symbol": "JPM", "sector": "Finance", "alloc_pct": 5.8, "ytd_return": 0.18},
{"symbol": "BAC", "sector": "Finance", "alloc_pct": 4.2, "ytd_return": 0.22},
{"symbol": "XOM", "sector": "Energy", "alloc_pct": 4.0, "ytd_return": 0.35},
{"symbol": "CVX", "sector": "Energy", "alloc_pct": 3.5, "ytd_return": 0.32},
{"symbol": "JNJ", "sector": "Health", "alloc_pct": 6.3, "ytd_return": 0.12},
{"symbol": "PFE", "sector": "Health", "alloc_pct": 5.1, "ytd_return": 0.08},
{"symbol": "PG", "sector": "Consumer", "alloc_pct": 4.8, "ytd_return": 0.15},
{"symbol": "KO", "sector": "Consumer", "alloc_pct": 3.2, "ytd_return": 0.10},
{"symbol": "MCD", "sector": "Consumer", "alloc_pct": 2.9, "ytd_return": 0.20}
]Analysis: Toggle sectors to compare risk. Shift-click Tech stocks to compare leaders. Identify outliers.
Data Quality Monitoring
Sensor Readings Quality Check
Identify and highlight anomalies. Use legend to filter by sensor type, select anomalies to investigate.
View Source
engine: d3
type: scatter
width: 900
height: 480
title: "Sensor Data Quality: Temperature Anomalies"
marks:
- type: dot
x: hour
y: temp_c
fill: sensor
r: 6
decorators:
axes:
x: true
y: true
grid:
x: true
y: true
legend:
position: "bottom"
title: "Sensors"
interactions:
selection:
enabled: true
tooltip:
enabled: true
data:
source: |
[
{"hour": 0, "temp_c": 21.2, "sensor": "Building A"},
{"hour": 0, "temp_c": 20.8, "sensor": "Building B"},
{"hour": 0, "temp_c": 19.5, "sensor": "Building C"},
{"hour": 1, "temp_c": 21.5, "sensor": "Building A"},
{"hour": 1, "temp_c": 20.9, "sensor": "Building B"},
{"hour": 1, "temp_c": 28.2, "sensor": "Building C"},
{"hour": 2, "temp_c": 21.3, "sensor": "Building A"},
{"hour": 2, "temp_c": -5.1, "sensor": "Building B"},
{"hour": 2, "temp_c": 19.8, "sensor": "Building C"},
{"hour": 3, "temp_c": 21.1, "sensor": "Building A"},
{"hour": 3, "temp_c": 21.2, "sensor": "Building B"},
{"hour": 3, "temp_c": 19.7, "sensor": "Building C"},
{"hour": 4, "temp_c": 20.9, "sensor": "Building A"},
{"hour": 4, "temp_c": 21.0, "sensor": "Building B"},
{"hour": 4, "temp_c": 19.6, "sensor": "Building C"}
]Monitoring: Hover for temperatures. Shift-click anomalies. Toggle sensors to isolate problems.
Competitive Analysis
Market Share vs Growth Rate
Analyze competitors. Toggle segments to focus on specific markets. Select competitors to compare detailed metrics.
View Source
engine: d3
type: scatter
width: 900
height: 500
title: "Market Analysis: Share vs Growth"
marks:
- type: dot
x: market_share
y: growth_rate
fill: segment
r: 12
decorators:
axes:
x: true
y: true
grid:
x: true
y: true
legend:
position: "top-right"
title: "Segment"
interactions:
selection:
enabled: true
tooltip:
enabled: true
data:
source: |
[
{"competitor": "Acme", "segment": "Enterprise", "market_share": 18.5, "growth_rate": 0.12},
{"competitor": "TechVision", "segment": "Enterprise", "market_share": 22.1, "growth_rate": 0.08},
{"competitor": "CloudFirst", "segment": "Enterprise", "market_share": 19.3, "growth_rate": 0.15},
{"competitor": "FastGrow", "segment": "Mid-Market", "market_share": 12.0, "growth_rate": 0.45},
{"competitor": "GrowTech", "segment": "Mid-Market", "market_share": 10.5, "growth_rate": 0.52},
{"competitor": "ScaleHub", "segment": "Mid-Market", "market_share": 8.8, "growth_rate": 0.38},
{"competitor": "Startup1", "segment": "Startup", "market_share": 5.2, "growth_rate": 0.85},
{"competitor": "Startup2", "segment": "Startup", "market_share": 4.1, "growth_rate": 0.92},
{"competitor": "Startup3", "segment": "Startup", "market_share": 3.0, "growth_rate": 1.20}
]Intelligence: Identify quadrants. Toggle segments. Shift-click high-growth competitors. Analyze patterns.
Interactive Patterns
Focus & Filter: Use legend toggle to progressively filter to region of interest.
Comparison Analysis: Use shift-click multi-select to build custom comparison sets.
Outlier Hunting: Select outliers with shift-click to highlight patterns.
Time Period Analysis: Hover for exact values, shift-click specific periods to compare.
Performance Notes: Legend toggle is O(1), multi-select needs no redraw, tooltips optimized for nearest-mark. All interactions responsive at 10K+ data points.