Visualizing a Microsoft Azure Cosmos DB
Gain insights about your CosmosDB relationships through diagram visualizations
Microsoft Azure Cosmos DB (also called CosmosDB) is a distributed cloud database that stores data in various data models like key-value, column-family, document, or graph model. The graph data model is particularly suited for relationship-focused data since it uses a collection of nodes and edges with associated properties to store data.
In contrast to table-based, or relational databases, graph databases can handle vast amounts of connected data more efficiently because only locally connected parts of the database need to be considered when running queries on the database. This approach makes them particularly useful in big data analysis.
The graph data model’s focus on connectivity makes it particularly suitable for a network-like visualization, enabling non-technical users to explore and interact with the stored data easily.
CosmosDB can be queried for data using Gremlin, an efficient graph traversal language. The user can query the database for the stored entities and use the relationships to traverse the connected neighborhood. This approach requires in-depth technical knowledge of the database itself and also the query language Gremlin to explore the stored data.
A visualization enables users to visually explore the data, identify significant structures, and get a better understanding of relationships. Besides the visual exploration, it is also possible to interactively edit the stored data by modifying the diagram without any knowledge of the associated query language like Gremlin.
Therefore, being able to provide a high-quality visualization of the CosmosDB could be a powerful solution when handling or analyzing vast amounts of data.
Although the nature of the connected graph data is predestined for visualization, it is still a challenging task because of the sheer amount of data that it usually contains.
The first step in presenting the data is to query it from the database. After that, the query result must be arranged meaningfully to create a human-readable representation of the raw data. Additionally, a styling that differentiates the different types of entities and relations and presents the properties associated with the items helps to interpret the data at a glance. Furthermore, the performance should allow for an interactive exploration of the data.
CosmosDB comes with a built-in Data Explorer in the Azure portal that also provides a ‘Graph’ pane, which displays the queried data in a network-like fashion. This explorer lets you zoom in and out of the diagram, move items in the chart and also add new entities while further panels display detailed information for the entities.
While this can be sufficient for many data sets, there exist many more complex use cases that either require specific interactions (e.g., drill-down, merging, filtering) or in which specific arrangements have to be applied to identify certain substructures in the data.
A comprehensive visualization solution provides a means to create a client that enables users to gain more insight into the stored data. It can be tailored to specific requirements related to element visualization, element arrangement, or interactions.
yFiles for HTML is a commercial programming library explicitly designed for diagram visualization and is a perfect fit for the challenges of graph database visualization. Its sophisticated layout algorithms can easily transform the data in a readable, pleasing, and informative network. The different layout styles, for example, hierarchic, organic, tree, circular, or radial, enable the user to intuitively identify structural characteristics of the data, such as hierarchy, connected components, or rings.
Furthermore, yFiles for HTML comes with a multiplicity of graph analysis algorithms (e.g., centrality, clustering, path algorithms, etc.) that can be applied to the data model to add more value to the data.
CosmosDB supports a variety of different APIs to access the data, among which Gremlin is often used to query the database. The result consists of JSON data objects with multiple properties that represent the stored entities.
yFiles for HTML comes with a Graph Builder, which transforms the raw data from the result of a Gremlin query into a graph structure. After building the graph structure, the full power of the yFiles for HTML diagramming library is at your disposal.
A good visualization provides insights into the data that are not obvious by looking at the raw data. yFiles for HTML offers several ways to use the data from the CosmosDB database to create a rich and meaningful representation. The user can take advantage of the powerful data binding capabilities to create item templates that utilize the labels and properties of the CosmosDB data.
Automatic layouts can give you different perspectives on your data structure. In particular, they make it easy to identify substructures in your data like connected components, chains, circles, stars, and hierarchies. yFiles provides an extensive set of sophisticated, highly configurable automatic layout algorithms that arrange your data in a clear, concise, and readable manner in the blink of an eye.
An interactive application can provide much more functionality than a simple static representation. With yFiles, a graph visualization can be augmented with a considerable set of interactive features:
Grouping lets you combine similar or related items to reduce visual complexity
Drill down helps to explore specific parts of the data
Filtering can be used to reduce the number of displayed entities without any additional database queries
Data exploration and interactive modification is possible by mouse, keyboard and touch gestures
Animations can help to provide a pleasant user experience
With yFiles, database visualization can be realized on all supported platforms. yFiles for HTML comes with a Neo4j Sample Application and a GraphQL Sample Application that show how to load data from a Neo4j database and a GraphQL service, respectively.
The source code of these sample applications is part of the yFiles for HTML package and available on the yWorks Github repository: