Chart drilldown

Problem Context

• The chart shows aggregate values whose children are meaningful, such as region to country, year to quarter, product group to SKU, or category to issue type.
• Users need to investigate why an aggregate is high, low, anomalous, or changing without leaving the visual analysis flow.
• The hierarchy is planned and finite; each child series is a real breakdown of the selected parent rather than an unrelated filter or page navigation.
• Users may need to compare child contributors, return to peer aggregates, export context, or switch to a row-level table when visual drilldown is no longer enough.
• Orientation risk grows as depth increases because the current chart can hide peer context, inherited filters, and the original aggregate question.

Selection Rules

• Choose Chart drilldown when a visible chart mark represents an aggregate with a direct child series that answers the next analytic question.
• Use ordinary Data visualization when users only need to read the current encoded pattern and do not need to traverse a hierarchy.
• Use details panel when the user needs descriptive object information beside the chart rather than replacing the chart with child aggregate marks.
• Use table or data grid when exact records, row reconciliation, export, sorting, or editing is the primary need.
• Use drillthrough to a separate page when the detail view needs multiple visuals, richer entity context, or a different layout while preserving a clear Back path.
• Do not use Chart drilldown for arbitrary filtering, surprise page navigation, unrelated metric changes, or decorative click effects.
• Only expose drilldown on marks with available child data; show disabled or terminal state for leaves.
• Limit levels or provide strong breadcrumbs, reset, and summary context when hierarchies are deep, sparse, or asymmetric.

Required States

• Top-level chart with drillable marks, level label, metric, units, date or filter scope, tooltip, legend, and table alternative.
• Drillable mark focused, hovered, selected, activated, loading child data, child data loaded, child data empty, and terminal leaf states.
• Drilled level with selected parent, child-level title, breadcrumb path, drill-up control, reset-to-root control, inherited filters, and synchronized selected child mark.
• Drill-up, breadcrumb jump, reset, failed child load, stale child data, permission-limited child data, no child data, and export-with-path states.
• Mobile state where hierarchy path, selected parent, drill controls, selected child, and table alternative remain reachable without clipped chart labels.
• Keyboard and assistive-technology state where activation announces the new chart level and focus lands on the level heading, breadcrumb, or first child mark predictably.

Interaction Contract

• A drillable mark can only reveal data that is a child of that mark under the current filters, metric, unit, time range, aggregation, and permission scope.
• Activating a mark updates chart marks, title, level label, breadcrumb, tooltip, data table, summary copy, and live announcement from the same child dataset.
• Breadcrumbs and drill-up controls return users to a previous level without losing the original filters, selected path, or available peer context.
• If drilldown changes aggregation, sampling, unit, baseline, or freshness, the changed interpretation is disclosed before the user reads the child chart.
• Terminal marks communicate that no deeper child series exists and do not behave like broken buttons.
• Export, share, and copy actions include the full drill path, selected parent, current level, filters, units, and timestamp.

Implementation Checklist

• Define the drill hierarchy, parent-child keys, maximum depth, terminal leaves, child-count thresholds, permission rules, and fallback table route before rendering drillable marks.
• Generate parent aggregate, child marks, breadcrumbs, tooltips, tables, and summary text from the same filtered hierarchy model.
• Implement keyboard activation, focus restoration, live announcements, drill-up, reset, loading, empty child, failed child, stale child, and permission-limited child states.
• Style drillable marks with explicit affordance and focus indicators, and style terminal marks differently so users do not expect deeper data.
• Test deep paths, asymmetric branches, empty children, long labels, metric changes, filters, exports, mobile layout, high contrast, and screen-reader announcements.
• Provide a table or row-level handoff when users need exact child records after reaching the useful visual drill depth.

Common Generated-UI Mistakes

• Replacing a chart with child data without breadcrumbs, selected parent, or drill-up path.
• Using drilldown as a hidden filter that silently narrows the whole dashboard.
• Changing metric, unit, baseline, or time grain during drilldown without disclosure.
• Making every mark look drillable even when some marks have no child data.
• Opening an unrelated detail page and calling it chart drilldown.
• Hiding exact child values behind pointer-only tooltips.

Critique Questions

• What parent-child hierarchy does each drillable mark represent, and can users see that path before and after activation?
• Does the child chart preserve the same metric, unit, filter scope, and analytic question as the parent chart?
• Can users drill up, jump through breadcrumbs, reset to the root, and export with the full path preserved?
• What happens for terminal leaves, empty child series, stale child data, permission-limited data, and failed child loads?
• Would a details panel, table, data grid, filter panel, or drillthrough page better fit the next step?