Visualizing a Microsoft Azure Cosmos DB Graph Database
Discover your Cosmos DB data relationships with clear and interactive diagrams

Visualizing graph databases like Microsoft Azure Cosmos DB (often referred to as Cosmos DB) opens up powerful ways to understand and analyze complex data structures. With yFiles for HTML, you can turn your Cosmos DB data into interactive and meaningful diagrams. By visualizing Cosmos DB data, businesses can optimize data relationships, reduce inefficiencies in analysis, and boost productivity — making it an essential tool for data mapping and process automation. These visualizations reveal relationships and patterns that often remain hidden in raw data. Whether you're exploring datasets, developing applications, or building dashboards, yFiles gives you the tools to fully unlock the potential of your Cosmos DB data.

yFiles for Cosmos DB

Powerful Graph Visualizations for CosmosDB with yFiles

yFiles gives you the tools to create clear and scalable graph visualizations for your CosmosDB database. With advanced automatic layouts, you can focus on analyzing and optimizing your graph data instead of arranging nodes manually.

Leverage interactive features, animations, and flexible styling to build dynamic graph applications. yFiles seamlessly integrates with web technologies, making it easy to bring CosmosDB data to life in any application.

Start visualizing your CosmosDB graphs with yFiles today!

Prototype your own graph application
Developing CosmosDB apps with yFiles.

Get in touch to discuss your specific challenges with our diagramming experts. We're here to provide the guidance you need.

Developing CosmosDB apps with yFiles.

We´d love to help you. Reach out and we'll get in touch with you.

We are sorry, something went wrong. Please try again.
If the problem persists, please report the error to webmaster@yworks.com.
Thank you!

Your message has been sent.

What is Microsoft Azure Cosmos DB?

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.

Why use a graphical representation of CosmosDB data?

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.

Exploring the data

Challenges of graph database visualizations

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.

Creating a graph visualization from CosmosDB 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.

Also the viewer in the Azure portal is targeting software developers and database administrators. If you want to create highly interactive applications that help your possibly non-technical end-users work with the data stored in the data base, creating a custom solution is the better option.

Utilizing a sophisticated visualization solution

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.

The rich interaction possibilities and animation support make it possible to create engaging applications.

textual versus visual

Connecting yFiles for HTML to CosmosDB

CosmosDB supports a variety of different APIs to access the data, among which SQL is often used to query the database. The easiest way is to convert the result in JSON format data objects with multiple properties that represent the stored entities.

A simple REST API endpoint can be implemented using whatever server technology you prefer to perform the graph queries. Sending the response to the client is all that is required for visualization:

yFiles for HTML comes with a Graph Builder, which transforms the raw data from the JSON result into a graph structure. After building the graph structure, the full power of the yFiles for HTML diagramming library is at your disposal.

Data-driven visualization

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 arrangement

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 for HTML 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.

Visual representations of different database types

Powerful exploration

An interactive application can provide much more functionality than a simple static representation. With yFiles for HTML, 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

About yFiles: The graph visualization SDK

yFiles playground graph drawing example

yFiles is your go-to SDK for crafting advanced graph visualizations, whether you're working with Web, Java, or .NET technologies. Its unmatched flexibility and scalability enable you to convert complex data into clear, actionable visuals, fitting for both enterprise and startup needs.

With yFiles, you're equipped for the future—supporting any data source while maintaining strong data security. Getting started is seamless, thanks to over 300 source-code demos, thorough documentation, and direct access to core developer support. These resources are available even during your free trial.

Backed by 25 years of graph drawing expertise, yFiles is trusted by top companies worldwide for their most critical visualization tasks.

Examples and source code

With yFiles, database visualization can be realized on all supported platforms. For yFiles for HTML there is a Cosmos DB Process Mining Example and a GraphQL example source code that show how to load data from a graph database via REST APIs and via a GraphQL service, respectively.

Start building your first
CosmosDB app with yFiles today!

Download yFiles now!

Choose your next steps

Get connected

Connect with our Customer Success Team regarding your ideas or projects.

Connect with the real graph drawing experts.

Dive deep

Get more detailed information about specific yFiles topics.

Download yFiles

Try yFiles free of charge.

Download the yFiles trial version.