Mondrian Overview 2007-11-06

Slide 1: Painting objects with Mondrian Tudor Gîrba www.tudorgirba.com

Slide 2: Mondrian is created by Michael Meyer and Tudor Gîrba

Slide 3: Mondrian is about visualization

Slide 4: A picture is worth thousand words a

Slide 6: UML took it literally :)

Slide 7: 70% of our sensors are dedicated to vision

Slide 8: How many groups do you see?

Slide 9: How many groups do you see?

Slide 10: How many groups do you see?

Slide 11: How many groups do you see?

Slide 12: 70% of our sensors are dedicated to vision

Slide 13: A picture is worth thousand words a

Slide 14: Example: What is ?

Slide 20: What we have: Graphviz digraph classGraph { A [ shape=polygon, width = 6 ... ] B [ shape=polygon, width = 5 ... ] ... A -> B C -> D ... }

Slide 21: What we have: CodeCrawler Node Edge Class Inheritance Node Edge

Slide 22: Mondrian

Slide 23: What we want Scripting Instance based Any data model Close to data Interaction

Slide 24: What we want Scripting Instance based Any data model Close to data Interaction

Slide 27: Composition with Red,Yellow and Blue Piet Mondrian (1921)

Slide 28: Mondrian is about visualization

Slide 29: The simplest script is an empty view view := ViewRenderer new. view open.

Slide 30: View = nodes, edges, layout view := ViewRenderer new. view nodes: classes. view edges: classes from: [:each | each superclass] to: [:each | each]. view treeLayout. view open.

Slide 31: Shapes are responsible for drawing view := ViewRenderer new. view borderedRectangleShape height: [:each | each numberOfMethods]. view nodes: classes. view edges: classes from: [:each | each superclass] to: [:each | each]. view treeLayout. view open.

Slide 32: Blocks can be replaced by symbols view := ViewRenderer new. view borderedRectangleShape height: #numberOfMethods. view nodes: classes. view edgesFrom: #superclass. view treeLayout. view open.

Slide 33: Nesting is done through blocks view := ViewRenderer new. view borderedRectangleShape. view nodes: classes forEach: [:each | view nodes: each methods. view gridLayout]. view edgesFrom: #superclass. view treeLayout. view open.

Slide 34: Mondrian is about visualizations

Slide 35: Mondrian is about interactive visualization

Slide 36: Interaction is scriptable, too view := ViewRenderer new. view2 := ViewRenderer new. view interaction onSelect: [:each | each viewOn: view2]. view interaction popupView: [:each :aView | each viewOn: aView]. ... view open. view2 open.

Slide 37: Mondrian is a domain specific language view := ViewRenderer new. view borderedRectangleShape. view interaction popupView: [:each :aView | each viewOn: aView]. view nodes: classes forEach: [:each | view nodes: each methods. view gridLayout ]. view edgesFrom: #superclass. view treeLayout. view open.

Slide 38: Mondrian Tudor Gîrba www.tudorgirba.com

Slide 39: Tudor Gîrba www.tudorgirba.com creativecommons.org/licenses/by/3.0/