Visualize hidden connections, exploit tacit knowledge
Visualize hidden connections,
exploit tacit knowledge
vision
The world’s most valuable resources are no longer oil, but data (Economist – May 6, 2017). Data visualization is becoming a rapidly evolving blend of science and art dramatically changing the corporate landscape over the next few years.
Dromic combines expertize in creation of advanced graphics interfaces grounded on sophisticate mathematical models, Artificial Intelligence and data analytics, providing a bridge between business users and data scientists.
mission
Offer Dromic breakthrough multidimensional visualization toolkit for Big Data analytics and IoT (Internet of Things) application, and provide related design and development services through commercial technological and scientific partnership with key players of these emerging markets.
technological skills
OpenGL, WebGL
GPU shading languages (GLSL, HLSL, Cg) FFMPEG
DICOM (Digital Imaging and Communication in Medicine) format
HTML5
Qt/C++, wsWidgets, CTK+, MS Web Form, Sencha ExtJS, React Babylonjs, Three.js, D3.js, PixiJS
Syntactic analysis, parsing and language design.
vision
The world’s most valuable resources are no longer oil, but data (Economist – May 6, 2017). Data visualization is becoming a rapidly evolving blend of science and art dramatically changing the corporate landscape over the next few years.
Dromic combines expertize in creation of advanced graphics interfaces grounded on sophisticate mathematical models, Artificial Intelligence and data analytics, providing a bridge between business users and data scientists.
mission
Offer Dromic breakthrough multidimensional visualization toolkit for Big Data analytics and IoT (Internet of Things) application, and provide related design and development services through commercial technological and scientific partnership with key players of these emerging markets.
technological skills
OpenGL, WebGL
GPU shading languages (GLSL, HLSL, Cg) FFMPEG
DICOM (Digital Imaging and Communication in Medicine) format
HTML5
Qt/C++, wsWidgets, CTK+, MS Web Form, Sencha ExtJS, React Babylonjs, Three.js, D3.js, PixiJS
Syntactic analysis, parsing and language design.
dromic toolkit
Multidimensional visualization toolkit for Big Data and IoT (Internet of Things).
dromic toolkit
Multidimensional visualization toolkit for Big Data and IoT (Internet of Things).
Graph viewer
 Search Widget for a simple and fast search in the data sources
 Simple system to add nodes to the graph viewer by clicking on search results
 Card mode visualization of node data
 Easy graph navigation system with drag and zoom features
 Creation of automatic links between a new node and those already present on the graph
 Multiple graph drawing algorithms: forcedirected, circle, hierarchical, grid, spread, etc.
 Ability to customize the displayed properties for each type of node (human, city, etc)
Graph viewer
 Search Widget for a simple and fast search in the data sources
 Simple system to add nodes to the graph viewer by clicking on search results
 Card mode visualization of node data
 Easy graph navigation system with drag and zoom features
 Creation of automatic links between a new node and those already present on the graph
 Multiple graph drawing algorithms: forcedirected, circle, hierarchical, grid, spread, etc.
 Ability to customize the displayed properties for each type of node (human, city, etc)
Graph viewer 3D
A graph with many nodes often appears difficult to read because the nodes are overlapped. But what happens if we immerse the node space in a 3D environment? Nodes and connections may appear lighter looking at the graph from a different point of view.
 Data visualization in 3D environment
 The connections of the nodes appear clearer
 Ability to rotate the graph in all directions
 Zoom and show only a portion of the graph
 Ability to move a node with automatic translation of child nodes
Here you can see an example of a graph drawn in a 3D environment. The data source is represented by the departments of a company. The nodes of the graph are represented by human resources, articles and news of the company. Each node refers to a specific department.
By visualizing the graph in 3D and rotating the space, the division into departments that are shown as balloons is immediately clear. From the size of the balls one understands the extent of one department compared to another. By turning the graph further, it is possible to easily identify the connections between the nodes of the same department and those of different departments.
Try to realize it!
Graph viewer 3D
A graph with many nodes often appears difficult to read because the nodes are overlapped. But what happens if we immerse the node space in a 3D environment? Nodes and connections may appear lighter looking at the graph from a different point of view.
 Data visualization in 3D environment
 The connections of the nodes appear clearer
 Ability to rotate the graph in all directions
 Zoom and show only a portion of the graph
 Ability to move a node with automatic translation of child nodes
Here you can see an example of a graph drawn in a 3D environment. The data source is represented by the departments of a company. The nodes of the graph are represented by human resources, articles and news of the company. Each node refers to a specific department.
By visualizing the graph in 3D and rotating the space, the division into departments that are shown as balloons is immediately clear. From the size of the balls one understands the extent of one department compared to another. By turning the graph further, it is possible to easily identify the connections between the nodes of the same department and those of different departments.
Try to realize it!
Hyperbolic tree viewer
Commonly, trees graph are displayed on a Euclidean plane with the root at the top and children below their parents and connected to their parents with edges. This solution is valid for small graphs while large graphs are extremely difficult to lay out in a way that helps people understand them. Hyperbolic trees, which are a dynamic representation of hierarchical structure, are an effective way to display complex trees clearly.
In the hyperbolic layout the root is placed at the center while the children are placed at an outer ring to their parents. The circumference jointly increases with the radius and more space becomes available for the growing numbers of intermediate and leaf nodes.
 Carrying out both layout and drawing in 3D hyperbolic space lets us see a large amount of context around a focus point.
 Our layout is for a good balance between information density and clutter.
 Hyperbolic layout uses a nonlinear (distortion) technique to accommodate focus and context for a large number of nodes.
 Non Overlapping: to ensure that nodes do not overlap each other, hyperbolic layout algorithms assign an open angle for each node. All children of a node are laid out in this open angle.
 Refocusing: transformations are provided to allow fluent node repositioning.
In this example it is represented the tree of life, kingdomanimalia. You can click on a node to move it to the center or to grab and reposition a single node.
Hyperbolic tree viewer
Commonly, trees graph are displayed on a Euclidean plane with the root at the top and children below their parents and connected to their parents with edges. This solution is valid for small graphs while large graphs are extremely difficult to lay out in a way that helps people understand them. Hyperbolic trees, which are a dynamic representation of hierarchical structure, are an effective way to display complex trees clearly.
In the hyperbolic layout the root is placed at the center while the children are placed at an outer ring to their parents. The circumference jointly increases with the radius and more space becomes available for the growing numbers of intermediate and leaf nodes.
 Carrying out both layout and drawing in 3D hyperbolic space lets us see a large amount of context around a focus point.
 Our layout is for a good balance between information density and clutter.
 Hyperbolic layout uses a nonlinear (distortion) technique to accommodate focus and context for a large number of nodes.
 Non Overlapping: to ensure that nodes do not overlap each other, hyperbolic layout algorithms assign an open angle for each node. All children of a node are laid out in this open angle.
 Refocusing: transformations are provided to allow fluent node repositioning.
In this example it is represented the tree of life, kingdomanimalia. You can click on a node to move it to the center or to grab and reposition a single node.
Parallel lines
Parallel coordinates are a common way of visualizing highdimensional geometry and analyzing multivariate data. It is a diagram composed by several entities visualized as points along a vertical lines and links between them visualized as wavy lines.
The user is able to interact with the diagram. Basic operations are:
 Highlight families of wavy lines by hovering the mouse in the top part.
 Change the vertical lines order (e.g. swapping two adjacent vertical lines).
 By select a columns set change the mapping of points along the vertical lines.

Automatic Scatter plot diagrams
 Diagram filters by clicking & dragging along vertical line.

Scatter plot filters by clicking & dragging on a scatter plot.
 Multiple filters supported
The example shown here is based on a data model made of entities and relationships. Each entity is characterized by a number of properties. The relations are just connections or links between entities.
This Example visualized data based on the SDG Index and Dashboards Report that provides a report card for country performance on the historic Agenda 2030 and the Sustainable Development Goals (SDGs).
Each vertical line of the diagram represents a set of same entity, in this way you can compare an arbitrary number of entities type by viewing the connections between the data.
You can see the relations between pair of adjacent vertical lines represented as curved arcs.
Parallel lines
Parallel coordinates are a common way of visualizing highdimensional geometry and analyzing multivariate data. It is a digram composed by several entities visualized as points along a vertical lines and links between them visualized as wavy lines.
The user is able to interact with the diagram. Basic operations are:
 Highlight families of wavy lines by hovering the mouse in the top part.
 By SQL change the vertical lines order (e.g. swapping two adjacent vertical lines).
 By SQL change the mapping of points along the vertical lines.
