Download - Interactive Visualization of Software
Interactive Visualization (of Software)
Markus Scheidgen
1
DEMO
2
Visual Analytics Framework
3
source
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
natural phenomena‣ dust particles‣ seismic activity‣ traffic
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
datameasurements
natural phenomena‣ dust particles‣ seismic activity‣ traffic
Visual Analytics Framework
3
sourcesoftware, 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
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
com
bina
tionnatural phenomena
‣ dust particles‣ seismic activity‣ traffic
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
com
bina
tionnatural phenomena
‣ dust particles‣ seismic activity‣ traffic
complex/interactive visualization
‣multiple connected charts for different properties
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
com
bina
tionnatural phenomena
‣ dust particles‣ seismic activity‣ traffic
complex/interactive visualization
‣multiple connected charts for different properties
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
com
bina
tionnatural 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
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
com
bina
tionnatural 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
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
com
bina
tionnatural 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-modelDSL
complex/interactive visualization
‣multiple connected charts for different properties
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
com
bina
tionnatural 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-modelDSL
DSL
complex/interactive visualization
‣multiple connected charts for different properties
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
com
bina
tionnatural 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-modelDSL
DSL
library
complex/interactive visualization
‣multiple connected charts for different properties
Visual Analytics Framework
3
sourcesoftware, artifacts‣ code,‣models,‣ execution traces,‣ snapshots, histories
metrics
dependenciesstructure
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
com
bina
tionnatural 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-modelDSL
DSL
library
framework
complex/interactive visualization
‣multiple connected charts for different properties
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
‣ 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
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
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
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
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
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
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
Programming Libraries for Visualizations
12
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
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
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
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
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
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>
transformationDOM
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>
transformationDOM
traces
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>
transformationDOM
traces
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>
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
<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.
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 }
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
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: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
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)
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
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)
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
Complex Interactive Visualization-Language
21
A
r
B C
b
r
A
B B
r
A
b
C
A
r
B
Complex Interactive Visualization-Language
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*
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
iSAr
iSr
iSBr
dSAr dSB
r
iSr = dSAr [ dSB
r
I I
IA IB
Complex Interactive Visualization-Language
<svg:g> <svg:circle .../> <svg:circle .../> <svg:circle .../> <svg:g> ...</svg:g>
transformationDOM
<svg:g> <svg:rect .../> <svg:rect .../> <svg:g> ...</svg:g>
DOM
WMC
RFC
A
B C
browser
Complex Interactive Visualization-Language
<svg:g> <svg:circle .../> <svg:circle .../> <svg:circle .../> <svg:g> ...</svg:g>
transformationDOM
<svg:g> <svg:rect .../> <svg:rect .../> <svg:g> ...</svg:g>
DOM
WMC
RFC
A
B C
browser
Complex Interactive Visualization-Language
WMC
browser
<svg:g> <svg:circle .../> <svg:circle .../> <svg:circle .../> <svg:g> ...</svg:g>
transformationDOM
<svg:g> <svg:rect .../> <svg:rect .../> <svg:g> ...</svg:g>
DOM
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>
transformationDOM
<svg:g> <svg:rect .../> <svg:rect .../> <svg:g> ...</svg:g>
DOM
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>
transformationDOM
traces
<svg:g> <svg:rect .../> <svg:rect .../> <svg:g> ...</svg:g>
DOM
Complex Interactive Visualization-Language
25
<svg:g> <svg:circle .../> <svg:circle .../> <svg:circle .../> <svg:g> ...</svg:g>
transformationDOM
<svg:g> <svg:rect .../> <svg:rect .../> <svg:g> ...</svg:g>
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
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>
transformationDOM
<svg:g> <svg:rect .../> <svg:rect .../> <svg:g> ...</svg:g>
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
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>
transformationDOM
traces
<svg:g> <svg:rect .../> <svg:rect .../> <svg:g> ...</svg:g>
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
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