1 software visualization lauren wilkinson shahar maoz picasso bhowmik
TRANSCRIPT
![Page 1: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/1.jpg)
1
SOFTWARE VISUALIZATION
Lauren WilkinsonShahar Maoz
Picasso Bhowmik
![Page 2: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/2.jpg)
2
What is Software Visualization?
Software visualization categorization* Algorithm visualization
Static (flow chart) Animation
Program visualization Static code / data viz (e.g. UML, ERD) Code / data animation (execution)
* Stasko et al, 1998
![Page 3: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/3.jpg)
3
What to visualize?
Source code and configuration: data and text, metadata, file and function size, access history, bug locations and fixes
Code and data structure: data structures, data flow, function calls
Execution: data and algorithms animation, message passing, control flow, memory and resource utilization
Code and human interaction: development process
![Page 4: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/4.jpg)
4
Things to think about
Key challenges* Scale
Existing applications work well on toy programs Transition between levels
Code, control flow, class diagram, package, application
Design time, run time Automation
Layout
* Stasko et al, 1998
![Page 5: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/5.jpg)
5
Algorithm Animations
Algorithms in Action – A program for learning basic algorithms, developed by Linda Stern, Lee Naish, and Harald Sondergaard, at The University of Melbourne.
![Page 6: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/6.jpg)
6
BUBBLE SORT
Simplest sorting method. For a list of size n the algorithm passes
through the list n-1 times. At each pass, every two adjacent elements that are not in correct order are swapped.
http://www.csse.monash.edu.au/~dwa/MELB/BubbleSort.html
![Page 7: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/7.jpg)
7
Selection Sort
Sorts by repeatedly choosing the largest item among the unsorted items, and exchanging it with the item in its correct position.
http://www.csse.monash.edu.au/~dwa/MELB/SelectionSort.html
![Page 8: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/8.jpg)
8
QuicksortQuicksort
Recursively partitions an array around a partition element (Divide & Conquer) – One partition contains elements less than or equal to
the partition element,
Other partition contains elements greater than or equal to the partition element.
http://www.cs.mu.oz.au/aia/QuickSort.html
![Page 9: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/9.jpg)
9
2-3-4 Tree
In the 2-3-4 tree, nodes can contain one key (plus links to 2 children, so called 2-nodes), two keys (3-nodes), or three keys (4-nodes).
New items are always inserted into already existing leaf nodes, converting 2-nodes to 3-nodes, and 3-nodes to 4-nodes.
http://www.cs.mu.oz.au/aia/Tree234.html
![Page 10: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/10.jpg)
10
Work by choosing a minimum cost edge at each step.
In Prim's algorithm, we start with an arbitrarily chosen vertex as the root of a tree T, and at each step we add to T the edge e = VW of minimum cost, where V is already in T and W is not in T.
http://www.csse.monash.edu.au/~dwa/MELB/Spanning.html
Minimum Spanning Tree Algorithm
![Page 11: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/11.jpg)
11
Flow Diagrams
The two most important modeling techniques used in analyzing and building information systems are :–Data Flow Diagrams (DFDs)Entity-Relationship Diagrams
(ERDs)
![Page 12: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/12.jpg)
12
Data Flow Diagrams Data Flow Diagrams (Dfds)(Dfds)
DFD PrinciplesBasic DFD NotationsERD PrinciplesBasic ERD Notations
![Page 13: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/13.jpg)
13
What processing is done? When? How? Where? By which component?
What data is needed? By which component? for what? When?
![Page 14: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/14.jpg)
14
PrinciplesPrinciples
System can be decomposed into subsystems.
Subsystem represents a process or activity in which data is processed.
Each 'process' in a DFD has the characteristics of a system.
Process must have input and output. Data Input – Data Flows – Data Output
![Page 15: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/15.jpg)
15
ExampleExample
![Page 16: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/16.jpg)
16
Entity Relationship Entity Relationship DiagramsDiagrams
A simple entity-relationship diagram
![Page 17: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/17.jpg)
17
PrinciplesPrinciplesThere are three
basic elements in ER models:
Entities are the "things" about which we seek information.
Attributes are the data we collect about the entities.
Relationships provide the structure needed to draw information from multiple entities.
![Page 18: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/18.jpg)
18
The Unified Modeling Language (UML)
A modeling language for specifying, visualizing, constructing, and documenting systems
Based on the Object Oriented Paradigm Accepted as industry standard (~1997) Nine types of diagrams: class, object, use
case, sequence, collaboration, statechart, activity, component, and deployment.
Examples from Ideogramic
![Page 19: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/19.jpg)
19
Issues with UML Class Diagrams Aesthetics and Usability: empirical study*
Goal Identify the most important aesthetics for the automatic layout of
UML class diagrams from a human comprehension point of view Procedure
CS students were given short UML class with examples, then read a textual spec and asked to identify correct / incorrect class diagrams
Diagrams shown in random order, each with specific aesthetic metric value set to very high or very low (bends, orthogonality, edge variation, node distribution, direction of flow)
Correctness and time-to-response measured Conclusions
“Tempting to say that none of the aesthetics really matters” Domain specific algorithms are required Semantic grouping of related objects (e.g. position subclasses in an
inheritance hierarchy close to each other) “A nice layout is unlikely to be sufficient for intuitive use”
* Purchase et al, 2001
![Page 20: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/20.jpg)
20
![Page 21: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/21.jpg)
21
Visual Programming Languages
• A purely visual language relies completely on visualization
• No textual representation at all
• The programmer manipulates icons or other graphical representations to create a program, which is then executed and debugged in the same visual environment
• Examples: VIPR, Prograph, Cube
Marat Boshernitsan and Michael Downes. Visual Programming Languages: A Survey. CS Division, UC Berkeley. http://www.cs.berkeley.edu/~maratb/cs263/paper/paper.html
![Page 22: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/22.jpg)
22
VIPR: Visualization of Program Execution
Citrin et al. 1994 Citrin, W., Doherty, M., and Zorn, B. Design of a completely visual object-oriented programming language. In Burnett, M., Goldberg, A., and Lewis, T., editors, Visual Object-Oriented Programming. Prentice-Hall, New York, 1994.
![Page 23: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/23.jpg)
23
VIPR: Control Statements and while loops
Citrin et al. 1994 Citrin, W., Doherty, M., and Zorn, B. Design of a completely visual object-oriented programming language. In Burnett, M., Goldberg, A., and Lewis, T., editors, Visual Object-Oriented Programming. Prentice-Hall, New York, 1994.
![Page 24: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/24.jpg)
24
VIPR: Function Calls
Citrin et al. 1994 Citrin, W., Doherty, M., and Zorn, B. Design of a completely visual object-oriented programming language. In Burnett, M., Goldberg, A., and Lewis, T., editors, Visual Object-Oriented Programming. Prentice-Hall, New York, 1994.
![Page 25: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/25.jpg)
25
Prograph: A Completely Iconic Programming Language
http://www.mactech.com/articles/mactech/Vol.10/10.11/PrographCPXTutorial/
![Page 26: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/26.jpg)
26
Loops in Prograph
http://www.mactech.com/articles/mactech/Vol.10/10.11/PrographCPXTutorial/
![Page 27: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/27.jpg)
27
Cube: Function for the Factorial of a Number
Najork & Kaplan 1991 Najork, M. and Kaplan, S. The cube language. In Proc. 1991 IEEE Workshop Visual Languages, pp. 218-224, Kobe, Japan, 1991.
![Page 28: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/28.jpg)
28
Graphical Development Tools
• Related to visual programming, but the language itself is not visual
• Textual languages with a graphical interface
• Great for layout/GUI development
• Examples: Foam, Visual Basic, Dreamweaver
![Page 29: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/29.jpg)
29
Foam: A Java Swing Developer
http://www.computersinmotion.com
![Page 30: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/30.jpg)
30
SeeSoft: a look at the source code*
Visualizes text files by mapping each line into a thin row, colored according to a statistic of interest. Any text and any statistics about the text may be used.
Interesting case is source code with statistics such as the age, programmer, or functionality of each line. These statistics are derived from a variety of sources, such as version control systems, static analysis, and profiling.
Examples in 2D and a new application in 3D
* Eick et al, 1995
![Page 31: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/31.jpg)
31
![Page 32: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/32.jpg)
32
![Page 33: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/33.jpg)
33
Building on the SeeSoft Metaphor: Source Viewer 3D (sv3D)
• 3D representation for visualizing large software systems
• Extends the SeeSoft metaphor
• Applications include:
• fault localization (debugging)
• visualization of execution traces
• source code browsing
Marcus et al. 2003 Marcus, A., Feng, L., and Maletic, J. 3D Representations for Software Visualization. ACM Symposium on Software Visualization, San Diego.
![Page 34: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/34.jpg)
34
Customized Program Visualizations in sv3D
• Users can define mappings between software elements and visualization components
• Data can be mapped to visual elements of color, position, height and depth
Marcus et al. 2003 Marcus, A., Feng, L., and Maletic, J. 3D Representations for Software Visualization. ACM Symposium on Software Visualization, San Diego.
![Page 35: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/35.jpg)
35
Viewing Complex Source Code with sv3D
2D Overview of Source Code 3D Overview of Source Code
Color represents nesting level
• Each cylinder is a line of source code
• Color represents control structure type
• Height represents nesting level
Marcus et al. 2003 Marcus, A., Feng, L., and Maletic, J. 3D Representations for Software Visualization. ACM Symposium on Software Visualization, San Diego.
Color represents control structure
![Page 36: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/36.jpg)
36
Overcoming Occlusion in sv3D
Marcus et al. 2003 Marcus, A., Feng, L., and Maletic, J. 3D Representations for Software Visualization. ACM Symposium on Software Visualization, San Diego.
Transparency
Elevation
![Page 37: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/37.jpg)
37
Tarantula: Localizing Program Faults
http://www.cc.gatech.edu/aristotle/Tools/tarantula/index.html
Food for Thought: Could sv3D improve this visualization?
![Page 38: 1 SOFTWARE VISUALIZATION Lauren Wilkinson Shahar Maoz Picasso Bhowmik](https://reader036.vdocuments.mx/reader036/viewer/2022081516/56649db95503460f94aa987a/html5/thumbnails/38.jpg)
38
Design Exercise
Design a better visualization for the UML diagram handed out and discussed by Shahar.
Remember: Maintain the same logic Encouraged: Use 3D, Animation, Colors