The example shown here is based on a data model made of entities and relationships. Each entity is characterized by a number of properties. The relations are just connections or links between entities.
This example visualizes a number of investments extracted from the demo dataset. For each investment we consider these entities:
 The invested amount
 The date of the investment
 The total amount of all the investments made by the investor
 The total amount of all the investments received by the company
 The number of company employees
 The number of articles mentioning the company
By simple SQL query it is possible to extract data from the database and show them directly in the form of a diagram. Each vertical line of the diagram represents a set of same entity, in this way you can compare an arbitrary number of entities type by viewing the connections between the data.
You can see the relations between pair of adjacent vertical lines represented as curved arcs.
Sankey Diagram
A 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
Sankey diagram
A 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
Scatterplot matrix
A Scatterplot displays the value of 2 sets of data on 2 dimensions. Each observation (or point) in a scatterplot has two coordinates; the first corresponds to the first piece of data in the pair (that’s the X coordinate; the amount that you go left or right). The second coordinate corresponds to the second piece of data in the pair (that’s the Ycoordinate; the amount that you go up or down). The point representing that observation is placed at the intersection of the two coordinates. Scatterplots are useful for interpreting trends in statistical data.
Our tool compares a set of types of data. For each data pair, it creates a scatter plot and finally a matrix is drawn.
In the example is drawn a scatter plot matrix based on six types of data: investments, investors, investment amount, funding date, number of articles, number of employees.
Thus it showed a 6x6 square matrix with 30 scatter plots, which are the combination of all six types of data.
Scatterplot matrix
A Scatterplot displays the value of 2 sets of data on 2 dimensions. Each observation (or point) in a scatterplot has two coordinates; the first corresponds to the first piece of data in the pair (that’s the X coordinate; the amount that you go left or right). The second coordinate corresponds to the second piece of data in the pair (that’s the Ycoordinate; the amount that you go up or down). The point representing that observation is placed at the intersection of the two coordinates. Scatterplots are useful for interpreting trends in statistical data.
Our tool compares a set of types of data. For each data pair, it creates a scatter plot and finally a matrix is drawn.
In the example is drawn a scatter plot matrix based on six types of data: investments, investors, investment amount, funding date, number of articles, number of employees.
Thus it showed a 6x6 square matrix with 30 scatter plots, which are the combination of all six types of data.
Scatter Regression
Best regression line automatically calculated.
Scatter Regression
Linear regression attempts to model the relationship between two variables by fitting a linear equation to observed data. One variable is considered to be an explanatory variable, and the other is considered to be a dependent variable. For example, a modeler might want to relate the weights of individuals to their heights using a linear regression model.
Regression analysis is an important tool for modelling and analyzing data. Here, we fit a curve / line to the data points, in such a manner that the differences between the distances of data points from the curve or line is minimized.
There are innumerable forms of regressions, which can be performed. Each form has its own importance and a specific condition where they are best suited to apply
Regression tool compute the following regression types:
 Linear Regression
 Logarithmic Regression
 Exponential Regression
 Polynomial Regression
Regression Line tool automatically calculates the best regression type according to data.
Geographic links
When dealing with data that has latitude and longitude between properties it becomes natural to represent them on the earth’s surface. This tool allows to visualize the connections among the nodes of a graph placed on the terrestrial globe. You can rotate the globe and view connections from various points of view.
 Useful for viewing data that has a geographical position
 It highlights the relationships between the nodes and the geographical position
Here you can view Geolinks viewer in action. The example data set consists of two types of items: investors and companies. Each item has a defined by geographical position. The graph show links between companies and related investors, in order to see where investors coming from in the world. You can rotate the space by click&drag or by arrows keys.
Geographic links
When dealing with data that has latitude and longitude between properties it becomes natural to represent them on the earth’s surface. This tool allows to visualize the connections among the nodes of a graph placed on the terrestrial globe. You can rotate the globe and view connections from various points of view.
 Useful for viewing data that has a geographical position
 It highlights the relationships between the nodes and the geographical position
