ParaViewWeb – Bringing Visualization to the Web

Kitware Source Feature Article: July 2010

ParaViewWeb – Bringing Visualization to the Web
The Internet is a breeding ground for innovation. Not only does it foster the sharing of information and knowledge but also provides innovative platforms for people to collaborate without geographical distances acting as barriers. People have been redesigning and rethinking traditional desktop applications, such as document-editing and money management, to enable collaboration platforms over the Web. The familiarity and omnipresence of web-browsers make them an attractive environment to deploy applications.

In this article we present a framework, based on ParaView, that brings 3D visualization to your web browser codenamed ParaViewWeb. ParaViewWeb is a collection of components that make it possible to develop websites and portals which include live, interactive visualization. This acts as the first step toward bringing a full fledge collaborative visualization platform to the Web.

The Features
ParaViewWeb is a collection of web-services that make it possible for web-clients to show interactive visualization components in web pages. These web services are accessible through a JavaScript library. The JavaScript library provides API to create visualization sessions, setup visualization pipelines and even create interactive components that can be placed in the web page DOM. The interactive component can be a Java, Flash or JavaScript widget based on the designer’s preference. We rely on server side rendering; in other words, images are rendered on the server using ParaView and then shipped to the web-client. This makes it possible to handle rendering of large datasets in parallel using ParaView’s parallel rendering capabilities.

Our solution is entirely based over HTTP/HTTPS and doesn't require additional ports to be exposed on the web-server.

The JavaScript library enables communication with the ParaView visualization server running on the server side. This makes it possible to create and control visualization pipelines from the web-client using a simple JavaScript.

ParaViewWeb doesn’t depend on any particular client-side frameworks. This makes it possible for the designer to embed the visualization component in the client framework of their choice e.g., dojo, Google Web Toolkit, qooxdoo or even Java and Flash RIAs (Rich Internet Applications). It can be easily integrated into existing workflows and web portals to add live visualization capabilities.

The web-services are highly customizable providing the site maintainer full control over customizing the the launch of ParaView servers, resource management, session management and tracking. Additionally, this codebase will be made available under a BSD license – similar to ParaView – making it easy to customize and evolve the system to suit a site’s custom needs.

Figure 1: A simple sample application enabling interactive visualization through a web browser.

The Design
ParaViewWeb is a collection of reusable, customizable components. The main components of this framework are:

Visualization server (PWServer), a ParaView-based engine that does the actual visualization and rendering. This could either run as a single process (comparable to the builtin-mode in ParaView) or connect to a parallel pvserver running on a cluster for distributed computing.
Web services (PWService) that manage communication between web-clients and remote visualization servers. These include administration servlets that enable monitoring of active visualization session and browsing logs.
JavaScript library that encapsulates communication API to talk with PWServer for starting visualization servers as we as for creating and updating visualization pipelines.
Interactive visualization components allowing users to look at visualization renderings in the browser interactively.

ParaViewWeb Schematic
Figure 2: Schematic of the ParaViewWeb Visualization Framework

Figure 2 shows how these components interact with each other. Our implementation requires a Java-based Web Application server. There are several implementations available including Apache Tomcat, which is an open source, freely available implementation.

Using these components, developers can build websites or web portals with visualization and data processing capabilities. To demonstrate the use of this framework, we also developed several sample applications using different web client technologies, including Google Web Toolkit (GWT), qooxdoo and jQuery.

The following is a sample JavaScript for creating a visualization pipeline and rendering the results in a webpage.

<html>
  <head>
       <meta http-equiv="Content-Type"  content="text/html; charset=UTF-8">
       <title>ParaViewWeb Usage sample</title>
       <script type="text/javascript" src="/PWService/js/ParaViewWeb.js"></script>
       <script type="text/javascript">
             // Create a paraview proxy
             var paraview = new Paraview("/PWService");
             paraview.createSession("name", "comment");
             var view = paraview.CreateIfNeededRenderView();

             // Execute ParaView scripting
            var sphere = paraview.Sphere();
            paraview.Show();

// Create and bind renderer
           var renderer = nww JavaScriptRenderer( "jsRenderer", "/PWService");
           renderer.init( paraview.sessionId, view.__selfid__);
           renderer.setSize('200', '200');
           renderer.bindToElementId("renderer-container");
          renderer.start();
       </script>
  </head>
  <body>
       <div id="renderer-container">
             
       </div>
  </body>
</html>

The Applications
As mentioned before, the goal of this framework is to enable development of portals with interactive visualization. The web services and the JavaScript library make it easier to incorporate visualizations into web pages. Figure 3 shows a sample usage of the JavaScript library to start a visualization session and create a visualization pipeline. To demonstrate use of this library, we have developed a few applications using different JavaScript client frameworks including GWT and qooxdoo. These samples include:

A ParaView-clone for exploration and analysis of data. This sample demonstrates that full featured visualization applications are possible using this framework.
A sandbox application for developers to create visualization pipelines by writing raw JavaScript code.
A ray tracing application that uses Manta Ray Tracer for rendering.
A few fixed pipeline demonstrations that load predetermined visualization state files and datasets.

The Demo and Wiki
The framework mentioned here is currently under active development. We expect to add a horde of new features and stability improvements in the coming months. An official release is still months away, however it’s never too early to start getting feedback from users. Hence we have setup a demo server at http://paraviewweb.kitware.com and have also made the source available. Detailed instructions about obtaining the source and compiling and deploying can be found on the ParaView Wiki, which also contains other design and usage details.

Figure 3: ParaView-like web visualization application allowing exploration of datasets

Acknowledgements
This effort was funded by DOE SBIR DE-FG02-08ER85143.

Utkarsh Ayachit is a Technical Leader in Kitware’s Clifton Park, NY office. He is one of the leading developers on ParaView. Currently, Utkarsh is leading the effort to add collaboration support to ParaView.

Sebastien Jourdain Sébastien Jourdain is an R&D engineer in Kitware's Clifton Park, NY office. Currently, Sébastien is working on Web Visualization as well as adding collaboration support to ParaView.