Tweet
Tweet

Slide 1

Slide 1 text

Copyright 2013 Data Algorithm Visualization: Patterns and Implementations Dan Pilone - @danpilone - [email protected]

Slide 2

Slide 2 text

Background...

Slide 3

Slide 3 text

Jason

Slide 4

Slide 4 text

Jason Dan ≠

Slide 5

Slide 5 text

Jason Dan AWESOME Marc

Slide 6

Slide 6 text

Visualization Techniques for Skeptics

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

≟ http://www.flickr.com/photos/76657755@N04/6881494634/

Slide 9

Slide 9 text

Don’t we now have two problems?

Slide 10

Slide 10 text

1. Solve original problem 2. Design and write visualization +

Slide 11

Slide 11 text

“Of course maybe some super smart guy will figure out the generic solutions for these types of problems. On the other hand, maybe it's really not as easy a problem as it was made to look.” gman - http://www.codinghorror.com/blog/2012/03/visualizing-code-to-fail- faster.html

Slide 12

Slide 12 text

Maybe it doesn’t have to be generic...

Slide 13

Slide 13 text

Visualizing QuickSort

Slide 14

Slide 14 text

http://en.wikipedia.org/wiki/Quicksort

Slide 15

Slide 15 text

def  quicksort(list,  p,  r)        if  p  <  r  then                q  =  partition(list,  p,  r)                quicksort(list,  p,  q-­‐1)                quicksort(list,  q+1,  r)        end end   def  partition(list,  p,  r)        pivot  =  list[r]        i  =  p  -­‐  1        p.upto(r-­‐1)  do  |j|                if  list[j]  <=  pivot                        i  =  i+1                        list[i],  list[j]  =  list[j],list[i]                end                      end        list[i+1],list[r]  =  list[r],list[i+1]        return  i  +  1 end http://opennfo.wordpress.com/2009/02/15/quicksort-in-ruby/

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Round 1: Simple HTML to a file

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Results...? ✤ Minimal time to implement (< 1hr) ✤ Shows.... something, but not terribly helpful ✤ Made a mess of the code...

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Quicksort Pivot Index = 34 Left Index = 1 Right Index = 3 No swap... ?

Slide 23

Slide 23 text

Algorithmic visualization data is frequently out-of-band information

Slide 24

Slide 24 text

Round 2: Out-of-band data

Slide 25

Slide 25 text

Quicksort Input / Output Out-of-band

Slide 26

Slide 26 text

Out-of-band Data ✤ Logs* ✤ Dedicated output files ✤ Simple AJAX / Web Service ✤ WebSockets ✤ HTML5 Server Sent Events (SSE)

Slide 27

Slide 27 text

Quicksort Input / Output { Out-of-band

Slide 28

Slide 28 text

Basic Visualization Harness ✤ Simple web app (controller) to accept input for the algorithm ✤ Simple output from the controller to show the results ✤ Out-of-band support in the browser to render visualization information +

Slide 29

Slide 29 text

Actually building that harness... ✤ HTML5 Server Sent Events ✤ Use Rails 4’s live streaming to send SSEs ✤ Native support in HTML5 compliant browsers with minimal JS/CSS to receive events and visualize information

Slide 30

Slide 30 text

Quicksort Input / Output Out-of-band

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Quicksort Input / Output Out-of-band

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Quicksort ✓ Input / Output Pivot Index = 34 Left Index = 1 Right Index = 3 No swap... ✓ Out-of-band

Slide 36

Slide 36 text

Be as non-invasive as possible

Slide 37

Slide 37 text

✤ We want to be able to get at anything in the implementation we want ✤ We want it to be maintainable and not significantly impact the implementation ✤ Ideally we want to be able to leave it in there, but disabled, for production release

Slide 38

Slide 38 text

Hook the logger to piggy-back viz data

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Quicksort ✓ Input / Output Pivot Index = 34 Left Index = 1 Right Index = 3 No swap... ✓ ✓ Out-of-band

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Think about what you’re trying to see

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Jason Dan ≠

Slide 46

Slide 46 text

Round 3: Visualize What Matters

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

A little CSS love...

Slide 49

Slide 49 text

...update the JS to match...

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

...reload the browser...

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

It’s too fast...

Slide 54

Slide 54 text

Visualization Data often needs to be temporally independent

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Quicksort ✓ Input / Output Pivot Index = 34 Left Index = 1 Right Index = 3 No swap... ✓ ✓ Out-of-band

Slide 59

Slide 59 text

Visualization Enhancements...

Slide 60

Slide 60 text

Piety ✤ Simple jQuery Plugin that renders content into drawn graphs ✤ Very easy to use ✤ Can support dynamic (animated) data

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Google Charts ✤ Well known and reasonably straight-forward to use ✤ Several really interesting charts including Geo Charts and Gauges ✤ Wants to be fed via JavaScript. It’s not just a visualization of HTML content.

Slide 63

Slide 63 text

D3

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

✤ Data driven documents ✤ Great support for moving data and animation ✤ Core concepts ✤ Node selection ✤ SVG based rendering ✤ Data binding

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

NVD3

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

Recap...

Slide 71

Slide 71 text

Algorithmic visualization data is frequently out-of-band information

Slide 72

Slide 72 text

Be as non-invasive as possible

Slide 73

Slide 73 text

Think about what you’re trying to see

Slide 74

Slide 74 text

Visualization data often needs to be temporally independent

Slide 75

Slide 75 text

Pretty it up if it helps

Slide 76

Slide 76 text

✤ Sample Code: http://github.com/dpilone ✤ Rails 4 Streaming: http://tenderlovemaking.com/2012/07/30/is-it-live.html ✤ Piety: http://benpickles.github.com/peity/ ✤ Google Charts: https://developers.google.com/chart/ ✤ D3: http://d3js.org ✤ D3 Tutorial: http://code.hazzens.com/d3tut/ ✤ NVD3: http://nvd3.org Links and Questions Dan Pilone @danpilone [email protected]