Skip to content

Mobile UI: Phase 3 - Touch-friendly selection on the NOMINATE scatter plot #450

Description

@JeffreyBLewis

Part of the mobile UI plan (see Phase 1 issue for overview).

Goal

Member selection on the scatter plot is a drag-rectangle DC.js brush computed from d3.mouse(this) (static/js/congress.js lines ~128-196, duplicated in static/js/voteCharts.js ~400-595). D3 v3's brush/mouse stack has no touch-event handling, so drag-to-select doesn't work on a touchscreen.

Scope

  • Gated on (pointer: coarse): add tap-to-select for a single point, plus a "Select region" toggle that lets a user tap two corners to define a selection box, instead of requiring a drag gesture.
  • Keep the existing mouse drag-brush behavior unchanged for pointer-fine devices.
  • Keep the fixed-size single-tap box behavior (x±0.025) as the default single-tap target.

Out of scope

Upgrading the underlying D3/DC.js version to get native touch-aware brushing — considered and rejected for now given how much of the page depends on the current D3 v3/DC.js chain; revisit only if the tap-based approach proves insufficient.

Test plan

  • On a touch device/emulator: tapping a single member point selects it and updates the filter bar
  • "Select region" mode: two taps define a rectangular selection matching the equivalent mouse-drag result
  • Desktop mouse drag-brush behavior is unchanged

🤖 Generated with Claude Code

https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions