VISUALIZING SOFTWARE

PROJECTS IN JAVASCRIPT
Tim Disney

Tuesday, June 8, 2010

 Programming is hard

Tuesday, June 8, 2010

Tuesday, June 8, 2010
 SolidSX (Java/.net)
Tuesday, June 8, 2010
 Haskell
Tuesday, June 8, 2010
 JAVASCRIPT CRASH COURSE

• Very dynamic language

• No modules or packages

• All about objects

• no class/object distinction

• objects are dictionaries/maps/hashes

Tuesday, June 8, 2010

 JS top level script

var myObj = {
foo: "bar",
baz: 42.34
}
myObj.foo; // “bar”

function myFun() {
var localVar = 5;
globalVar = 22;
}

Tuesday, June 8, 2010

 JS top level script window object

var myObj = { {
foo: "bar", myObj: {
baz: 42.34 foo: “bar”,
} baz: 42.34
myObj.foo; // “bar” },

function myFun() { myFun: <function>,

var localVar = 5;
globalVar = 22; globalVar: 22
} }

Tuesday, June 8, 2010

Tuesday, June 8, 2010
 Deeper understanding of project

Tuesday, June 8, 2010

 Important Objects

Deeper understanding of project

Tuesday, June 8, 2010

 Visible fields/methods Important Objects

Deeper understanding of project

Tuesday, June 8, 2010

 Visible fields/methods Important Objects

Deeper understanding of project

Relationships between objects

Tuesday, June 8, 2010

 Visible fields/methods Important Objects

Deeper understanding of project

Messy Projects Relationships between objects

Tuesday, June 8, 2010

 Change of structure

Visible fields/methods Important Objects

Deeper understanding of project

Messy Projects Relationships between objects

Tuesday, June 8, 2010

 HOW

• Runs in the browser

• Walks the starting object

• by default window but can be changed in the interface

• gathers object names and types (function, number, string)

• Passes resulting data to the JavaScript InfoVis Toolkit (JIT)

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

foo

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

foo

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

bar foo

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

myObj
bar foo
children: foo, bar

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

myObj
bar foo
children: foo, bar

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

myObj
myFun bar foo
children: foo, bar

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

myObj
myFun bar foo
children: foo, bar

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

myObj
num myFun bar foo
children: foo, bar

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

window myObj
num myFun bar foo
children: myObj, myFun, num children: foo, bar

Tuesday, June 8, 2010

 window
-myObj
gatherData -foo
-bar
-myFun
-num

window myObj
num myFun bar foo
children: myObj, myFun, num children: foo, bar

RGraph

Tuesday, June 8, 2010

 Demo Time

Tuesday, June 8, 2010

Tuesday, June 8, 2010
Tuesday, June 8, 2010
Tuesday, June 8, 2010
Tuesday, June 8, 2010
Tuesday, June 8, 2010