Interactive Visualization of Software

Interactive Visualization (of Software)

Markus Scheidgen

1

DEMO

2

Visual Analytics Framework

3

source


3

sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories


3


natural phenomena‣ dust particles‣ seismic activity‣ traffic


3


datameasurements



3


‣ tables (nominal, ordinal, metric)‣ relations‣ hierarchies‣ time series‣ (geo-)spatial data‣ ontologies

common meta-model

‣ data-set, comprising ‣ data-points, comprising‣ properties

common nomenclature

datameasurements



3


metrics

dependenciesstructure

histories of metrics


common meta-model


common nomenclature

datameasurements



3


metrics




common meta-model


common nomenclature

datameasurements visualizationprojection



3


metrics



common charts‣ histogram, parallel coordinates,

scatter, box&whiskers, spider web, ...‣ graphs, chords, edge, ...‣ graphs, trees, tree map, sun

burst, ...‣ line (time series), ...‣maps, ...‣ graphs (taxonomy/ontology), ...


common meta-model


common nomenclature




3


metrics







common meta-model


common nomenclature


complex charts‣multiple properties of data points in

a single chart (polymetric views)‣ one per data point, but multiple

dimensions on each symbol

com

bina

tionnatural phenomena

‣ dust particles‣ seismic activity‣ traffic


3


metrics







common meta-model


common nomenclature





com

bina



complex/interactive visualization

‣multiple connected charts for different properties


3


metrics







common meta-model


common nomenclature

➜ visual analytics / explorative data analysis / multi-variant data analysis ➜





com

bina






3


metrics







common meta-model


common nomenclature






com

bina



‣ concrete measurements, projections, and combinations depend on the use case‣ description and realization of measurement classes/types are use

case dependent‣ description language for projections and combinations based on

a common data meta-model and popular chart types are independent from specific use cases




3


metrics







common meta-model


common nomenclature






com

bina






meta-model




3


metrics







common meta-model


common nomenclature






com

bina






meta-modelDSL




3


metrics







common meta-model


common nomenclature






com

bina






meta-modelDSL

DSL




3


metrics







common meta-model


common nomenclature






com

bina






meta-modelDSL

DSL

library




3


metrics







common meta-model


common nomenclature






com

bina






meta-modelDSL

DSL

library

framework



Agenda

▶ Visual Analytics Framework

▶ Measuring Software

▶ Related Work

▶ Meta-Model

▶ Complex Interactive Visualization-Language

▶ Framework: Architecture and Realization

▶ Conclusions

4

Measuring Software

▶ Artifacts primarily include: models, source code (compilation units)

▶ Data as representation of abstractions within a piece of software

▶ Three kinds of abstractions

▶ structures => hierarchies, trees

▶ dependencies => graphs

▶ metrics => metric data

▶ Metrics

▶ defined by (mathematical) functions that assign numeric values (measures) to software components to represent certain properties about set components

▶ metrics are abstractions derived from statics or even dynamics of software components

▶ for existing (e.g. classes, methods) and derived software components (e.g. dependencies)

▶ can be aggregated alongside other abstractions; e.g. package metrics based on class metrics

▶ Aggregations: abstractions that summaries other abstractions, usually in the form mathematical (usually statistical) operations, e.g. sum, average, median, etc.

5

Measuring Software

▶Eclipse Java Projects and MoDisco as a case study

▶ complex source artifact language

▶ complex meta-model (350+ classes)

▶ well understood abstractions

▶ containment hierarchies (package / class / method)

▶ inheritance hierarchies

▶ dependencies: call graphs, class and package dependencies

▶ metrics: CK-metrics, complexity metrics (Halstead, McCabe)

6

Related Work

7

source data visualization










common meta-model

measurements projection

com

bina

tion

lots of programming

Visual analytics as a conceptual framework1. Visual analysis and design: Tamara Munzner, 2014

lots of programming

lots of programming

Related Work

8











common meta-model


com

bina

tion

library

Caleydo – A visual analysis framework1. Alexander Lex, Marc Streit, Ernst Kruijff, Dieter Schmalstieg: Caleydo – Design and Evaluation of a Visual Analysis Framework for Gene Expression Data in its Biological Context, 20102. Samuel Gratzl et al.: Caleydo Web: An Integrated Visual Analysis Platform for Biomedical Data, 2015

lots of programming

lots of programming

eclipse-based framework

http://caleydo.gehlenborg.com/posters/2015_infovis_caleydo-web_abstract.pdf




Related Work

9











common meta-model


com

bina

tion

Specific software visualization solutions

10

Related Work

Polymetric Views Software Maps

Lanza, M., & Ducasse, S. (2003). Polymetric views - A lightweight visual approach to reverse engineering. IEEE Transactions on Software Engineering, 29(9), 782–795.

Kuhn, A., Loretan, P., & Nierstrasz, O. (2008). Consistent layout for thematic software maps. Proceedings - Working Conference on Reverse Engineering, WCRE, 209–218.

