Dust and Magnets. Don Beaver Tuesday, April 17, 12

Transcription

1 Dust and Magnets Don Beaver

2 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

3 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

4 Interactive Visualization Data is dust - iron shavings Magnets represent the criteria for sifting and arranging the data User drags the magnets Dust responds to multiple magnets

5 Interactive Visualization Data is dust - iron shavings Magnets represent the criteria for sifting and arranging the data User drags the magnets Dust responds to multiple magnets

6 Interactive Visualization After (or while) sorting and sifting, examine the dust for details cost: $100 reliability: 99%

7 Citation Yi, Melton, Stasko, Jacko, InfoVis 2005:1-18.

8 Motivations Understanding the data explore, learn, predict Acting on the data decide, choose

9 Salient Features Physical interaction attract, shake dust; intuitive manipulation configurable magnet strength, including repulsion Detail view explore details of select candidates...

10 ... Salient Features Radius encoding e.g. radius reflects calories or sugar Color encoding distinguish particles or categories of particles Filtering Zoom and pan

11 Distinctive Properties Medium-high dimensionality without using axes or projections Adaptable to noisy / bad data Physics is only on when you drag

12 Distinctive Properties You don t have to write an analytic valuation formula to optimize, e.g. f(a,b,c,d) = 2a + 3bc + d2 valuations unintuitive even for experts Arrangement is based on cumulative manipulation not just asymptotic relaxation or a perspective on a prepared static arrangement

13 App Sketch Not a polished product!

14 Software Engineering, Project Management Describe uses and stories Prioritize importance; progress Estimate Schedule Design, implement, test, verify Iterate, iterate, iterate

15 Use Cases / Stories As a user, I want to arrange dust dynamically according to the dust attributes. As a user, I want to choose which attributes are important. As a user, I want a simple representation for data sources. As a user, I want data from anywhere to be converted to a usable representation. 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.

16 Use Cases / Stories Others?

17 Use Cases / Stories As a user, I want to arrange dust dynamically according to the dust attributes. As a user, I want to choose which attributes are important. As a user, I want a simple representation for data sources. As a user, I want data from anywhere to be converted to a usable representation. 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.

18 Use Cases / Stories As a user, I want to arrange dust dynamically according to the dust attributes. As a user, I want to choose which attributes are important. As a user, I want to see aggregate data but drill down when I want. As a user, I want a simple representation for data sources. As a user, I want data from anywhere to be converted to a usable representation. As a user, I want to move dust aside when it s crowded.

19 Use Cases / Stories As a user, I want to arrange dust dynamically according to the dust attributes. As a user, I want to choose which attributes are important. 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. As a user, I want data from anywhere to be converted to a usable representation.

20 Stage 0 coarse designs

21 Visual Design Board View Dust Detail Dust Magnet Magnet Detail shake reset

22 Interaction Design Drag magnet; dust will follow Tap shake; dust moves a little Tap dust; see dust data detail display Tap magnet; enable or disable Double-tap magnet; see magnet detail Actually shake; dust moves a lot Tap reset; particles return to initial layout

23 Software Components Model ParticleModel particle name attributes, strengths ParticleSystem - aggregate particles

24 Software Components View BoardView ParticleView subclasses: MagnetView, DustView DustDetailView (UITableView) MagnetDetailView (later) Buttons (shake, reset)

25 Software Components Controller BoardViewController GRs (tap, double-tap, pan) Events (shake) PhysicsEngine - attractions, motion

26 Planning Stage 1 Show a fixed set of dust and magnets Drag magnets No physics engine yet General overall visual layout and interaction Stage 2: drag, reset (but assess, reprioritize, adapt) Stage 3: physics engine (but adapt) etc etc

27 Stage 1

28 Start With Board View Dust Magnet

29 Start with... BoardViewController ParticleModel - name; attributes, strengths ParticleSystem - aggregate particles BoardView ParticleView subclasses: MagnetView, DustView

30 ParticleModel

31 ParticleSystem Initializers are hardcoded for now; will read from file later.

32 BoardViewController

33 ParticleView Colors based on enabled state Label Rendering

34 MagnetView When disabled, make translucent.

35 DustView

36 BoardViewController

37 Demo dust10

38 Dust = red dot. Good. Magnet = blue square with label. Good. Layout = oops. Overall = decent first step. Stories: As a user, I would like the objects to be laid out pleasantly at the start. As a user, I would like to reset the objects to their starting positions.

39 Demo dust20

40 BoardViewController As a user, I would like the objects to be laid out pleasantly at the start. DONE. As a user, I would like to reset the objects to their starting positions. LATER.

41 Stage 2

42 Goal Board View Dust Magnet reset

43 BoardViewController Add pan and tap GRs

44 BoardViewController

45 Demo dust30

46 BoardViewController Interface Builder to add a reset button boardvc.resetbutton points to it touchupinside calls -handleresetbutton

