Interactive Data Visualizations of Database applications ...
Transcript of Interactive Data Visualizations of Database applications ...
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 [email protected]
Kantha Cikaiahgari
25