Here you can view Geolinks viewer in action. The example data set consists of two types of items: investors and companies. Each item has a defined by geografical position. The graph show links between companies and related investors, in order to see where investors coming from in the world. You can rotate the space by click&drag or by arrows keys.
Map 2D
View geographic data on map 2D.
Features:
– Filter by single region or multiple regions
– Highlights connected region on mouse over
– Filter by amount
– Save chart as png image
Map 2D with directions
View geographic data on map 2D.
Features:
– Filter by single region or multiple regions
– Highlights connected region on mouse over
– Filter by amount
– Save chart as png image
Heat map 3D
A heat map is a twodimensional representation of data in which values are represented by colors. A simple heat map provides an immediate visual summary of information. More elaborate heat maps allow the viewer to understand complex data sets. There can be many ways to display heat maps, but they all share one thing in common they use color to communicate relationships between data values that would be would be much harder to understand if presented numerically in a spreadsheet. In our tool we have colinked 2 heat map graphs and drawn in a 3d environment.
 Heat maps 3D are a lot more visual than standard analytics reports, which can make them easier to analyze at a glance.
 It is easier to see the connections between 2 heat map charts.
In this example we have put in relation four data entities: investors, companies, years and amount of investment. The color variation indicates the amount of investment.
You can rotate and zoom the graph to display data from multiple points of view.
Heat map 3D
A heat map is a twodimensional representation of data in which values are represented by colors. A simple heat map provides an immediate visual summary of information. More elaborate heat maps allow the viewer to understand complex data sets. There can be many ways to display heat maps, but they all share one thing in common they use color to communicate relationships between data values that would be would be much harder to understand if presented numerically in a spreadsheet. In our tool we have colinked 2 heat map graphs and drawn in a 3d environment.
 Heat maps 3D are a lot more visual than standard analytics reports, which can make them easier to analyze at a glance.
 It is easier to see the connections between 2 heat map charts.
In this example we have put in relation four data entities: investors, companies, years and amount of investment. The color variation indicates the amount of investment.
You can rotate and zoom the graph to display data from multiple points of view.
Scatter 5D
Usually 3D Scatter plots are used to plot data points on three axes in the attempt to show the relationship between three variables. Each row in the data table is represented by a marker whose position depends on its values in the columns set on the X, Y, and Z axes.
In this tool we added other 2 dimensions: color and size.
Thus we have five dimensions·
The relationship between different variables is called correlation. If the markers are close to making a straight line in any direction in the threedimensional space of the 3D scatter plot, the correlation between the corresponding variables is high. If the markers are equally distributed in the 3D scatter plot, the correlation is low, or zero. However, even though a correlation may seem to be present, this might not always be the case. The variables could be related to some fourth variable, thus explaining their variation, or pure coincidence might cause an apparent correlation.
You can change how the 3D scatter plot is viewed by zooming in and out as well as rotating it by using the navigation controls located in the top right part of the visualization.
Features:
 Change data on five dimensions
 Filter by color and size
 Zoom and Rotation
Scatter 5D
Usually 3D Scatter plots are used to plot data points on three axes in the attempt to show the relationship between three variables. Each row in the data table is represented by a marker whose position depends on its values in the columns set on the X, Y, and Z axes.
In this tool we added other 2 dimensions: color and size.
Thus we have five dimensions·
The relationship between different variables is called correlation. If the markers are close to making a straight line in any direction in the threedimensional space of the 3D scatter plot, the correlation between the corresponding variables is high. If the markers are equally distributed in the 3D scatter plot, the correlation is low, or zero. However, even though a correlation may seem to be present, this might not always be the case. The variables could be related to some fourth variable, thus explaining their variation, or pure coincidence might cause an apparent correlation.
You can change how the 3D scatter plot is viewed by zooming in and out as well as rotating it by using the navigation controls located in the top right part of the visualization.
Features:
 Change data on five dimensions
 Filter by color and size
 Zoom and Rotation
Sunburst diagram
This type of visualisation shows hierarchy through a series of rings, that are sliced for each category node. Each ring corresponds to a level in the hierarchy, with the central circle representing the root node and the hierarchy moving outwards from it.
Rings are sliced up and divided based on their hierarchical relationship to the parent slice. The angle of each slice is either divided equally under its parent node or can be made proportional to a value.
Colour can be used to highlight hierarchal groupings or specific categories.
Sunburst diagram
This type of visualisation shows hierarchy through a series of rings, that are sliced for each category node. Each ring corresponds to a level in the hierarchy, with the central circle representing the root node and the hierarchy moving outwards from it.
Rings are sliced up and divided based on their hierarchical relationship to the parent slice. The angle of each slice is either divided equally under its parent node or can be made proportional to a value.
Colour can be used to highlight hierarchal groupings or specific categories.