Mobile Data Visualization That Works — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/examples/mobile-data-visualization

Mobile Data Visualization That Works

State of the art, phone first

A field guide to charts that survive a thumb, a train, and 360 CSS pixels.

Mobile visualization is not a smaller desktop dashboard. The best current work treats phone charts as designed transformations: remove low-value furniture, preserve the task, use text as an interface, and make every exploratory move possible with a single, visible tap.

32.6%of audited mobile SVG charts had content outside the viewport.

31.5%had type that was too small to read after simple resizing.

24px / 44pxWCAG target minimum and enhanced target sizes shape chart controls.

Review

What the current literature agrees on

374 charts

Scaling is the failure mode.

MobileVisFixer found that mobile chart failures cluster around viewport overflow, unreadable text, label clutter, distorted aspect ratios, and wasted space. Those are layout and density failures, not just chart-type failures.

not CSS only

Responsive design is a transformation stack.

Cicero frames responsive visualization as a grammar of actions such as removing, transposing, aggregating, repositioning, and replacing elements. Dupo adds that authors need to compare alternative versions before locking in a design.

single touch

Interaction must be visible and recoverable.

Snyder et al. emphasize discoverable, ubiquitous modalities, precise inspection, fixed orientation, and graceful recovery. WCAG 2.2 reinforces the same direction with alternatives for complex pointer gestures and dragging.

96 phones

Motion is not a substitute for comparison.

Brehmer et al. compared animation and small multiples for trend tasks on phones. Small multiples were consistently faster, even when accuracy depended on the specific comparison.

Start with a density budget, not a resized dashboard

Default technique

Shrink the desktop chart, keep every axis tick, legend, series, hover, and label.

Mobile technique

Rank the task, compress the evidence, direct-label the few live categories, and keep the full chart only when it still passes legibility constraints.

Based onMobileVisFixer, Cicero responsive grammar, Constraint-based breakpoints.

Shrunk desktop view

Three series, 32 weeks, full axes, hover-only details. It fits, but it spends the phone on scaffolding.

Mobile density budget

Activation82%+8 pts

Retention64%-6 pts

Revenue57%+4 pts

Support31%-13 pts

The redesign leads with a ranked summary, then shows the failure audit. It keeps fewer marks but more decision value.

Use small multiples when the task is comparison

Default technique

Animate between states or hide series behind a picker, forcing the reader to remember the previous screen.

Mobile technique

Stack comparable mini-views with identical scales. On phones, vertical space is cheaper than working memory.

Based onSmall multiples vs animation on phones, Dupo mixed-initiative authoring.

Transitsteady recovery

Bike shareseasonal spike

Walkingstable baseline

Replace drag-only exploration with thumb-sized controls

Default technique

Assume mouse hover, tiny legends, drag brushes, and pinch gestures will be discoverable.

Mobile technique

Expose the common queries as buttons, keep targets large, support single-pointer inspection, and make the selected state obvious.

Based onMobile exploratory interaction, WCAG 2.2 input modalities.

GrocerySelected with a visible button, not a hidden hover or precision drag.

Let constraints choose the breakpoint

Default technique

Switch layouts at 600px because the site grid does.

Mobile technique

Switch when the chart fails: text overlap, mark size, aspect ratio, tap spacing, and empty space are better triggers than viewport width alone.

Based onConstraint-based breakpoints, MobileVisFixer, Personal data visualization review.

Measured chart slot290px

Active designCard stack

Axis labels and tap targets would collide.

Latest66

Peak74

DirectionUp

Practical checklist

A mobile chart should pass these tests before it ships

Readability: labels, values, and annotations remain legible without pinch zoom.
Task preservation: the mobile version preserves the intended comparison or decision, not the desktop geometry.
Touch path: primary questions are reachable through visible targets, not only hover, drag, or gestures.
Density budget: every axis, legend, and mark earns its pixels against a card, annotation, or small multiple.
Constraint breakpoint: the layout changes when the visualization fails, not when a generic CSS breakpoint says so.

Sources

Reference ledger

2020MobileVisFixerWu, Tong, Dwyer, Lee, Isenberg, Qu

Audited 374 SVG web visualizations and found recurring mobile failures: off-screen content, unreadable type, cluttered labels, distorted layouts, and wasted space.

2024Mobile exploratory interactionSnyder, Rossi, Koh, Heer, Hoffswell

Mobile exploration should favor discoverable, single-touch, fixed-orientation interactions with rapid inspection and graceful recovery.

2019Small multiples vs animation on phonesBrehmer, Lee, Isenberg, Choe

For mobile trend comparison tasks, small multiples were consistently faster than animation, with accuracy depending on the task.

2022Cicero responsive grammarKim, Rossi, Du, Koh, Guo, Hullman, Hoffswell

Responsive visualization is better modeled as explicit transformations - remove, replace, transpose, aggregate, reposition - than as CSS-only scaling.

2023Dupo mixed-initiative authoringKim, Rossi, Hullman, Hoffswell

Responsive design benefits from exploring alternative chart versions rather than prematurely committing to one resized view.

2024Constraint-based breakpointsSchottler, Dykes, Wood, Hinrichs, Bach

Breakpoints should be triggered by visualization constraints such as label overlap, mark size, aspect ratio, and available space, not just static viewport widths.

2024WCAG 2.2 input modalitiesW3C

Pointer interactions need accessible alternatives; target sizing and dragging requirements matter directly for phone charts.

2022Personal data visualization reviewAlshehhi, Abdelrazek, Bonti

The mobile personal visualization literature covers many domains, but mobile device limitations and evaluation frameworks remain underdeveloped.