MS
Uploaded byMarkus Scheidgen
PDF, PPTX456 views

Interactive Visualization of Software

The document discusses an interactive visualization framework focused on visual analytics, detailing elements such as software artifacts, natural phenomena, and measurement metrics. It highlights the structure and dependencies in software, and introduces complex charts for multi-variant data analysis, emphasizing the importance of a common meta-model for effective data visualization. Additionally, it outlines the relationship between visualization techniques and the analysis of software components using various forms of charts and metrics.

Embed presentation

Download as PDF, PPTX
Interactive Visualization (of Software) Markus Scheidgen 1
DEMO 2
Visual Analytics Framework 3 source
Visual Analytics Framework 3 source software, artifacts ‣ code, ‣ models, ‣ execution traces, ‣ snapshots, histories
Visual Analytics Framework 3 source software, artifacts ‣ code, ‣ models, ‣ execution traces, ‣ snapshots, histories natural phenomena ‣ dust particles ‣ seismic activity ‣ traffic
Visual Analytics Framework 3 source software, artifacts ‣ code, ‣ models, ‣ execution traces, ‣ snapshots, histories datameasurements natural phenomena ‣ dust particles ‣ seismic activity ‣ traffic
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
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
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
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
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
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
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
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
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
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
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
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
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
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 combination lots of programming Visual analytics as a conceptual framework 1. 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 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
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
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> transformation DOM
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
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
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
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:String label:String DataPoint name:String Property isComposite:Boolean Reference value:any Attribute properties * properties * dataPoints * <<DataType>> any <<Dat Nu <<DataType>> Ordinal <<DataType>> Nominal
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
DEMO 17
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
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
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
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 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*
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
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
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
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
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
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
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
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
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
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

More Related Content

PPT
IGCSE Geography - Fieldwork Data Presentation
byRichard Allaway
 
PPTX
Lesson13
byGeorgeLasluisa
 
PDF
Information Visualization Workshop, ASIS&T 2015
byJoseph Ryan
 
PPTX
DV-Unit-4.pptxfgfgsfgsfgsdfgsdfsdfgfdgfgf
byrememberme8857
 
PDF
Gephi icwsm-tutorial
bycsedays
 
PDF
UNit4d.pdf
bySugumarSarDurai
 
PDF
Data Visualization Tools & Resources
byUNCResearchHub
 
PPT
Geo Open Data
byEuropean Commission, Joint Research Centre
 
IGCSE Geography - Fieldwork Data Presentation
byRichard Allaway
 
Lesson13
byGeorgeLasluisa
 
Information Visualization Workshop, ASIS&T 2015
byJoseph Ryan
 
DV-Unit-4.pptxfgfgsfgsfgsdfgsdfsdfgfdgfgf
byrememberme8857
 
Gephi icwsm-tutorial
bycsedays
 
UNit4d.pdf
bySugumarSarDurai
 
Data Visualization Tools & Resources
byUNCResearchHub
 
Geo Open Data
byEuropean Commission, Joint Research Centre
 

Similar to Interactive Visualization of Software

PDF
SP1: Exploratory Network Analysis with Gephi
byJohn Breslin
 
PPTX
Observability - The good, the bad and the ugly Xp Days 2019 Kiev Ukraine
byAleksandr Tavgen
 
PPT
Integrating GIS utility data in the UK
byAntArch
 
PPT
Data 2.0 - Harnessing New Data Visualization Tools CIL 2008
byDarlene Fichter
 
PPTX
Building Effective Visualization Shiny WVF
byOlga Scrivner
 
PPT
Glasgow University Geo Metadata Workshop
byEDINA, University of Edinburgh
 
PDF
Data visualisationsummit 2013
byThe Pathway Group
 
PDF
Network Mapping & Data Storytelling for Beginners
byRenaud Clément
 
PPTX
[Srijan Wednesday Webinar] Leveraging the OGD Platform and Visualization Engine
bySrijan Technologies
 
PPTX
Data visualization representation of Analytics data
byPrasad Narasimhan
 
PPTX
DV-UNIT-3.pptxfgfgfgfgfgsfgsfgsfdgsfgsdgffg
byrememberme8857
 
PDF
Transcript - Tracking Research Data Footprints via Integration with Research ...
byARDC
 
PPTX
OU Rise library analytics viz
byTony Hirst
 
PPT
NTEN Webinar - Data Cleaning and Visualization Tools for Nonprofits
byAzavea
 