47 Demo dust30

48 Whew! So far, a simple little game that does virtually nothing except show moderate coding progress. What next? Tap on dust to show details? Physics engine?

49 Physics Engine Simple attraction Normalization Repulsion based on user-set thresholds complex, may punt

50 Simple Attraction attraction strength = dot product if no strength mentioned for an attribute, consider it zero magnet = (alpha=1.0) dust = (alpha=0.20, beta=0.30) attraction = 1* * *0 = 0.20 attraction is in direction of magnet magnets have infinite mass, dust has unit mass

51 Game On Unlike force-directed graphs, the engine is not always running Could have a button to turn it on, or turn it on when a magnet is pressed Turn it on only when a magnet is moved Elapsed time proportional to distance moved

52 Unreal This might not be real in any sense People don t precisely understand magnets, but the manipulations are intuitive And, speaking boldly: the point of visualization is to make use of our preexisting data interpretation abilities As long as the results are useful and not misleading...

53 Stage 3

54 Stage 3 Physics engine Background tap to step engine, for debug Test results

55 PhysicsEngine Calculates magnet-dust attraction Does not know ParticleSystem

56 PhysicsEngine Just a dot product, for now.

57 BoardViewController Magnet pulls dust when dragged Elapsed time proportional to drag distance

58 BoardViewController Calculate motion for a duration (scaled)

59 Demo dust40

60 Test Data alpha beta gamma

61 BoardViewController Background tap triggers debug: move t=1

62 PhysicsEngine Test calculations

63 What next? Core functionality done Dust detail? Move crowded dust? Read structured file?

64 Use Cases / Stories As a user, I want to arrange dust dynamically according to the dust attributes. As a user, I want to choose which attributes are important. 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. As a user, I want data from anywhere to be converted to a usable representation.

65 Use Cases / Stories As a user, I want to arrange dust dynamically according to the dust attributes. As a user, I want to choose which attributes are important. As a user, I want a simple representation for data sources. 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 data from anywhere to be converted to a usable representation.

66 Stage 4

67 Stage 4 Read data from file (JSON) Show real cereal nutrition data

68 Data Sources Cereal nutrition data from Cleaned up with scripts but still noisy

69 Cereal Nutrition Data

70 Cereal Nutrition Data Suddenly switched from cups to grams!

71 Dirty Data Dimension reduction (e.g. PCA) can be very sensitive to these inconsistencies Dust&Magnet can ignore when detected, by disabling the magnet

72 Data Values We ll support quantitative, continuous data our sketch will punt categorical data even YES/NO converted to 1/0 conundrum - only YES values matter original paper does not solve this could use negative magnet magnitudes

73 Nutrition in JSON Script-converted HTML table

74 BoardViewController File is hardcoded and part of app. As a user, I want a simple representation for data sources. As a user, I want a data from anywhere to be converted to a usable representation. NOT NOW.

75 ParticleSystem p_dustmodelwithjson p_jsonfromfile

76 ParticleSystem NumberFormatter to read values

77 ParticleSystem Process array of dictionaries

78 ParticleSystem Handle name as a special case

79 ParticleSystem Process the other (key,value) pairs

80 ParticleSystem Build a dust particle and put it in the array

81 ParticleSystem Boilerplate reading JSON file

82 Try with Test Data

83 Demo dust50

84 Demo dust60

85 What is going on?!

86 Numerical Issues? Where is this from, anyway? What happens if we try ?

87 Demo dust70

88 Real vs Test Data

89 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?

90 Use Cases / Stories As a user, I want to arrange dust dynamically according to the dust attributes. As a user, I want to choose which attributes are important. As a user, I want a simple representation for data sources. 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 data from anywhere to be converted to a usable representation. -- NORMALIZE IN LATER STAGE

91 Stage 5

92 Demo dust80

93 Stage 5 As a user, I want to see aggregate data but drill down when I want. Show data for dust Support selecting dust (just one) Show data table

94 Select dust Track which dust is selected, if any Unhighlight previously selected dust Highlight the selected dust Inform the detail view provide dust details to the detail view

95 DustView Show the label when selected/highlighted.

96 MainStoryboard

97 BoardViewController Detail views Private properties to track selection and geometry Handlers to select dust and resize detail display

98 BoardViewController Select a particular new dust view

99 BoardViewController Gestures to select dust Add tap GR to dust view on creation Background tap now deselects dust

100 BoardViewController <UITableViewDataSource> Count entries in the dust dictionary

101 BoardViewController <UITableViewDataSource> Two-column cells Look up the nth (attribute,strength) pair Write the two entries

102 Demo dust80

103 Wrap-up Particles, ParticleSystem, PhysicsEngine, BoardView, DetailViews, GRs, Drag, Shake Design alternatives? Gaps?

104 fin