dust and magnets ii - apple inc.a1.phobos.apple.com/us/r30/cobaltpublic/v4/f9/85/... · enlarge the...
Post on 27-Jan-2021
1 Views
Preview:
TRANSCRIPT
-
Dust and Magnets IIDon Beaver
dbeaver@cmu.edu
mailto:dbeaver@cmu.edumailto:dbeaver@cmu.edu
-
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
-
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 to move dust aside when it’s crowded.
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 to move dust aside when it’s crowded.
As a user, I want data from anywhere to be converted to a usable representation.
-
Use Cases / StoriesAs 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 to use normalized data and determine my own weightings.
As a user, I want data from anywhere to be converted to a usable representation.
-
Stage 5dust detail
-
Demodust80
-
Stage 5
• Support selecting dust (just one particle)• Show data table
As a user, I want to see aggregate data but drill down when I want.
-
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
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 to use normalized data and determine my own weightings.
As a user, I want data from anywhere to be converted to a usable representation.
-
Use Cases / Stories
As a user, I want to move dust aside when it’s crowded.
As a user, I want to use normalized data and determine my own weightings.
As a user, I want data from anywhere to be converted to a usable representation.
-
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
As a user, I want to move dust aside when it’s crowded.
As a user, I want to use normalized data and determine my own weightings.
As a user, I want data from anywhere to be converted to a usable representation.
-
Use Cases / Stories
As a user, I want to use normalized data and determine my own weightings.
As a user, I want data from anywhere to be converted to a usable representation.
-
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
As a user, I want to use normalized data and determine my own weightings.
As a user, I want data from anywhere to be converted to a usable representation.
-
Use Cases / Stories
As a user, I want data from anywhere to be converted to a usable representation.
-
Use Cases / Stories
As a user, I want data from anywhere to be converted to a usable representation.
As a user, I want to see more information at a time.
As a user, I want to zoom in.
-
Use Cases / Stories
As a user, I want data from anywhere to be converted to a usable representation.
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 data from anywhere to be converted to a usable representation.
As a user, I want to see more information at a time.
As a user, I want to zoom in.
-
Use Cases / Stories
As a user, I want data from anywhere to be converted to a usable representation.
As a user, I want to zoom in.
-
Stage 9pan, zoom
-
MainStoryboardboard view inside UIScrollView
delegate to BoardViewController
zoom range [1,4]
BoardVC: viewForZooming returns boardView
-
Zoom
-
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?
-
fin
top related