A Modern Approach
Capabilities and Features
ParaViewWeb provides several modules that application developers will find useful for building a modern Web-based application with scientific data and visualization.
Common: Data Model and Helpers
The data model defines how data and components are associated with each other. In ParaViewWeb, we aim to make the simplest, most general data model that satisfy the concrete requirements of the Web-based application with scientific visualization. The common module provides core data model and helpers to intelligently enhance the data model in the presence of certain components and capabilities, which include: color handling, offscreen canvas, WebGL utilities and the various data model extensions to hold the state for a number of visualization components and UI widgets.
Figure 1: Mutual information Chord Diagram for the 2014 – 2015 NBA season player statistics.
ParaViewWeb offers a collection of visualization components to illustrate patterns and structure in large data sets. Each component highlights one of the many possible ways of viewing datasets like the one presented in Figure 1. These visualization components can be integrated into a Web-based workbench-like environment that provides new interfaces to support discovery, exploration, filtering and analysis. The visualization components module is a set of interactive tools for exploring and visualizing data that share the same API (setContainer/resize/render/destroy). Currently, these visualization components demonstrate various types of information visualization. ParaViewWeb has a mutual information diagram (depicted in Figure 1). The mutual information of two random variables is a measure of the mutual dependence between the two variables. It implies the knowledge obtained about one random variable via the other random variable. The visualization components also includes: a field selector, one-dimensional (1D) histograms, and parallel coordinates. Expect to see a Sankey diagram, a specific type of flow diagram in which the width of the arrows is shown proportionally to the flow quantity, as well as other tools for annotating data in the near future.
Figure 2: (a) a collapsable field selector capable of displaying field name, min value, max value and a 1D histogram, (b) 1D/2D Histograms, and (c) parallel coordinates.
Interactive visualizations are a crucial mechanism for discovery in science, engineering and medical research. These tools enable end-users to: focus on interesting details; customize the content; and modify the visualization, all while enhancing the exploration of large amounts of data. At their best, they facilitate an engaging environment for inquiry. ParaViewWeb’s interaction module, consisting of utilities to aid with user input/interaction, mouse and touch handling, makes it easier for the developer in creating captivating Web-based applications with scientific visualization.
Data access (I/O)
The IO module of ParaViewWeb aims to provide connectivity to various sources of data including the following three main types:
- Core: Core provides several download helpers to deal with pattern-based data querying of various type of data (binary array, image, text, csv, json, etc.).
- WebSocket: WebSocket provides communication helpers for the VTK and/or ParaView Web backends.
- Girder: Girder provides a composable network client that simplify the interaction with Kitware’s Girder a data management system as a backend.
Figure 3: (a) selection editor, (b) lookup table editor, (c) equalizer editor, (d) light properties editor, and (e) transfer function editor.
ParaViewWeb provides two forms of UI widgets:
- Native UI – Native UI widgets are composed of various UI pieces with no dependencies, and
- React UI – React UI widgets are composed of React, from the OpenSource projects of Facebook developer team.
An example of the data processing algorithms in this module is an algorithm that allows the application developer to slice a 3D floating point value volume to produce an image using a lookup table to convert the numerical values into an actual color. In Figure 5, the application developer uses a multi-view layout component and slices the 3D volume in x, y and z and colors the slices by the temperature field using a spectral lookup table.
Figure 5: ArcticViewer’s layout component and slices the 3D floating point value, temperature, volume with three orthogonal slices and a probe plot in time.
ParaViewWeb is used in many Kitware, Inc. Web projects.
The Visualizer Web application provides a ParaView-like, the Qt application, experience inside the Web browser. The ParaViewWeb library contains all the components needed to build the UI and the data access (I/O) routines to communicate to the ParaView server using WebSocket connectivity. Visualizer is simply connecting all the components together in a meaningful way.
Figure 6: Visualizer, displaying the visualization pipelines and color map editor with similar functionality to the ParaView Qt application.
In addition to running Visualizer remotely through as a service, ParaViewWeb provides a nice command line interface so that end-user might utilize Visualizer locally with their locally installed version of ParaView.
Figure 7: (a) LightViz with the new default user interface, and (b) LightViz with the ArcticViewer interface.
In Figure 7 a and b, We illustrate how easy it is to recast the LightViz scientific visualization application with a new UI courtesy of ParaViewWeb.
The ArcticViewer scientific visualization application breaks the pattern by not requiring a processing/rendering server like VTK or ParaView. In fact, ArcticViewer relies on the data being pre-processed to allow it to be directly read by the Web client. In this use case, ParaViewWeb provides the various data handlers, UI widgets, data access, and rendering algorithms and viewers to drive the application.
Figure 8: ArcticViewer with (a) compositing opaque visualization objects from images, (b) compositing transparent objects from images, and (c) using two rendering passes to expose a magic hole in the compositing of transparent visualization objects from images.
In a recent project, we created DataViewer, a work in progress, which allows the end-user to interact with BigData with ParaViewWeb’s information visualization components and UI widgets.
Figure 9: DataViewer showing histograms, mutual information chord diagram, selection editor, workbench layout editor and parallel coordinates.
SimPut, as opposed to the previous presented applications, does not provide scientific visualization (it does use some charts). SimPut provides an environment for dynamically generating a UI with various forms of inputs in order to produce a templated output file for a simulation code. SimPut is leveraging from ParaViewWeb its infrastructure to build UI widgets. In addition, parts of the SimPut UI are also used inside Visualizer to create the Proxy Editor Panels.
Figure 10: SimPut setting input parameters for the PyFR simulator.
HPCCloud is a web-based simulation environment that utilizes web technologies to deliver an innovative Software as a Service (SaaS) advanced modeling and simulation environment. The platform allows the user to take existing computational code that is designed to run on a high-performance computing (HPC) resource and develop an end-to-end simulation workflow, from input generation right through to post-processing. HPCCloud presents the workflows through a simple, intuitive user interface (UI), which shields the user from much of the complexity that comes with running a simulation code on an HPC resource. HPCCloud utilizes several embedded Kitware, Inc. frameworks. For an example PyFR workflow with three stages, HPCCloud uses: 1) Input generation – Simput, based on ParaViewWeb, will generate an input deck for the simulation. 2) Simulation – The simulation code will run on the Cloud-based HPC or traditional HPC cluster. 3) Visualization – Visualizer, based on ParaViewWeb, will provide the scientific visualization infrastructure.
Figure 11: Results visualized with Visualizer within the HPCCloud application.