dust and magnets ii - apple inc.a1.phobos.apple.com/us/r30/cobaltpublic/v4/f9/85/... · enlarge the...

Dust and Magnets IIDon Beaver

[email protected]

mailto:[email protected]:[email protected]

quick recap

Interactive Visualization

• Data is dust - iron shavings• Magnets represent the criteria for sifting

and arranging the data

• User drags the magnets• Dust responds to the magnets

Components

Board View

Magne

Dust

DustDetail

MagnetDetail

Particles, ParticleSystem, PhysicsEngine, BoardView, DetailViews, GRs, Drag, Shake

Stage 4

Stage 4

• Read data from file (JSON)• Show real cereal nutrition data

Cereal Nutrition Data

Nutrition in JSONScript-converted

HTML table

BoardViewController

File is hardcoded and part of app.

As a user, I want a data from anywhere to be converted to a usable representation. NOT NOW.

As a user, I want a simple representation for data sources.

Try with Test Data

Demo - TestData2dust50

Demo - CerealDatadust60

What is going on?!

Numerical Issues?

Where is this from, anyway?What happens if we try 0.0001?

d/dt when dt is big

velocity

d/dt when dt is big

distance = velocity * 30

overshoot

Demodust70

Real vs Test Data

Timescale vs Attributes

• Fixed it, by reducing the step duration• But now, everything will be slower‣ in particular: “reasonable” data

• So ... better solution is to normalize data‣ The incoming scales are arbitrary anyway,

depending on the datasource

‣ Why should calories be incidentally more important than fiber content?

Use Cases / Stories

As a user, I want to see aggregate data but drill down when I want.

As a user, I want to move dust aside when it’s crowded.

As a user, I want a simple representation for data sources. -- DONE

As a user, I want data from anywhere to be converted to a usable representation. -- NORMALIZE IN LATER STAGE

Use Cases / StoriesAs a user, I want to see aggregate data but drill down when I want.


As a user, I want data from anywhere to be converted to a usable representation. -- NORMALIZE IN LATER STAGE



As a user, I want data from anywhere to be converted to a usable representation.



As a user, I want to use normalized data and determine my own weightings.


Stage 5dust detail

Demodust80

Stage 5

• Support selecting dust (just one particle)• Show data table


MainStoryboardDust label

Detail in UITableView.Show when dust selected.

Select dust

• Track which dust is selected, if any• Unhighlight previously selected dust• Highlight the selected dust• Show/hide the detail view• provide dust details to the detail view

BoardViewController

Private properties to track selection and geometry

Handlers to select dust and resize detail display

Detail views

DustView

Highlight the dust particle

Cheerios

BoardViewControllerSelect a particular new dust view

Caution - synchronization

BoardViewControllerGestures to select dust

Add tap GR to dust view on creation

Background tap now deselects dust

UITableViewDataSource

BoardViewController

Count entries in the dust dictionary

BoardViewController

Look up the nth (attribute,strength) pair

Two-column cells

Write the two entries

Demodust80

Use Cases / Stories





Stage 6overcrowding

Crowded Dust

• “Shake” button to move apart 2 pixels• “Shake” event to move until separated

ViewShaker

If centers are different,move the first away by 2px.

ViewShaker

For each pair:If dots overlap,

move the first away(but move just once).

BoardVCShake 1 or more times, stopping if separated

BoardVCRespond to physically shaking the device

Demodust80

Use Cases / Stories




Stage 7normalization, repulsion

New Physics

• Each dust strength mapped to [0,1] ([-1,+1])• Each magnet has a magnitude in [0,20]• Threshold for repulsion:• strength < threshold: repel• strength > threshold: attract

So: attractions usually

“Normalization”

x - minmax - min ≤ 10 ≤

attribute x

Repulsion

x - thresholdmax - min ≤ a+1a ≤

threshold ≤ maxmin ≤

50 100

Examples

50

100

150

150

0

threshold = 50 = min

+

+ +

.5

1

100

Examples

50

100

150

15050

0

threshold = 100

+

--.5

.5

150100

Examples

50

100

15050

0

threshold = 150

-

-

-

-1

-.5

Caveat

Just because an attribute is literally 0doesn’t mean

the attraction is 0.

Code Changes

• Note particle minima/maxima• Physics engine normalize/repulsion • Magnet single tap now toggles Magnet Detail• Magnet double tap does enable/disable• Hook up sliders for magnitude, threshold

Particle.h - Magnitude

scaleFactor

ParticleSystem

PhysicsEngine

Calculation not symmetric any more

PhysicsEngine

__block

scale by source’s magnitude

use normalized

PhysicsEngine

(x-threshold) / (max-min)

Magnet Detail Affordances

• Magnet magnitude in [0,20]• Repulsion threshold in [min, max]‣ (good thing the magnet has only one attribute)

Magnet Detail

magnitude slider

repulsion slider

repulsion min/maxdepend on magnet

magnet label

Repulsion Slider IB

track tint = red

not continuous;only when done dragging

range = [0,1]

Repulsion Slider IB

valueChanged --tell BoardVC handleMagnetRepulsionChanged

BoardVC tap magnet

Demodust90

Demodust100

Use Cases / Stories



Use Cases / Stories


As a user, I want to see more information at a time.

As a user, I want to zoom in.

Stage 8more information

Dust Radius

• Encode a chosen attribute as the radius for each dust particle

• More information at once• Could also use heat map, or category colors

What’s Interesting

• Seeing different radii• UIPickerView to choose attribute• Picker = slot machine wheel

UIPicker

UIPickerView

picker clipped inside container

button toggles visibility

UIPickerView

• Inversion of control, like UITableView• • • component = wheel (e.g. month)• row = choices on a wheel

Connect to BoardVC

dataSource, delegate

BoardVC

just one component

number of attributes, plus “same” option

BoardVC

get the (row-1) attribute

redraw the dust circles

get the (row-1) attribute

BoardVC

interpolate diameter between min/max

find range of strengths

or use fixed radius if no variation

for current selected attribute:

animate, animate, animate!

Demodust90

Demodust100

Use Cases / Stories


As a user, I want to see more information at a time.


Use Cases / Stories



Stage 9pan, zoom

MainStoryboardboard view inside UIScrollView

delegate to BoardViewController

zoom range [1,4]

BoardVC: viewForZooming returns boardView

UIScrollView

• When you zoom, UIScrollView applies a scaling transform to the viewForZooming

• t == [1.33 0 0 1.33 0 0] == scale up 33%• NSStringFromCGAffineTransform(t)

1.33 0 0

0 1.33 0

Listening for Zoom

• scrollViewDidEndZooming:withView:atScale:• We can then make manual adjustments‣ rescale the board View to scale I‣ reframe, redraw the particles‣ including shapes and labels‣ record overall scale‣ limit future zoom range

BoardVC

enlarge the boardView frame

record scale, update limits

resize and re-render particles

BoardVC

direct resizing,not touching .transform

ParticleView

the label’s center would have stayednear the top left

n.b. - we don’t enlarge the font -this aspect demands some manual scale-related treatment even in the

naive approach

Demodust100

Recap

• 9 development cycles, adaptive priorities• BoardViewController• Particles, ParticleSystem, PhysicsEngine• ParticleViews, GRs, Drag, Shake• DetailViews - TableView, Sliders, Picker• Variable Radius• Pan and Zoom

Gaps, Alternatives

• Other features?• Better layout?• Better interaction?• Better data handling?

dust and magnets ii - apple inc.a1.phobos.apple.com/us/r30/cobaltpublic/v4/f9/85/... · enlarge the...

Documents