11

Related Work

Wettel, R. (2010). Software Systems as Cities. Università Della Svizzera Italiana. http://doi.org/10.1145/1985793.1985868

http://doi.org/10.1145/1985793.1985868

http://doi.org/10.1145/1985793.1985868

http://doi.org/10.1145/1985793.1985868

http://doi.org/10.1145/1985793.1985868

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

Programming Libraries for Visualizations

12

scatter plot library

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12


Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12

WMC RFC

A 1 2

B 1 1

C 2 1

program


Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12

WMC

RFC

A

B C

WMC RFC

A 1 2

B 1 1

C 2 1

program


Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12

WMC

RFC

A

B C

WMC RFC

A 1 2

B 1 1

C 2 1

program


Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12

WMC

RFC

A

B C

WMC RFC

A 1 2

B 1 1

C 2 1

program


Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12

WMC

RFC

A

B C

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

WMC RFC

A 1 2

B 1 1

C 2 1

program


Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12

WMC

RFC

A

B C

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

WMC RFC

A 1 2

B 1 1

C 2 1

program

Same events and styles for all DOM elements!

<svg:g> <svg:circle .../> <svg:circle .../> <svg:circle .../> <svg:g> ...</svg:g>

transformationDOM


Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12

WMC

RFC

A

B C

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

WMC RFC

A 1 2

B 1 1

C 2 1

program



transformationDOM

traces


Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12

WMC

RFC

A

B C

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

WMC

RFC

A

B C

browser

WMC RFC

A 1 2

B 1 1

C 2 1

program



transformationDOM

traces


Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages


12

WMC

RFC

A

B C

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

WMC

RFC

A

B C

browser

WMC RFC

A 1 2

B 1 1

C 2 1

program



transformationDOM

traces

DOM

Web Technologies: D3.js, DOM, Events, Styles

13

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

WMC

RFC

A

B C

browser




WMC

NOC

A

B

C

D3.js – a transformation language for all kinds of visualizations rather than a library of some specific visualizations.

General Data Model

▶ directed (non hyper) graphs

▶ nodes (or data points: a set of one or more measurements on a single member of a population.)

■ type

■ key-value pairs (properties, measurements)

■ same keys for same type

▶ edges

■ key, source nodes of same type have edges for same keys (property of the source type)

■ can be composite


■ same keys for same edge key and source type

▶ (property)-values (measures) are either

■ nominal: unordered (finite=categorial) possible feature values (e.g. sex, boolean values, colors)

■ ordinal: (finite) feature values with order (e.g. school marks)

■ metric: infinite values with order and null value (a.k.a numbers)

14

{ a: 32, b: “good” }

{ c: 1.2 }

https://en.wikipedia.org/wiki/Level_of_measurement


https://en.wikipedia.org/wiki/Statistical_population


General Data Model



■ type



▶ edges









14

{ a: 32, b: “good” }

{ c: 1.2 }

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages





General Data Model



■ type



▶ edges









15

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

type:Stringlabel:String

DataPoint

name:StringProperty

isComposite:Boolean

Reference

value:anyAttribute

properties *

properties *

dataPoints *

<<DataType>>any

<<DataType>>Number

<<DataType>>Ordinal

<<DataType>>Nominal





General Data Model

// DataPoints of same type have the same Propertiescontext DataPointinv: DataPoint::allInstances->select(type=self.type)->forAll(other| other.properties->forAll(p1|self.properties->exist(p2| p1.name = p2.name and p1.typeOf = p2.typeOf and p1.isComposite = p2.isComposite and p1.value.typeOf() == p2.value.typeOf()))

// References from same type DataPoints and same name have same propertiescontext DataPointinv: self.references->forAll(ref1|DataPoint::allInstances->select(dp| dp.type = self.type)->forAll(dp|dp.refernces->forAll(ref2| ref1.name = ref2.name implies ref1.properties->forAll(p1| ref2.properties.exist(p2| p1.name=p2.name and p1.typeOf = p2.typeOf and p1.value.typeOf() == p2.value.typeOf()))))

// References reference DataPoints with consistent typecontext Reference:inv: self.dataPoints.forAll(a,b|a.type = b.type)

// Composite References form circle free graphs...

16

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

type:Stringlabel:String

DataPoint

name:StringProperty

isComposite:Boolean

Reference

value:anyAttribute

properties *

properties *

dataPoints *

<<DataType>>any

<<DataType>>Number

<<DataType>>Ordinal

<<DataType>>Nominal

DEMO

17

Complex Interactive Visualization-Language

18

typepatternconfiguration

Chart

color

Group

Data

uri

Sourcegroups ** charts

input

1

context Chart::allInputGroupsquery: if (input.isInstanceOf(Group)) input.charts->collect(allInputGroups)->union({input}) else {}

// Charts cannot take input that is based on their own selectioncontext Chartinv: not allInputGroups->collect(charts)->contains(self)

