1

Kantha Cikaiahgari

DOAG 2018

Interactive Data Visualizations of Database applications using JS libraries

D3 and Cytoscape

2

Table of contents

About PITSS GmbH 03

Data Visualization 06

Why interactivity 07

Business usecases 08

Data Models –Graph Layouts 10

Sankey Diagram 11

CoSE Bilkent Layout 14

JavaScript Libraries 16

D3 Features 17

Cytoscape Features 18

Integration of JS libraries 19

Customization of Graphs 20

Benefit Analysis 21

Demo 23

Contact details 24

3

70 employees

15 languages

4 locations in 3 countries

17 years’ migration experience

Solutions provider for software development, analysis, and modernization

Who are PITSS?

40 programming languages

4

applications consulting

projects

PITSS.CON +

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+

3000+

~ 20 years

5

Increase quality. Reduce costs.

Efficiency!

With PITSS.CON, consistently high

quality code is generated—at

significantly lower staff costs!

6

Data Visualization Analyze & communicate information

clearly and effectively

through

graphical means

7

Why Visualizations need to be interactive • More information

• Easier perception of more complex data

• Promotes exploration

• Provides support in decision making

Good UX relies on 3 primary rules:

1. Overview first

2. Zoom and filter

3. Then details-on-demand

Effective Visualization

Tools

Design Data

8

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

9

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 Diagrams

10

Different Data Models - supported Layouts Model description

Supported Graphs or

Layouts

Examples

Network Node/link Diagram(uses link based

layout algorithms)

Dagre, CoSE, cola

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

11

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.

12

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

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

13

Unused modules (=not called, not referenced)

FMBs calling other FMBs

Libraries

MMBs (menus)

Navigation Flow

14

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.

15

CoSE Bilkent Expanding nodes- Example

16

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

17

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

18

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

19

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

20 16

Customize Java Script with graph properties and data definition

Example SQL Query for calling data to the target to generate a RESTFUL service

RESTFUL Service

z.B

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

21

Benefit Analysis from the Apex Perspective •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

22

Quality

People

Solid architecture basis Security (Login) Consistent development practices

Apex Developers and Java Script Developers find its easy

Learning curve not too strenuous

Acceleration of Process

Risk minimization Time

Benefit Analysis

23

DEMO

24

THANK YOU FOR YOUR ATTENTION Do you have any questions?

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

PITSS headquarters

twitter.com/PITSS_GmbH

linkedin.com/company/pitss-gmbh

xing.com/companies/pitssgmbh

Kantha Cikaiahgari kcikaiahgari@pitss.com

Kantha Cikaiahgari

25