Visual analytics uses interactive visualization that allow human users explore the relationships within complex data-sets more intuitively.

1. Interactive Visualization
(of Software)
Markus Scheidgen
1

2. DEMO
2

3. Visual Analytics Framework
3
source

4. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories

5. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic

6. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
datameasurements
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic

7. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
‣ 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
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic

8. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of metrics
‣ 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
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic

9. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of metrics
‣ 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 visualizationprojection
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic

10. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ 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 visualizationprojection
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic

11. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ 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 visualizationprojection
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
combination
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic

12. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ 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 visualizationprojection
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
combination
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic
complex/interactive
visualization
‣ multiple connected charts for
different properties

13. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
common meta-model
‣ data-set, comprising
‣ data-points, comprising
‣ properties
common nomenclature
➜ visual analytics / explorative data analysis / multi-variant data analysis ➜
datameasurements visualizationprojection
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
combination
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic
complex/interactive
visualization
‣ multiple connected charts for
different properties

14. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
common meta-model
‣ data-set, comprising
‣ data-points, comprising
‣ properties
common nomenclature
➜ visual analytics / explorative data analysis / multi-variant data analysis ➜
datameasurements visualizationprojection
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
combination
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic
‣ 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
complex/interactive
visualization
‣ multiple connected charts for
different properties

15. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
common meta-model
‣ data-set, comprising
‣ data-points, comprising
‣ properties
common nomenclature
➜ visual analytics / explorative data analysis / multi-variant data analysis ➜
datameasurements visualizationprojection
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
combination
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic
‣ 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
meta-model
complex/interactive
visualization
‣ multiple connected charts for
different properties

16. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
common meta-model
‣ data-set, comprising
‣ data-points, comprising
‣ properties
common nomenclature
➜ visual analytics / explorative data analysis / multi-variant data analysis ➜
datameasurements visualizationprojection
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
combination
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic
‣ 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
meta-model
DSL
complex/interactive
visualization
‣ multiple connected charts for
different properties

17. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
common meta-model
‣ data-set, comprising
‣ data-points, comprising
‣ properties
common nomenclature
➜ visual analytics / explorative data analysis / multi-variant data analysis ➜
datameasurements visualizationprojection
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
combination
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic
‣ 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
meta-model
DSL
DSL
complex/interactive
visualization
‣ multiple connected charts for
different properties

18. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
common meta-model
‣ data-set, comprising
‣ data-points, comprising
‣ properties
common nomenclature
➜ visual analytics / explorative data analysis / multi-variant data analysis ➜
datameasurements visualizationprojection
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
combination
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic
‣ 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
meta-model
DSL
DSL
library
complex/interactive
visualization
‣ multiple connected charts for
different properties

19. Visual Analytics Framework
3
source
software, artifacts
‣ code,
‣ models,
‣ execution traces,
‣ snapshots, histories
metrics
dependencies
structure
histories of 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), ...
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
common meta-model
‣ data-set, comprising
‣ data-points, comprising
‣ properties
common nomenclature
➜ visual analytics / explorative data analysis / multi-variant data analysis ➜
datameasurements visualizationprojection
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
combination
natural phenomena
‣ dust particles
‣ seismic activity
‣ traffic
‣ 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
meta-model
DSL
DSL
library
framework
complex/interactive
visualization
‣ multiple connected charts for
different properties

20. Agenda
▶ Visual Analytics Framework
▶ Measuring Software
▶ Related Work
▶ Meta-Model
▶ Complex Interactive Visualization-Language
▶ Framework: Architecture and Realization
▶ Conclusions
4

21. 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

22. 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

23. Related Work
7
source data visualization
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
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), ...
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
complex/interactive
visualization
‣ multiple connected charts for
different properties
common meta-model
measurements projection
combination
lots of programming
Visual analytics as a conceptual
framework
1. Visual analysis and design: Tamara Munzner, 2014
lots of programming
lots of programming

24. Related Work
8
source data visualization
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
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), ...
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
complex/interactive
visualization
‣ multiple connected charts for
different properties
common meta-model
measurements projection
combination
library
Caleydo – A visual analysis
framework
1. 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, 2010
2. Samuel Gratzl et al.: Caleydo Web: An Integrated Visual Analysis Platform
for Biomedical Data, 2015
lots of programming
lots of programming
eclipse-based framework

