2D and 3D Visualizations In Wikidev2.0 M. Fokaefs, D. Serrano, B. Tansey and E. Stroulia http://ssrg.cs.ualberta.ca

WikiDev2.0 101

  Objective: to make explicit the elements around software collaboration: artifacts, people and communication

  How it works:   Information from SVN, tickets, emails, IRC chats, source code,

code-analysis tools (JDEvAn) is incrementally imported  Everything gets a URL  Analyses generate hyperlinks between these URLs   Interactive views enable the exploration of the original

information and analyses results

10/23/10

2

ICSM2010 - ERA

The WikiDev2.0 Architecture 3

LaTeX Convertor

Template Editor Calendars

Visualizations

Text Replace Tagging

Annoki Control and common functions

Annoki

Stock MediaWiki core

WikiDev 2.0 System

Stock MediaWiki database

Custom Annoki database

Custom WikiDev database

Access Controls Content Analysis

Page Feedback Structural Differencing

3D OWL Visualization

UML model integration

Text analysis

Bug-tracker integration

Project lifecycle graphs

Mailing list integration

IRC integration Artifact clustering

Common WikiDev functions

WikiDev 2.0

Communication graphs

SVN integration

10/23/10 ICSM2010 - ERA

WikiDEv2.0 is a test-bed for experiments The Question here: Is a 3D virtual world a useful and usable “live” visualization?

Sortable  table  for  each  resource  

Bugzilla  extension  

Ac6vity  interac6ve  analy6cs  

Team  index  

Tabular++ Views 4

10/23/10 ICSM2010 - ERA

View 1

View  based  on  WikiMap  

Classes  Interfaces  Annota6ons  

UMLViewer

10/23/10 ICSM2010 - ERA

5

View 2

WikiDev3D

  Code and communication artifacts are drawn as different kinds of buildings   Industrial area: code artifacts  Residential area: communication artifacts

  We used MDS and Sammon’s projection for the layout based on  Co-change (code artifacts)  Common terms (communication artifacts)

  The colors represent users.   The height corresponds to metrics specific to each building

type 10/23/10

6

ICSM2010 - ERA

View 3

7

Buildings: • Type

• Height • User contribution

Avatar

Chat box

Control Panel

Visibility Panel

10/23/10 ICSM2010 - ERA

8

Properties Panel

10/23/10 ICSM2010 - ERA

9

Changed Building

Number of Changed Buildings

The study

  4 graduate students   13 (+1) questions   Questions about

communication, collaboration, history were easier in 2D

  Questions about contribution were easier in 3D

10

10/23/10 ICSM2010 - ERA

The questions

1. Who collaborated with User8? 2. Who talked with User6? 3. Who contributed the most to the project? 4. Who contributed the most to "/extensions/wikidev/umlHandler/XML_SQLQueries.php"? 5. Who is working on what now? 6. Who collaborated with User7 on "/extensions/wikidev/UMLDisplay/src/WikiRoamer.as”? 7. Who owns (had the most edits of) "/non_extension/xmi parser/src/parser/NodeExtractor.java”? 8. Name one of the oldest files. 9. What is the most changed file? 10. Name one of the files with the most editors. 11. When were peaks of activity in the development process? 12. What files were involved in the peaks of activity? 13. What files are currently being worked on?

14. Bonus Question (please answer this question only if you are using WikiDev3D) In the message "UML Viewer" (id:99) there was a discussion about some bugs. Can you describe these bugs, how people communicated to point them out and solve them and what files were changed eventually?

10/23/10 ICSM2010 - ERA

11

Back to the Study

Conclusions

  We compared two alternative visualizations in WikiDev2.0: a 2D UML Viewer and a 3D city-based view of software products and process in OWL  The former is accessible to individual users, while the latter

enables the collaborative data exploration  Both present information about software and communication

artifacts and their changes (in tabular form in 2D and as animations in 3D)

  Our pilot study was not conclusive about which of the two visualizations is “better”

10/23/10 ICSM2010 - ERA

12

And the Poster!

10/23/10 ICSM2010 - ERA

13 WikiDev2.0 WikiDev2.0 is an integrated web-based platform to support software development teams.

It is built on Annoki, a wiki-based system, offering an intuitive and easy to use front end.

Using a RESTful approach, WikiFev2.0 integrates • Mailing Lists • IRC • Bugzilla • SVN repositories • JDEvAn, a tool for mining SVN history • Wiki pages

Apart from the tool integration, WikiDev2.0 offers a variety of tools to help with the team organization: • Namespaces, to enhance the security and privacy of the project data; • A calendar, for scheduling meetings and organize deadlines; and • A template editor, for creating templates of often used page layouts.

Due to the large amount of data produced during the development of a project, WikiDev2.0 offers a set of analytical tools to increase developers’ awareness of the project. • Clustering of artifacts; • An interactive UML viewer; • 2D visualizations; • 3D visualizations; • Natural language processing; and • A Social Query Language.

Marios Fokaefs, Diego Serrano, Brendan Tansey and Eleni Stroulia Department of Computing Science, University of Alberta, Edmonton,

Canada http://ssrg.cs.ualberta.ca/index.php/WikiDev_2.0!

2D and 3D Visualizations in WikiDev2.0"

3D Visualizations"Using a city metaphor, we visualize the SVN repository and communication artifacts in a Open Wonderland, a virtual world. The various dimensions, building types, textures and layout represent different aspects of the project.

Evaluation"4 graduate students were asked 13 questions. They answered the same questions for the 2D and the 3D visualizations and reported how easily they found the answers for each type of visualization. In 2D, the questions concerning communication/collaboration and history were answered more easily, while in 3D, the contribution questions were answered more easily. In general though, both types of visualization were helpful to the subjects.

UML Viewer"A Flash-based interactive display of UML models associated with a project. This extension uses XML representations of UML diagrams that have been converted to a JDEvAn database format, allowing for specific queries to be issued to display subsets of the diagram for further analysis. This viewer also uses the clustering data to display artifacts (such as mail messages) related to a specific UML object in order to provide a complete view of the development process for that object.

2D Visualizations"These visualizations present quantitative and historical data based on contribution and communication analysis. The data is presented in tables and the analysis results in pie and line charts.