In the context of the Semantic Web, various visualization methods and tools exist. However, suitable visualizations are highly de-pendent on individual use cases and targeted user groups. Therefore, existing solutions require modiﬁcations and adjustments to meet the de-mands of other use cases and user groups. In this demo, we present an approach for a uniﬁed framework addressing customizable visual rep-resentations of knowledge graphs. Our approach reﬁnes the commonly used steps in the visualization generation process (i.e., data access, map-ping to visual primitives, and rendering) for Semantic Web contexts. Separation of concerns for individual steps and a modular and customiz-able 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

Lohmann, Steffen

Wiens, Vitali

English

Repositorium für Naturwissenschaften und Technik

Demonstration of a Customizable KnowledgeGraph Visualization Framework∗Vitalis Wiens1,2 and Steffen Lohmann31 L3S Research Center, Leibniz University of Hannover, Germanywiens@l3s.de2 TIB Leibniz Information Centre for Science and Technology,Hannover, Germany3 Fraunhofer Institute for Intelligent Analysis and Information Systems IAISSt. Augustin, GermanyAbstract. In the context of the Semantic Web, various visualizationmethods and tools exist. However, suitable visualizations are highly de-pendent on individual use cases and targeted user groups. Therefore,existing solutions require modifications and adjustments to meet the de-mands of other use cases and user groups. In this demo, we present anapproach for a unified framework addressing customizable visual rep-resentations of knowledge graphs. Our approach refines the commonlyused steps in the visualization generation process (i.e., data access, map-ping to visual primitives, and rendering) for Semantic Web contexts.Separation of concerns for individual steps and a modular and customiz-able architecture build the foundation for a pipeline-based visualizationframework. The framework enables the creation and selection of the rightcomponents for the right tasks, realizing a variety of use cases and visualrepresentations in Semantic Web contexts.Keywords: Ontology visualization, knowledge graph visualization, cus-tomization, visual representation, visualization pipeline framework.1 IntroductionIn Semantic Web contexts, various visualization methods and tools are available,and new ones are being developed every year. The applied visualization meth-ods range from indented trees and chord diagrams to treemaps and Euler dia-grams. According to a recent survey [1], most applications use two-dimensionalgraph-based representations in the form of node-link diagrams. Furthermore, thissurvey indicates that “new visualization methods and tools are often developedfrom scratch, omitting opportunities to learn from previous mistakes or to reuseadvanced techniques provided by other researchers and developers.”The number of visualization methods, tailor-suited tools, along with the re-quirements and necessity for customization indicate that a one-size-fits-all so-lution is challenging, if not impossible, nor feasible, to realize. This particular∗Copyright c© 2020 for this paper by its authors. Use permitted under CreativeCommons License Attribution 4.0 International (CC BY 4.0).Fig. 1. An example pipeline using components for creating node-link diagrams.observation, and the fact that applications are often developed from scratch, mo-tivates the design for a unified visualization framework approach. The challengeof unification is realised through divergence of different components, allowing foradjustments and customization for the visualization of the data at hand. Thisconceptualization allows to create various visualizations through the exchangeof components for individual use cases and data source. As our approach tar-gets a unified visualization framework approach, we address this through thedivergence of customizable components and convergence in data models.Our approach builds on the identification of commonly used steps in the cre-ation of visual representations for the Semantic Web. Furthermore, the approachemploys the paradigm of separation of concerns for individual steps, increasingits flexibility. Our framework realizes the approach and provides a modular andcustomizable visualization pipeline that serves as a foundation for creating vi-sual representations of knowledge graphs for different data sources, use cases,and user groups. Customizable components serve as stand-alone artifacts fordifferent steps in the creation process of visualizations. The framework orga-nizes the different components in a pipeline. The data models, provided as inputand output for various components, serve as convergence points within the visu-alization pipeline. Therefore, we argue that the data models further contributeto the reusability of components and sections of visualization pipelines. Figure 1illustrates an example pipeline realizing node-link diagrams.2 ApproachMost visualization tools employ the following steps to create visual representa-tions: 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 interac-tions. Typically, these steps are created within an application addressing a singleuse case and a single user group. In order to address the various requirementsof different use cases and user groups, our approach employs a separation ofconcern paradigm and refines the visualization generation process.We argue that due to the variety of Semantic Web technologies, visualiza-tion methods, and tools, a unified visualization framework is achievable throughdivergence. Components perform specialized tasks, whereas their results are con-verged into corresponding data models. The refined visualization process focus-ing on the creation of node-link diagrams is presented in Table 1.Step Component Responsibility1 Data Access Handler Specify Semantic Web data source and parameters fordata retrieval in JSON format.2 Parser Process retrieved Semantic Web data and organize itin the Resource-Relation Model.3 Vertex-Edge Mapper Select data for visual representation and create graphstructure.4 Node-Link Mapper Modify the graph structure using merge, split, and ag-gregation operations.5 Rendering Create visual primitives and integrate the specifica-tions of other components (6–8).6 Visual Appearance Specify how nodes and links are rendered.7 Spatial Layout Specify how elements are organized in the layout.8 Interactions Specify interactions for graph, nodes, and links.Table 1. Tabular representations of different components and their responsibilities.3 Customizable Visualization Pipeline FrameworkThe visualization generation process typically involves the identification of datasources, its mappings to visual primitives, and optionally the creation of userinteractions. Our framework4 provides a customizable visualization pipeline, al-lowing users to configure data sources, apply graph manipulations, and definethe visual appearance of rendering elements. This conceptualization allows tocreate various visualizations through the exchange of components for individualuse cases and data sources.In this demo, the pipeline can access four example data sources. The node-link mappers demonstrate different graph manipulations. The rendering modulecreates node-link diagram visualizations that are adjustable w.r.t. their visualappearance that is based on GizMO [2]. Additionally, the rendering moduleimplements basic user interactions such as zooming, dragging and panning. Aforce-directed layout is used to create the spatial assignment of nodes and linksin the graph visualization.The framework provides basic implementations for individual components.All data models and the components for the data access module and the map-per module are implemented in plain JavaScript. The rendering components useD3.js additionally for creating interactions and visual primitives as SVG ele-ments. Furthermore, this framework allows users to export the pipeline as abundle which includes the implementation of the components and a React ap-plication frame. We argue that the bundle serves as a basic infrastructure forextending and adjusting the implementation to the requirements of different usecases and user groups. Figure 2 gives an overview of the UI of the framework.4https://github.com/vitalis-wiens/donatello-pipelinesFig. 2. Overview of the UI of the framework. Left side: Module selection for datasources, vertex-edge mapper, and node-link mapper. Note: In this version we imple-mented only a single vertex-edge mapper. Top: Pipeline configuration. Bottom: Visual-ization preview based on the selected components and their configurations.4 DiscussionThe limitations of the current prototype implementation for this demonstrationare twofold. First, the UI for creating pipelines is fixed w.r.t. to the arrangementof the components, i.e., data-source selection, vertex-edge mapper, node-linkmapper, and rendering module. Second, our prototype implementation addressesonly the visual representations in the form of node-link diagrams. Thus, the datamodels and the pipeline composition are tailor-suited for such visualizations.Furthermore, the components use a top-down communication where theirresults feed into the next component in the pipeline. We envision the bottom-upcommunications to enable the creation of applications that allow through meansof visual editing also to modify the data source. For example, changes in thegraph propagate backward through the pipeline and create updates for the datasource, e.g., SPARQL query updates, REST-API calls for creating new data, orintegration with version control systems such as git.Our approach exports the created pipeline as a zip file creating source codefor a fully functional React core application that serves as an entrance point fordevelopment. Separation of concerns for individual components and the pipelineorganization allow developers to adjust and customize individual components totheir needs and the requirements of the underlying use case. Due to the aspectsthat our components are derived through the separation of concern paradigm,and their conceptualization as stand-alone artifacts, (i.e., each component takesinputs, process them, and provides one output), allow for their reuse in othervisualizations. The implementation of our components uses class inheritance,thus new components can be derived from existing ones that serve as examples.5 DemonstrationIn the demonstration, we will introduce the approach realizing customizablevisualization pipelines in Semantic Web contexts. While our demo applicationtargets to showcase the flexibility and ease-of-use to create visualizations in theform of node-link diagrams, its current implementation is a prototype, realizingthe necessary configurations and modifications in pre-selected components. Wewill introduce the individual components, their responsibilities, their interplay,and how to extend and configure individual parts of the pipeline to create vi-sual representations for knowledge graphs. Furthermore, we will explain how thepipeline configuration is used to create a bundle comprising of the implementedcomponents, the pipeline configuration, its initialization, and a core React ap-plication 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 configu-ration UI of the application. The configured pipelines can be downloaded as zipfiles, thus users are equipped with an infrastructure to directly start developingand adjusting the pipeline to their needs. We will direct the audience to thedemo web application, allowing for independent testing. The application is opensource 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 ofthe conference will allow us to identify further requirements, needs, and featuresfor the approach and its implementation. An overview of the application, itsfeatures, and usage is illustrated in the corresponding demo video5.AcknowledgmentsThis work is co-funded by the European Research Council project Science-GRAPH (Grant agreement #819536).References1. Dudáš, M., Lohmann, S., Svátek, V., Pavlov, D.: Ontology visualization methodsand tools: a survey of the state of the art. Knowledge Eng. Review 33 (2018)2. Wiens, V., Lohmann, S., Auer, S.: Gizmo–a customizable representation model forgraph-based visualizations of ontologies. In: Proceedings of the 10th InternationalConference on Knowledge Capture. pp. 163–170 (2019)5https://drive.google.com/file/d/17cSLjDNq7kpepfbmZiYevM10eWUE9gRh/preview

Demonstration of a customizable knowledge graph visualization framework

https://oa.tib.eu/renate/bitstream/123456789/10130/1/Demonstration_of_a_customizable.pdf

Demonstration of a customizable knowledge graph visualization framework

Abstract

Similar works

Full text

Available Versions

Repositorium für Naturwissenschaften und Technik