PPT
Demystifying Digital Scholarship Workshop 6 Slides
byPaige Morgan
 
PDF
Big Data visualization
byShilpa Soi
 
PDF
Keynote: Mark Parsons - Plans are Useless, But Planning is Essential
byCASRAI
 
PDF
"Plans are worthless, but planning is essential"
byResearch Data Alliance
 
PPTX
DATAAAAAAAAA VISUALIZATION _UNIT- 2.pptx
byHariNaidus
 
PDF
IRSS 2013 ARCOMEM - Network Visualization
byDeutsche Welle Innovation
 
SP1: Exploratory Network Analysis with Gephi
byJohn Breslin
 
Observability - The good, the bad and the ugly Xp Days 2019 Kiev Ukraine
byAleksandr Tavgen
 
Integrating GIS utility data in the UK
byAntArch
 
Data 2.0 - Harnessing New Data Visualization Tools CIL 2008
byDarlene Fichter
 
Building Effective Visualization Shiny WVF
byOlga Scrivner
 
Glasgow University Geo Metadata Workshop
byEDINA, University of Edinburgh
 
Data visualisationsummit 2013
byThe Pathway Group
 
Network Mapping & Data Storytelling for Beginners
byRenaud Clément
 
[Srijan Wednesday Webinar] Leveraging the OGD Platform and Visualization Engine
bySrijan Technologies
 
Data visualization representation of Analytics data
byPrasad Narasimhan
 
DV-UNIT-3.pptxfgfgfgfgfgsfgsfgsfdgsfgsdgffg
byrememberme8857
 
Transcript - Tracking Research Data Footprints via Integration with Research ...
byARDC
 
OU Rise library analytics viz
byTony Hirst
 
NTEN Webinar - Data Cleaning and Visualization Tools for Nonprofits
byAzavea
 
Demystifying Digital Scholarship Workshop 6 Slides
byPaige Morgan
 
Big Data visualization
byShilpa Soi
 
Keynote: Mark Parsons - Plans are Useless, But Planning is Essential
byCASRAI
 
"Plans are worthless, but planning is essential"
byResearch Data Alliance
 
DATAAAAAAAAA VISUALIZATION _UNIT- 2.pptx
byHariNaidus
 
IRSS 2013 ARCOMEM - Network Visualization
byDeutsche Welle Innovation
 

More from Markus Scheidgen

PDF
Creating and Analyzing Source Code Repository Models - A Model-based Approach...
byMarkus Scheidgen
 
PDF
Model Comparison for Delta-Compression
byMarkus Scheidgen
 
PDF
Metamodeling vs Metaprogramming, A Case Study on Developing Client Libraries ...
byMarkus Scheidgen
 
PDF
Generation of Random EMF Models for Benchmarks
byMarkus Scheidgen
 
PDF
Model-based Analysis of Large Scale Software Repositories
byMarkus Scheidgen
 
PDF
Reference Representation in Large Metamodel-based Datasets
byMarkus Scheidgen
 
PDF
Research Training Group METRIK
byMarkus Scheidgen
 
PDF
HWL - A High Performance Wireless Sensor Research Network
byMarkus Scheidgen
 
Creating and Analyzing Source Code Repository Models - A Model-based Approach...
byMarkus Scheidgen
 
Model Comparison for Delta-Compression
byMarkus Scheidgen
 
Metamodeling vs Metaprogramming, A Case Study on Developing Client Libraries ...
byMarkus Scheidgen
 
Generation of Random EMF Models for Benchmarks
byMarkus Scheidgen
 
Model-based Analysis of Large Scale Software Repositories
byMarkus Scheidgen
 
Reference Representation in Large Metamodel-based Datasets
byMarkus Scheidgen
 
Research Training Group METRIK
byMarkus Scheidgen
 
HWL - A High Performance Wireless Sensor Research Network
byMarkus Scheidgen
 

Recently uploaded

PDF
Machine_Psychology_2050_Strategic_Scenarios.pdf
byKambs Consulting
 
PDF
LECTURE - Overcoming the AI Failure Rate - AIG, DQM.pdf
bySami Laine
 
PDF
US Digital Fan Engagement Index 2026: Benchmarking Online Demand for Sports T...
byHyperset Group Ltd
 
PPTX
inbound4709748695955476507 Deformable bodies.pptx
byaltheabautistam
 
PPTX
Lecture 14- Introduction to Hypothesis Testing.pptx
bygbadamosiayomide
 
