Interactive Data Visualizations of Database applications using JS libraries D3 and Cytoscape

Kantha Cikaiahgari

DOAG 2018

1 of contents

About PITSS GmbH 03 JavaScript Libraries 16 Data 06 D3 Features 17 Why interactivity 07 Cytoscape Features 18 Business usecases 08 Integration of JS libraries 19 Data Models –Graph Layouts 10 Customization of Graphs 20 Sankey 11 Benefit Analysis 21 CoSE Bilkent Layout 14 Demo 23 Contact details 24

2 Who are PITSS? 4 locations in 3 countries Solutions provider for software development, 70 employees analysis, and modernization 15 languages

40 programming languages

17 years’ migration experience

3 Concentrated experience PITSS.CON features a huge wealth of experience and has already learned more than a top consultant knows with 40 years‘ practical experience.

1000+ ~ 20 years applications consulting

+ + PITSS.CON

3000+ projects

4 Efficiency! Increase quality. Reduce costs.

With PITSS.CON, consistently high quality code is generated—at significantly lower staff costs!

5

Analyze & communicate information clearly and effectively through graphical means

6 Why Visualizations need to be interactive

• More information

• Easier perception of more complex data

• Promotes exploration

• Provides support in decision making

Data Good UX relies on 3 primary rules: Design

1. Overview first Tools 2. Zoom and filter

3. Then details-on-demand Effective Visualization

7 Business Usecases for Data Visualization

The probable primary usecases for the data visualization include

1. Navigation Flow

a. Code Flow b. Data Lineage, how data could run through a system of different ETL (extract - transform - load) components.

2. Process flow

8 Business Usecases for Data Visualization

• To visualize - Dependency of more than 1000+ different packages and how they interact with eachother Eg: Dagre Layout - Process flows like how a user runs through different forms in an application Eg: CoSE (Compund Spring Embedder) Layouts - How data flows through different ETL(Extract Transform and Load) Components of the Database. Eg: Sankey

9

Different Data Models - supported Layouts Model description Supported Graphs or Examples Layouts Network Node/link Diagram(uses link based Dagre, CoSE, cola layout algorithms) Tree / Hierarchal General tree Visualization Dendogram, treemap

Temporal Visualizing Data lineage Alluvial, Sankey

Arbitrary Graphs Node-Link Graphs, Matrix force directed graphs

Processes Process diagrams CoSE(compound Spring Embedder) layout 10 Sankey Diagram

Sankey Diagram depicts flows of any kind, where the width of each flow pictured is based on its quantity. • Sankey diagrams are very good at showing particular kinds of complex information - • Where money came from & went to (budgets, contributions) • Flows of energy from source to destination • Flows of goods from place to place • ...and potentially many more.

11 Sankey Diagram -2

The width of the arrows is proportional to the flow quantity The arrows show flows from one node to another node - ideal for production systems or for value chains, as this can not achieved using pie or bar . Sankey diagrams are more suitable for • visualizing energy or material flows when • compared to conventional bar or pie charts • and even flow charts. • Effective communication of messages

12 Navigation Flow

FMBs calling other FMBs

MMBs (menus)

Libraries

Unused modules (=not called, not referenced)

13 CoSE Bilkent Layout

• CoSE is an algorithm based on force-directed layout scheme with extensions to handle

. Multi-level nesting

. Edges between nodes of arbitrary nesting level

. Varying node sizes

. Other possible application-specific constraints.

14 CoSE Bilkent Expanding nodes- Example

15 JavaScript Libraries: D3 and Cytoscape • D3 stands for Data Driven Documents. D3.js is a JavaScript library for manipulating documents based on data.

• Cytoscape is an open source software platform for visualizing complex networks and integrating these with any type of attribute data

16 D3 Features

• Data Driven • DOM Manipulation • Data Driven Elements: It authorize data to dynamically generate elements and apply styles to the elements, be it a table, a graph or any other HTML element and/or group of elements. • Dynamic Properties • Types of visualization • Custom Visualizations • Transitions • Interaction and animation

17

Cytoscape Features

• Multi-graph layouts support • Interactive graph manipulation and analysis possible (CRUD) • graph theory algorithms are included, such as connectivity search, shortest path, minimum span tree, minimum cut, ranking and centrality measures. • Import graph and data via Jason & Export (PNG , PDF or JPG) Incl. High Resolution for Publications • animations usability and automatic layout design

18

How Javascript libraries integrated into APEX?

Java script file: - Get the Java Script Library from the Javascript library (D3, Cytoscape) Home Page - Customize Java script with graph properties and data definition - Standard integration of scripts into Apex like all other javascript files

19 Customize Java Script with graph properties and data definition

•Data is predefined in the SQL database •Nodes, Edges & Relations are provided by APEX RESTFUL SERVICES. •Data retrieved using a JSON URL call can be intercepted. •The URL contains RESTFUL SERVICES address, which allows CRUD operations in the database.

Example SQL Query for calling data to RESTFUL Service the target to generate a z.B RESTFUL service

20 16 Benefit Analysis from the Apex

•Free Java Script Library •One application instead of 2 applications (Apex, JS)

•Easy integration for new developers

•Avoid rework

•Same Look and Feel for the application

.Use of Integrated CSS (Theme Roller from Apex)Page Templates, Skins

.Declarative Components, Utility Classes

.Optimal database calls and operations for dynamic design and presentation of data on the surface using Apex 21 21 Benefit Analysis

Acceleration of Process Time Risk minimization

Solid architecture basis Quality Security (Login) Consistent development practices

Apex Developers and Java Script Developers find its easy People Learning curve not too strenuous

22 DEMO

23 THANK YOU FOR YOUR ATTENTION Do you have any questions?

Kantha Cikaiahgari Kantha Cikaiahgari [email protected]

PITSS headquarters Industriestraße 3 70565 Stuttgart Tel.: 0711 / 9140 12 – 28

twitter.com/PITSS_GmbH

linkedin.com/company/pitss-gmbh

xing.com/companies/pitssgmbh

24 25