Skip to content
Pinky UI

data

Interaction for real content and products.

Media inspection, tactile form controls, lightweight data interaction and anchored contextual surfaces—without replacing native semantics or pulling in a platform-sized dependency.

03 · Data

Motion explains change; text preserves meaning.

Animated Number

Locale-aware visual interpolation with one stable screen-reader value.

$1,249

Radial Meter

A soft semantic meter, not a speedometer dashboard.

67%Completion

Comparison Bars

A small dataset sharing one honest baseline.

Current67%
Target84%

Interactive Sparkline

Pointer, touch and Arrow keys inspect the same textual trend points.

Weekly project viewsSeven daily project-view values, rising overall from 12 to 26.
Sun26k views

Data Lens

The inspector wraps custom chart content without coupling to its rendering system.

Mon
$12k

Timeline Scrubber

A product milestone controller that can also drive media or custom content.

Find the meaningful interaction.

Filter Rail

Grouped choices, active chips and result count remain one navigable surface.

Status
Owner

16 results

Choose one option per filter group. Selected filters can be removed below.

Sortable Data Rows

A structured table keeps columns intact while pointer, keyboard and touch paths all reorder the same rows.

ItemOwnerStatusReorder

Project brief

Updated 4m ago

Flora
Ready

Interaction audit

Updated yesterday

Team
Review

Release notes

Updated Friday

Flora
Draft
Drag rows on desktop; use ↑ ↓ on touch.Focus ↕, press Space, then use arrows.

Expandable Data Row

The row opens its detail context in place instead of breaking the scan with a modal.

Keyboard path, reduced motion and touch fallback have all been checked for this handoff.

Expand row

Selection Tray

Batch actions enter the flow only after there is something selected.

No batch action yet

04 · Data visualization

Read the data without losing the surface.

A small chart language for reading, comparison, selection and context. Every surface has a direct value path, a keyboard path and a table-minded fallback.

quiet / precise / inspectable

Interactive Line Chart

A hairline crosshair snaps to the nearest point and keeps the value in a reading rail.

Sun26k
Weekly usage7 data points. Focus the chart and use the arrow keys to read each point.

Focus the plot, then use ← → to move through the reading points. Pointer and touch follow the same rail.

Range Brush Chart

Overview and focused reading share one selected window.

Usage history · Sat21k
Selected window
TueSat

Drag the selected window or adjust either labelled handle. The focused chart keeps its reading position.

Comparison Chart

Two series expose the gap directly instead of relying on a floating tooltip.

Sun
Studio 78Team 69
Difference -9
Studio and team comparisonTwo aligned series. Focus the chart and use arrow keys to compare values and their difference at each label.

The solid circle, outlined square and direct difference rail keep the comparison readable without relying on colour alone.

Annotated Timeline

Events explain the curve while remaining a small, traversable set of buttons.

Tue15k

Campaign. The first campaign widened the audience.

Launch timelineA trend with 3 contextual event markers. Use arrow keys for data points or tab to an event marker.

Threshold / Band Chart

State is carried by labelled bands, hairlines and the active marker—not colour alone.

Sun · Target94ms
Response time healthA trend over labelled normal, warning and target bands. Focus the chart and use arrow keys to read each value and band state.
  • Normal0ms–60ms
  • Watch60ms–80ms
  • Target80ms–100ms

Hairline thresholds, direct band labels and the diamond marker keep state legible without colour-only meaning.

Interactive Bar Ranking

Metric changes and sorting preserve the identity of each row.

  1. 01
    Research12 notes
    84%
  2. 02
    Release15 notes
    76%
  3. 03
    Prototype9 notes
    68%

Change the metric or sort order. Rows keep their identity while the ranking changes.

Linked Small Multiples

Four metrics share one reading position without becoming four independent tooltips.

SunOne reading position, 4 metrics
Revenue$59kConversion5.4%Retention82%Sessions36k
Weekly metric comparisonFocus the collection and use arrow keys to move one shared reading position across every mini chart.

Revenue

Sun

$59k

Conversion

Sun

5.4%

Retention

Sun

82%

Sessions

Sun

36k

Pointer, touch and keyboard move one shared crosshair; each metric keeps its own direct value label.

Chart ↔ Table View

The same dataset remains available as a chart or a real semantic table.

Same data, two readings

Sun · 26k

Weekly usageThe same weekly usage data is available as a chart and a table.

The table is the same data source, not a hidden accessibility-only duplicate.

Illustrative local data only. The point is the reading relationship, not a dashboard claim.