PDF
PathRAG rag pipeline PathRAG rag pipeline .pdf
byhotslix023
 
PPTX
250106204341-c238c4fadonebeforelastyear.pptx
byAbduRouf3
 
PDF
SF User Group - Account-Contact Relationship Feb 2026
byLukas Lunow
 
PPTX
Reading and Writing Skills - Critical Reading ppt.pptx
byMargieJavier2
 
PPT
data collection tool ppt.ppttttdataadfttg
byMuhammadodil
 
PDF
Understanding Data Analytics: Concepts, Types, and Use Cases
byThe IoT Academy
 
PDF
Analysis of Union Budget 2026-27: Major Announcements and their Impact
byDeeshiPavecha
 
PDF
Trustworthy AI : Governance of AI through Ethics
byKarim Baïna
 
PPTX
Query Parsing: The SEO Gatekeeper That Decides Rankings
bySemantic SEO BD
 
PPTX
Organizational Structure and Design Topic 4
bydavenieralayaay
 
PDF
Data Science vs Machine Learning vs AI | Industry Skills Explained
bymuhsinam9074
 
PDF
Step by Step Guide to Buying a Old or Aged Verified Paxful Accounts in US.pdf
byTopSelleriTDotCom
 
PDF
Khan Traders Fish Meal – MSDS Material Safety Data Sheet
byKhan Traders Karachi
 
PPTX
Social Media Audit of Starbucks Coffee Company.pptx
bydiviap21
 
PPTX
I need all your support to get the data for the sections like photo gallery o...
byhsharsha1
 
Machine_Psychology_2050_Strategic_Scenarios.pdf
byKambs Consulting
 
LECTURE - Overcoming the AI Failure Rate - AIG, DQM.pdf
bySami Laine
 
US Digital Fan Engagement Index 2026: Benchmarking Online Demand for Sports T...
byHyperset Group Ltd
 
inbound4709748695955476507 Deformable bodies.pptx
byaltheabautistam
 
Lecture 14- Introduction to Hypothesis Testing.pptx
bygbadamosiayomide
 
PathRAG rag pipeline PathRAG rag pipeline .pdf
byhotslix023
 
250106204341-c238c4fadonebeforelastyear.pptx
byAbduRouf3
 
SF User Group - Account-Contact Relationship Feb 2026
byLukas Lunow
 
Reading and Writing Skills - Critical Reading ppt.pptx
byMargieJavier2
 
data collection tool ppt.ppttttdataadfttg
byMuhammadodil
 
Understanding Data Analytics: Concepts, Types, and Use Cases
byThe IoT Academy
 
Analysis of Union Budget 2026-27: Major Announcements and their Impact
byDeeshiPavecha
 
Trustworthy AI : Governance of AI through Ethics
byKarim Baïna
 
Query Parsing: The SEO Gatekeeper That Decides Rankings
bySemantic SEO BD
 
Organizational Structure and Design Topic 4
bydavenieralayaay
 
Data Science vs Machine Learning vs AI | Industry Skills Explained
bymuhsinam9074
 
Step by Step Guide to Buying a Old or Aged Verified Paxful Accounts in US.pdf
byTopSelleriTDotCom
 
Khan Traders Fish Meal – MSDS Material Safety Data Sheet
byKhan Traders Karachi
 
Social Media Audit of Starbucks Coffee Company.pptx
bydiviap21
 
I need all your support to get the data for the sections like photo gallery o...
byhsharsha1
 

Interactive Visualization of Software

  • 1.
  • 2.
  • 3.
  • 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 AnalyticsFramework ▶ Measuring Software ▶ Related Work ▶ Meta-Model ▶ Complex Interactive Visualization-Language ▶ Framework: Architecture and Realization ▶ Conclusions 4
  • 21.
    Measuring Software ▶ Artifactsprimarily 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 ▶ EclipseJava 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 datavisualization ‣ 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 datavisualization ‣ 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 datavisualization ‣ 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 ViewsSoftware 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.
  • 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 Dis 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 Dis 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.
  • 49.
    Complex Interactive Visualization-Language 22 r A B r A Bb 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 InteractiveVisualization-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 InteractiveVisualization-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 InteractiveVisualization-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 InteractiveVisualization-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 andRealization ▶ DOM, Styles, Events ▶ JSON ▶ D3.js ▶ Web-Components and Angular2 ■ components ■ data-binding and events 26
  • 60.
    Framework: Architecture andRealization 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.