In the context of the Semantic Web, various visualization methods and tools exist. However, suitable visualizations are highly dependent on individual use cases and targeted user groups. Therefore, existing solutions require modi cations and adjustments to meet the demands of other use cases and user groups. In this demo, we present an approach for a uni ed framework addressing customizable visual representations of knowledge graphs. Our approach re nes the commonly used steps in the visualization generation process (i.e., data access, mapping to visual primitives, and rendering) for Semantic Web contexts. Separation of concerns for individual steps and a modular and customizable architecture build the foundation for a pipeline-based visualization framework. The framework enables the creation and selection of the right components for the right tasks, realizing a variety of use cases and visual representations in Semantic Web contexts.
In Semantic Web contexts, various visualization methods and tools are available,
and new ones are being developed every year. The applied visualization
methods range from indented trees and chord diagrams to treemaps and Euler
diagrams. According to a recent survey [
The number of visualization methods, tailor-suited tools, along with the requirements and necessity for customization indicate that a one-size- ts-all solution is challenging, if not impossible, nor feasible, to realize. This particular observation, and the fact that applications are often developed from scratch, motivates the design for a uni ed visualization framework approach. The challenge of uni cation is realised through divergence of di erent components, allowing for adjustments and customization for the visualization of the data at hand. This conceptualization allows to create various visualizations through the exchange of components for individual use cases and data source. As our approach targets a uni ed visualization framework approach, we address this through the divergence of customizable components and convergence in data models.
Our approach builds on the identi cation of commonly used steps in the creation of visual representations for the Semantic Web. Furthermore, the approach employs the paradigm of separation of concerns for individual steps, increasing its exibility. Our framework realizes the approach and provides a modular and customizable visualization pipeline that serves as a foundation for creating visual representations of knowledge graphs for di erent data sources, use cases, and user groups. Customizable components serve as stand-alone artifacts for di erent steps in the creation process of visualizations. The framework organizes the di erent components in a pipeline. The data models, provided as input and output for various components, serve as convergence points within the visualization pipeline. Therefore, we argue that the data models further contribute to the reusability of components and sections of visualization pipelines. Figure 1 illustrates an example pipeline realizing node-link diagrams. 2
Most visualization tools employ the following steps to create visual representations: i) access the data; ii) map it to visual primitives (e.g., geometric shapes); iii) render the primitives; and iv) optionally add animations and user interactions. Typically, these steps are created within an application addressing a single use case and a single user group. In order to address the various requirements of di erent use cases and user groups, our approach employs a separation of concern paradigm and re nes the visualization generation process.
We argue that due to the variety of Semantic Web technologies, visualization methods, and tools, a uni ed visualization framework is achievable through divergence. Components perform specialized tasks, whereas their results are converged into corresponding data models. The re ned visualization process focusing on the creation of node-link diagrams is presented in Table 1.
Step 1 2 3 4 5
Component Responsibility Data Access Handler Specify Semantic Web data source and parameters for data retrieval in JSON format.
Parser Process retrieved Semantic Web data and organize it in the Resource-Relation Model.
Vertex-Edge Mapper Select data for visual representation and create graph structure.
Node-Link Mapper Modify the graph structure using merge, split, and aggregation operations.
Rendering Create visual primitives and integrate the speci cations of other components (6{8).
Visual Appearance Specify how nodes and links are rendered.
Spatial Layout Specify how elements are organized in the layout.
Interactions Specify interactions for graph, nodes, and links.
The visualization generation process typically involves the identi cation of data sources, its mappings to visual primitives, and optionally the creation of user interactions. Our framework4 provides a customizable visualization pipeline, allowing users to con gure data sources, apply graph manipulations, and de ne the visual appearance of rendering elements. This conceptualization allows to create various visualizations through the exchange of components for individual use cases and data sources.
In this demo, the pipeline can access four example data sources. The
nodelink mappers demonstrate di erent graph manipulations. The rendering module
creates node-link diagram visualizations that are adjustable w.r.t. their visual
appearance that is based on GizMO [
The framework provides basic implementations for individual components. All data models and the components for the data access module and the mapper module are implemented in plain JavaScript. The rendering components use D3.js additionally for creating interactions and visual primitives as SVG elements. Furthermore, this framework allows users to export the pipeline as a bundle which includes the implementation of the components and a React application frame. We argue that the bundle serves as a basic infrastructure for extending and adjusting the implementation to the requirements of di erent use cases and user groups. Figure 2 gives an overview of the UI of the framework.
4https://github.com/vitalis-wiens/donatello-pipelines The limitations of the current prototype implementation for this demonstration are twofold. First, the UI for creating pipelines is xed w.r.t. to the arrangement of the components, i.e., data-source selection, vertex-edge mapper, node-link mapper, and rendering module. Second, our prototype implementation addresses only the visual representations in the form of node-link diagrams. Thus, the data models and the pipeline composition are tailor-suited for such visualizations.
Furthermore, the components use a top-down communication where their results feed into the next component in the pipeline. We envision the bottom-up communications to enable the creation of applications that allow through means of visual editing also to modify the data source. For example, changes in the graph propagate backward through the pipeline and create updates for the data source, e.g., SPARQL query updates, REST-API calls for creating new data, or integration with version control systems such as git.
Our approach exports the created pipeline as a zip le creating source code for a fully functional React core application that serves as an entrance point for development. Separation of concerns for individual components and the pipeline organization allow developers to adjust and customize individual components to their needs and the requirements of the underlying use case. Due to the aspects that our components are derived through the separation of concern paradigm, and their conceptualization as stand-alone artifacts, (i.e., each component takes inputs, process them, and provides one output), allow for their reuse in other visualizations. The implementation of our components uses class inheritance, thus new components can be derived from existing ones that serve as examples.
In the demonstration, we will introduce the approach realizing customizable visualization pipelines in Semantic Web contexts. While our demo application targets to showcase the exibility and ease-of-use to create visualizations in the form of node-link diagrams, its current implementation is a prototype, realizing the necessary con gurations and modi cations in pre-selected components. We will introduce the individual components, their responsibilities, their interplay, and how to extend and con gure individual parts of the pipeline to create visual representations for knowledge graphs. Furthermore, we will explain how the pipeline con guration is used to create a bundle comprising of the implemented components, the pipeline con guration, its initialization, and a core React application framework.
At ISWC, we will provide a hands-on experience of the demo application: Users will be enabled to create custom visualization pipelines using the con guration UI of the application. The con gured pipelines can be downloaded as zip les, thus users are equipped with an infrastructure to directly start developing and adjusting the pipeline to their needs. We will direct the audience to the demo web application, allowing for independent testing. The application is open source and available under the MIT license, thus allowing for reusing, extending, and contributing to the project.
Finally, we hope that discussions with Semantic Web experts in the context of the conference will allow us to identify further requirements, needs, and features for the approach and its implementation. An overview of the application, its features, and usage is illustrated in the corresponding demo video5. Acknowledgments This work is co-funded by the European Research Council project ScienceGRAPH (Grant agreement #819536). 5https://drive.google.com/file/d/17cSLjDNq7kpepfbmZiYevM10eWUE9gRh/ preview