gms | German Medical Science

Introduction: The internet is an important resource for health information seeking [1]. The German Health Web (GHW), i.e., websites with health-related content, consists of more than 22,000 websites [2]. In web mining, these interconnected structures are usually depicted as graphs [3]. When searching for health content users hop from one website (node), to another. However, it is not possible to explore all the (inter-)connections between certain nodes while ‘ordinary’ web browsing. Therefore, an interactive web application was developed that visualizes and supports the exploration of the GHW. The prototype should be part of public exhibitions and events that attract citizens without any specific medical and/or computer science background.

State of the art: In 2012, Wiesner et al. [4] presented a browser-based application visualizing health-related Wikipedia concepts during a public exhibition. They conclude that the interactive exploration of a health related graph was of high interest for exhibition visitors.

In graph theory several concepts for drawing/representation exist. Based on the experiences by [4], three basic layout concepts were considered: Tree layout, physical layout, and 3D layout. In addition, a scoping literature screening on the online databases IEEEXplore and ACM was conducted to identify additional layout concepts. In total, 14 different layouts were collected. The authors screened the results and scored them according to the criteria: clustering, time-dependent, edge length, visualize directed graphs, 3D-layout.

Rendering of complex graphs in web browsers is primarily based on three approaches: Scalable Vector Graphics, HTML canvas, Web Graphics Library (WebGL).

Concept: The application should be able to process touch-based input to simplify navigation for visitors. Queries are generated and executed against a graph database based on users’ interaction with the layouts. Five 2D-layouts (Arc Diagram, Elliptic implosion, Ramification, Centralized Ring, Segmented Radial Convergence) and one 3D-layout should be implemented. Switching between the layouts should be possible at any time. To visualize the GHW at a maximum depth d=3, more than 200,000 elements have to be rendered.

Implementation: The UI was implemented with JavaScript (Vue.js;v3.2 [5], D3.js;v7.3 [6]). An adequate renderer was chosen for each specific layout. Figure 1 [Fig. 1] depicts a screenshot of a sub graph visualization. The Spring Framework [7] was used to implement a Restful webservice. A Neo4J connector [8] was mandatory as the results of [1] were persisted in a graph database.

Lessons learned: A prototype was deployed and is accessible via browser. Modern frameworks and browsers are able to render even complex graphs by leveraging hardware acceleration.

Current implementation does not support caching. Therefore, query execution may take several minutes especially when graph’s depth is increased. Performance drops were observed for Elliptic implosion and Ramification layouts. Therefore, WebGL which supports hardware acceleration should be selected as primary render technology for all layouts. However, when using WebGL-libraries several graphical artifacts occurred. These artefacts would affect the viewing experience.

In summer 2022, the prototype will be part of several public events and exhibitions targeting a lay audience in Heilbronn. First insights regarding the interaction schemas and qualitative feedback will be collected.

The authors declare that they have no competing interests.

The authors declare that an ethics committee vote is not required.