Why this matters
Linked views and brushing turn static dashboards into investigative tools. When a user selects data in one chart, related charts update instantly. This is key for tasks like root-cause analysis, cohort exploration, funnel breakdowns, anomaly triage, and segmentation. As a Data Visualization Engineer, you will design these interactions so stakeholders can ask and answer follow-up questions without leaving the dashboard.
Concept explained simply
Brushing means selecting data directly on a chart (drag to select a range, draw a lasso, or click a category). Linked views means other charts update based on that selection. Two common behaviors:
- Cross-filtering: non-selected data is excluded in other views.
- Cross-highlighting: selected data is emphasized while the rest is dimmed for context.
Mental model: selection pipeline
- User action creates a selection (e.g., brush Jan–Mar on a line chart).
- The selection is translated into a filter (date between Jan 1 and Mar 31).
- Other views update using the same filter: either filter down (cross-filter) or re-render with highlighted subset (cross-highlight).
- Clear or modify the selection to iterate.
Think of it as a single source of truth: one selection state, multiple views listening.
Worked examples
Example 1: Category click → linked time series + scatter
Charts: bar by Region, monthly revenue line, scatter of Unit Price vs Units per order. Action: click the West bar (single-select). Effect:
- Bar: West bar emphasized; others dimmed.
- Line: shows West-only revenue by month (cross-filter).
- Scatter: highlights only West orders; others dimmed.
Why this is useful
Instantly see how one segment behaves across time and order characteristics without building a new report.
Example 2: Time brush → linked bars
Charts: area chart with a draggable time range (brush), stacked bars by Product. Action: drag to select Q2. Effect:
- Area chart: brush frame visible; chart remains for context.
- Bars: re-aggregate to Q2 only, revealing which products drove Q2.
Design tip
Keep a subtle backdrop for non-selected periods (dimmed) so users don\'t lose context.
Example 3: Map lasso → linked histogram
Charts: map of stores, histogram of basket sizes. Action: lasso high-density metro area on the map. Effect:
- Histogram recalculates only for those stores.
- A small pill shows active filters (Geography: Metro A).
Accessibility note
Use both color and shape/opacity changes for selection. Don\'t rely on color only.
Who this is for and prerequisites
Who this is for
- Data Visualization Engineers turning analyses into interactive dashboards.
- BI Developers adding cross-filtering to existing reports.
- Analysts who need fast, visual drilldowns.
Prerequisites
- Comfort with basic chart types and aggregations.
- Understanding of dimensions vs measures.
- Basic filtering logic (AND vs OR).
Implementation checklist
- Define selection behaviors for each view (click, range brush, lasso, hover).
- Choose cross-filtering, cross-highlighting, or both for each link.
- Keep consistent selection state indicators (pills, badges, or a clear \"Clear selection\" button).
- Handle nulls explicitly (include a \"(Null)\" bucket if relevant).
- Debounce rapid interactions (e.g., 150–300 ms) to avoid jittery updates.
- Guard rails: max points rendered, pre-aggregations for heavy queries.
- Accessibility: sufficient contrast, keyboard clear-and-undo path.
Exercises
Use the tiny dataset below to simulate linked views by hand. Pretend you have three charts: Bar by Region (sum Revenue), Line by Month (sum Revenue), Scatter of Unit Price vs Units (each order as a point).
Dataset (10 orders)
[1] 2025-01-05, West, A, units 5, price 10, revenue 50 [2] 2025-01-08, East, A, units 3, price 12, revenue 36 [3] 2025-01-12, West, B, units 4, price 8, revenue 32 [4] 2025-02-02, West, A, units 6, price 10, revenue 60 [5] 2025-02-10, East, B, units 2, price 9, revenue 18 [6] 2025-02-14, North, A, units 7, price 11, revenue 77 [7] 2025-03-01, South, B, units 5, price 8, revenue 40 [8] 2025-03-03, West, B, units 3, price 8, revenue 24 [9] 2025-03-11, East, A, units 4, price 12, revenue 48 [10]2025-03-20, West, A, units 2, price 10, revenue 20]
- Exercise 1 mirrors ID ex1 below.
- Exercise 2 mirrors ID ex2 below.
Self-checklist while you work
- Did your totals across all views stay consistent after selection?
- Are you clear when you\'re cross-filtering vs cross-highlighting?
- Did you track both selected and dimmed context?
Exercise 1: Single-category click (cross-filter)
Action: Click the \"West\" bar. What do the other views show?
- Bar: which bar(s) emphasized and what are their values?
- Line: West-only revenue by month.
- Scatter: how many points remain highlighted?
Show expected results
Bar (sum Revenue): West=186; East=102; North=77; South=40. With cross-filter, other bars can be dimmed but remain visible for context; the active subset is West=186.
Line (West-only): Jan=82 (50+32), Feb=60, Mar=44 (24+20).
Scatter: 5 highlighted points (orders 1,3,4,8,10).
Exercise 2: Time-range brush then category click (AND logic)
Action 1: Brush Feb–Mar on the line. Action 2: Click Product A. What do the other views show with intersection logic (Feb–Mar AND Product A)?
- Bar: region totals for Product A in Feb–Mar.
- Line: only Feb–Mar Product A.
- Scatter: how many points remain?
Show expected results
Feb–Mar Product A orders: [4] West A=60, [6] North A=77, [9] East A=48, [10] West A=20.
Bar totals: West=80 (60+20), East=48, North=77, South=0.
Line: shows Feb (West 60 + North 77) and Mar (West 20 + East 48). Jan excluded.
Scatter: 4 points highlighted (orders 4,6,9,10).
Common mistakes and how to self-check
- Ambiguous selection state: users can\'t tell what\'s filtered. Fix with visible selection pills and a clear reset.
- Inconsistent behavior across charts: one chart filters, another highlights. Align modes or label them clearly.
- Latency on large data: debounce interactions and pre-aggregate.
- Invisible context: dimmed points too faint or too bright. Tune opacity and contrast.
- OR logic where AND is expected: combining time brush with category click should default to intersection; make it explicit.
- Dropping nulls silently: keep a \"(Null)\" bucket when it matters.
Quick self-audit
- Perform a known selection and manually compute a total; does the dashboard match?
- Measure time-to-first-render and time-to-update; aim for sub-500 ms where possible.
- Keyboard test: can you reach and clear the selection without a mouse?
Practical projects
- Sales triage dashboard: link a time brush, region bar, and product matrix; support both cross-filter and cross-highlight toggles.
- Customer cohort explorer: brush signup month, click industry, and inspect retention curves with linked views.
- Operations map: lasso facilities on a map and update a downtime histogram and a parts-usage table.
Learning path
- Before this: chart design fundamentals, meaningful aggregations.
- Now: linked views and brushing, clear selection semantics, performance basics.
- Next: advanced interactions (drill-through, parameter controls), caching and pre-aggregation strategies.
Next steps
- Instrument your dashboard to log selection patterns (what users click/brush most) and refine defaults.
- Create a style guide for selection states (colors, opacity, outlines) and reuse it across projects.
- Ship one dashboard with both cross-filter and cross-highlight options; collect feedback.
Mini challenge
Design a 3-view layout for a marketing dashboard: a time brush (weekly), a channel bar chart, and a cost vs conversions scatter. Define exactly which interactions are enabled on each chart and whether they cross-filter or cross-highlight. Write down your reset behavior and selection pills you\'ll display.
Quick Test
Anyone can take the test for free. Logged-in users will have their progress saved automatically.