25. Related Work
9
source data visualization
‣ tables
(nominal, ordinal, metric)
‣ relations
‣ hierarchies
‣ time series
‣ (geo-)spatial data
‣ ontologies
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), ...
complex charts
‣ multiple properties of data points in
a single chart (polymetric views)
‣ one per data point, but multiple
dimensions on each symbol
complex/interactive
visualization
‣ multiple connected charts for
different properties
common meta-model
measurements projection
combination
Specific software visualization
solutions

26. 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.

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

28. Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
12

29. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
12

30. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
12
WMC RFC
A 1 2
B 1 1
C 2 1
program

31. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
12
WMC
RFC
A
B C
WMC RFC
A 1 2
B 1 1
C 2 1
program

32. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
12
WMC
RFC
A
B C
WMC RFC
A 1 2
B 1 1
C 2 1
program

33. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
12
WMC
RFC
A
B C
WMC RFC
A 1 2
B 1 1
C 2 1
program

34. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
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

35. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
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>
transformation
DOM

36. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
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>
transformation
DOM
traces

37. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
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
Same events and styles for all DOM elements!
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
traces

38. scatter plot library
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
Programming Libraries for Visualizations
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
Same events and styles for all DOM elements!
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
traces

39. 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
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
Same events and styles for all DOM elements!
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
WMC
NOC
A
B
C
D3.js – a transformation
language for all kinds of
visualizations rather
than a library of some
specific visualizations.

40. 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
■ key-value pairs (properties, measurements)
■ 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 }

41. 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
■ key-value pairs (properties, measurements)
■ 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 }
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages

42. 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
■ key-value pairs (properties, measurements)
■ 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)
15
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
type:String
label:String
DataPoint
name:String
Property
isComposite:Boolean
Reference
value:any
Attribute
properties *
properties *
dataPoints *
<<DataType>>
any
<<Dat
Nu
<<DataType>>
Ordinal
<<DataType>>
Nominal

43. General Data Model
// DataPoints of same type have the same Properties
context DataPoint
inv: 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 properties
context DataPoint
inv: 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 type
context 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:String
label:String
DataPoint
name:String
Property
isComposite:Boolean
Reference
value:any
Attribute
properties *
properties *
dataPoints *
<<DataType>>
any
<<Dat
Nu
<<DataType>>
Ordinal
<<DataType>>
Nominal

44. DEMO
17

45. Complex Interactive Visualization-Language
18
type
pattern
configuration
Chart
color
Group
Data
uri
Sourcegroups *
* charts
input
1
context Chart::allInputGroups
query: if (input.isInstanceOf(Group))
input.charts->collect(allInputGroups)->union({input})
else {}
// Charts cannot take input that is based on their own selection
context Chart
inv: not allInputGroups->collect(charts)->contains(self)
/allInputGroups*
A
r
B