/allInputGroups* A

r

B


19

D is a set of data-points

I ✓ D the set of input data-points

selC a selection function for each chart

IC = selC(I) ✓ children?(I)

iSCr = {d 2 IC |9d0 : d 2 parent?(d0 _ d0 2 parent?(d)}dSC

r a user selection with dSCr ✓ IC ✓ D

iSr =

[

C2charts(r)

dSCr

DI ✓ D

IA

IB

A

r

B

iSr

iSAr

iSr

iSBr

dSAr dSB

r

iSr = dSAr [ dSB

r

I I

IA IB


20

D is a set of data-points

I ✓ D the set of input data-points

selC a selection function for each chart

IC = selC(I) ✓ children?(I)

iSCr = {d 2 IC |9d0 : d 2 parent?(d0 _ d0 2 parent?(d)}dSC

r a user selection with dSCr ✓ IC ✓ D

iSr =

[

C2charts(r)

dSCr

...

...

...

DI ✓ D

IA

IB

A

r

B

iSr

iSAr

iSr

iSBr

dSAr dSB

r

iSr = dSAr [ dSB

r

I I

IA IB


21

A

r

B C

b

r

A

B B

r

A

b

C

A

r

B


22

r

A

B

r

A

B b

typepatternconfiguration

Chart

color

Group

Data

uri

Sourcegroups ** charts

input

1

context Chart::allInputGroupsquery: if (input.isInstanceOf(Group)) input.charts->collect(allInputGroups)->union({input}) else {}

// Charts cannot take input that is based on their own selectioncontext Chartinv: not allInputGroups->collect(charts)->contains(self)

/allInputGroups*


23

DOM

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages

WMC

RFC

A

B C

browser




WMC

NOC

A

B

C

A

r

B

iSr

iSAr

iSr

iSBr

dSAr dSB

r

iSr = dSAr [ dSB

r

I I

IA IB



transformationDOM

<svg:g> <svg:rect .../> <svg:rect .../> <svg:g> ...</svg:g>

DOM

WMC

RFC

A

B C

browser



transformationDOM


DOM

WMC

RFC

A

B C

browser


WMC

browser


transformationDOM


DOM

WMC

RFC

A

B C

browser


WMC

browser

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package

classessubpackages <svg:g> <svg:circle .../> <svg:circle .../> <svg:circle .../> <svg:g> ...</svg:g>

transformationDOM


DOM

WMC

RFC

A

B C

browser


WMC

browser

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package


transformationDOM

traces


DOM


25


transformationDOM


DOM

iSr ✓ DI

C

iSCr ✓ IC ✓ D

prC(iSCr )

IC = selC(I)

prC(IC)

SCr ✓ DC

dSCr = pr�1(SC

r ) ✓ I

IC ✓ children?(I) ✓ D

prC(IC) ✓ DC

D

dSCr = pr�1(SC

r ) ✓ IC

A

r

B

iSr

iSAr

iSr = dSAr [ dSB

r

I

IA


25

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package


transformationDOM


DOM

iSr ✓ DI

C

iSCr ✓ IC ✓ D

prC(iSCr )

IC = selC(I)

prC(IC)

SCr ✓ DC

dSCr = pr�1(SC

r ) ✓ I


prC(IC) ✓ DC

D

dSCr = pr�1(SC

r ) ✓ IC

A

r

B

iSr

iSAr

iSr = dSAr [ dSB

r

I

IA


25

Class { WMC: 3, RFC: 15, ... }

calls { amount: 2 }

Package


transformationDOM

traces


DOM

iSr ✓ DI

C

iSCr ✓ IC ✓ D

prC(iSCr )

IC = selC(I)

prC(IC)

SCr ✓ DC

dSCr = pr�1(SC

r ) ✓ I


prC(IC) ✓ DC

D

dSCr = pr�1(SC

r ) ✓ IC

A

r

B

iSr

iSAr

iSr = dSAr [ dSB

r

I

IA

Framework: Architecture and Realization

▶ DOM, Styles, Events

▶ JSON

▶ D3.js

▶ Web-Components and Angular2

■ components

■ data-binding and events

26

Framework: Architecture and Realization

27

<d3ng-groups class="chart" (selectedChanged)="selection=$event.selected" [groups]="[0]" [context]="context"> <d3ng-scatter-plot d3ngSource [source]="data" pattern="container" x="x" y="y" [config]="scatterPlotConfig"> </d3ng-scatter-plot></d3ng-groups>

<d3ng-scatter-plot class="chart" d3ngSource [source]="selection" pattern="container/contents" [allowEmpty]="true" x="x" y="y" [config]="scatterPlotConfig"></d3ng-scatter-plot>

data = [{ type:"container", x:1, y:1 children: [{ type:"contents", x:0.85, y:0.85 },...]},...]

Future Work

28

Data & Analytics

Interactive Visualization of Software