46. Complex Interactive Visualization-Language
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)
iSC
r = {d 2 IC
|9d0
: d 2 parent?
(d0
_ d0
2 parent?
(d)}
dSC
r a user selection with dSC
r ✓ IC
✓ D
iSr =
[
C2charts(r)
dSC
r
D
I ✓ D
IA
IB
A
r
B
iSr
iSA
r
iSr
iSB
r
dSA
r dSB
r
iSr = dSA
r [ dSB
r
I I
IA
IB

47. Complex Interactive Visualization-Language
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)
iSC
r = {d 2 IC
|9d0
: d 2 parent?
(d0
_ d0
2 parent?
(d)}
dSC
r a user selection with dSC
r ✓ IC
✓ D
iSr =
[
C2charts(r)
dSC
r
...
...
...
D
I ✓ D
IA
IB
A
r
B
iSr
iSA
r
iSr
iSB
r
dSA
r dSB
r
iSr = dSA
r [ dSB
r
I I
IA
IB

48. Complex Interactive Visualization-Language
21
A
r
B C
b
r
A
B B
r
A
b
C
A
r
B

49. Complex Interactive Visualization-Language
22
r
A
B
r
A
B b
type
pattern
configuration
Chart
color
Group
Data
uri
Sourcegroups *
* charts
input
1
context Chart::allInputGroups
query: if (input.isInstanceOf(Group))
input.charts->collect(allInputGroups)->union({input})
else {}
// Charts cannot take input that is based on their own selection
context Chart
inv: not allInputGroups->collect(charts)->contains(self)
/allInputGroups*

50. Complex Interactive Visualization-Language
23
DOM
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
WMC
RFC
A
B C
browser
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
Same events and styles for all DOM elements!
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
WMC
NOC
A
B
C
A
r
B
iSr
iSA
r
iSr
iSB
r
dSA
r dSB
r
iSr = dSA
r [ dSB
r
I I
IA
IB

51. Complex Interactive Visualization-Language
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
<svg:g>
<svg:rect .../>
<svg:rect .../>
<svg:g>
...
</svg:g>
DOM

52. WMC
RFC
A
B C
browser
Complex Interactive Visualization-Language
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
<svg:g>
<svg:rect .../>
<svg:rect .../>
<svg:g>
...
</svg:g>
DOM

53. WMC
RFC
A
B C
browser
Complex Interactive Visualization-Language
WMC
browser
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
<svg:g>
<svg:rect .../>
<svg:rect .../>
<svg:g>
...
</svg:g>
DOM

54. WMC
RFC
A
B C
browser
Complex Interactive Visualization-Language
WMC
browser
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
<svg:g>
<svg:rect .../>
<svg:rect .../>
<svg:g>
...
</svg:g>
DOM

55. WMC
RFC
A
B C
browser
Complex Interactive Visualization-Language
WMC
browser
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
traces
<svg:g>
<svg:rect .../>
<svg:rect .../>
<svg:g>
...
</svg:g>
DOM

56. Complex Interactive Visualization-Language
25
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
<svg:g>
<svg:rect .../>
<svg:rect .../>
<svg:g>
...
</svg:g>
DOM
iSr ✓ DI
C
iSC
r ✓ IC
✓ D
prC(iSC
r )
IC
= selC(I)
prC(IC
)
SC
r ✓ DC
dSC
r = pr 1
(SC
r ) ✓ I
IC
✓ children?
(I) ✓ D
prC(IC
) ✓ DC
D
dSC
r = pr 1
(SC
r ) ✓ IC
A
r
iSr
iSA
r
iSr = dSA
r [
I
IA

57. Complex Interactive Visualization-Language
25
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
<svg:g>
<svg:rect .../>
<svg:rect .../>
<svg:g>
...
</svg:g>
DOM
iSr ✓ DI
C
iSC
r ✓ IC
✓ D
prC(iSC
r )
IC
= selC(I)
prC(IC
)
SC
r ✓ DC
dSC
r = pr 1
(SC
r ) ✓ I
IC
✓ children?
(I) ✓ D
prC(IC
) ✓ DC
D
dSC
r = pr 1
(SC
r ) ✓ IC
A
r
iSr
iSA
r
iSr = dSA
r [
I
IA

58. Complex Interactive Visualization-Language
25
Class { WMC: 3, RFC: 15, ... }
calls { amount: 2 }
Package
classessubpackages
<svg:g>
<svg:circle .../>
<svg:circle .../>
<svg:circle .../>
<svg:g>
...
</svg:g>
transformation
DOM
traces
<svg:g>
<svg:rect .../>
<svg:rect .../>
<svg:g>
...
</svg:g>
DOM
iSr ✓ DI
C
iSC
r ✓ IC
✓ D
prC(iSC
r )
IC
= selC(I)
prC(IC
)
SC
r ✓ DC
dSC
r = pr 1
(SC
r ) ✓ I
IC
✓ children?
(I) ✓ D
prC(IC
) ✓ DC
D
dSC
r = pr 1
(SC
r ) ✓ IC
A
r
iSr
iSA
r
iSr = dSA
r [
I
IA

59. Framework: Architecture and Realization
▶ DOM, Styles, Events
▶ JSON
▶ D3.js
▶ Web-Components and Angular2
■ components
■ data-binding and events
26

60. 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
},...]
},...]

61. Future Work
28