Protovis-GWT is an open source GWT data visualization module. The goal of Protovis-GWT is to make the Protovis JavaScript visualization API available in GWT by wrapping the original JavaScript code using JSNI.
In Protovis-GWT 0.4.1, support for the Protovis pan and zoom behaviors was added. The ellipse mark type, which is not part of the original Protovis, was added. Protovis-GWT 0.4.1 is now based on GWT 2.3 (instead of 2.1) and supports Internet Explorer 9.
Update: A newer version of Protovis-GWT has been released. Please see the wiki page for the latest information on Protovis-GWT.
Protovis-GWT is an open source GWT data visualization module. The goal of Protovis-GWT is to make the Protovis JavaScript visualization API available in GWT by wrapping the original JavaScript code using JSNI.
In Protovis-GWT 0.4, support for network visualizations (Arc diagram, Force-directed graphs, Matrix diagrams) was added. Several classes were moved into the PV class to align the syntax closer to the original Protovis syntax. A stable sort implementation was added to JsArrayGeneric, and various other API improvements were made.
Update: A newer version of Protovis-GWT has been released. Please see the wiki page for the latest information on Protovis-GWT.
Protovis-GWT is an open source GWT data visualization module. The goal of Protovis-GWT is to make the Protovis JavaScript visualization API available in GWT by wrapping the original JavaScript code using JSNI.
Protovis-GWT 0.3 implements the complete API of the basic Protovis Mark classes (Mark, Area, Bar, Dot, Label, Line, Wedge).
The Choosel framework has been restructured into a more modular architecture that facilitates extensibility and reuse. The new visualization component architecture allows developers to use Choosel visualization components in regular GWT applications, to develop their own Choosel visualization components, and to extend the Choosel visualization workbench. This blog post outlines the architecture, describes its usage scenarios and explains how to update existing Choosel applications.
The Choosel visualization component architecture separates the core functionality (which is required to use Choosel visualizations in GWT) from the workbench functionality. The visualizations are extracted into separate visualization modules. The architecture consists of three main components:
Core module: The choosel.core module contains the core functionality that is required by Choosel visualizations. This includes the resource (i.e. data) framework, the management of visualization states (e.g. data, highlighting, selection), the visualization component API, and also more general services such as logging (which wraps gwt-log). The choosel.core module needs to be inherited by any GWT module that uses Choosel, whether it is a visualization component, a GWT application or a Choosel workbench.
Visualization modules: Visualization modules provide one or more visualization components that implement the Choosel visualization component API. They can wrap around other libraries, e.g. GWT modules, JavaScript visualization toolkits, or Flash widgets. Choosel provides several visualization modules (map, timeline, text, chart, and graph) that can be used right away.
Workbench module: The choosel.workbench module provides the persistence and sharing facilities as well as the visualization workspace.
This separation of concerns makes reusing and extending Choosel easier. It enables three ways to leverage Choosel in your own projects:
Developing your own visualization components: You can implement visualization components that adher to the Choosel visualization component API. These visualization components can then be used by yourself and others to take advantage of Choosel features such as view synchronization, selections, highlighting, and details on demand.
Using Choosel visualization components in your GWT application: You can use one or several Choosel visualization components as widgets in your GWT application to visualize your data.
Creating a Choosel-based workbench: You can extend the whole Choosel framework to develop your own visualization workbench, for example for a specific application domain.
Please note that while the modularization itself is complete, the visualization component API is still under development. We plan to release a first stable version in the next few months.
To set up a new Choosel project, please take a look at the development setup. If you are already working on a Choosel-based application, you can update it to use the modular Choosel architecture:
Change the dependencies of your Eclipse project (Right click on project --> Properties --> Java Build Path --> Projects) to reference the new Choosel modules, but not the old one (choosel)
Organize the imports of your .java files (Right click on source folder --> Source --> Organize Imports; then for each class that has problems in the Java editor)
Fix the static imports (if there are unresolved constants or methods: compare with previous version, insert old static imports and change choosel.client to choosel.core.client)
Add the visualization configuration file (see ChooselExampleWorkbenchViewContentDisplaysConfigurationProvider for an example)
Update the client module (see ChooselExampleClientModule for an example)
Change the .gwt.xml file of your project (see choosel.example.workbench for an example module file)
Update the servlet references in the web.xml (change choosel.server to choosel.workbench.server)
Remove old launch config, copy launch config from choosel.example.workbench and adjust it to your project.
You should be able to run your modular Choosel application now. If there are still problems, feel free to complain on the Choosel mailing list :-)
Update: A newer version of Protovis-GWT has been released. Please see the wiki page for the latest information on Protovis-GWT.
Protovis-GWT is an open source GWT data visualization module. The goal of Protovis-GWT is to make the Protovis JavaScript visualization API available in GWT by wrapping the original JavaScript code using JSNI.
Protovis-GWT 0.2 has an improved event handler interface and now supports the hierarchical visualization examples (dendrograms, sunbursts, icicles, indented trees, circle packing, node-link trees, and treemaps) and the bubble chart example from the Protovis example library.
Version 0.1 implements the Protovis functionality for most conventional and custom examples from the Protovis website. The support for tree, graph and map visualizations as well as for interaction is still limited. Protovis-GWT currently supports Chrome, Firefox and Safari. IE is not yet supported.
Getting started with Protovis-GWT in your GWT project is easy:
Add the jar file to the build path of your GWT project
Inherit org.thechiselgroup.choosel.protovis.ProtovisGWT by adding <inherits name='org.thechiselgroup.choosel.protovis.ProtovisGWT'/> to your GWT module XML definition (.gwt.xml).
Interested in data visualization on the web? There are several Choosel-related events at VisWeek 2010, CSER and CASCON 2010. Choosel is an open-source framework for browser-based data visualization.
Watch video in full screen and HD for better quality
Oct 31st, there will be a presentation on Choosel and the Work Item Explorer at CSER. The Work Item Explorer (developed by Patrick Gorman, Del Myers and Christoph Treude) is a research prototype built on Choosel that facilitates the flexible, iterative exploration of Jazz data, focusing primarily on work items.
Nov 1-4, there will be CASCON exhibits on Choosel and the Work Item Explorer. The Choosel exhibit (Bradley Blashko, Lars Grammel) will be at booth X2 near the Central Tower, and the Work Item Explorer exhibit (Patrick Gorman, Christoph Treude) will be at booth U5. The exhibits are open 5pm to 7pm on Monday (Nov 1), from 8.30am to 7pm on Tuesday and Wednesday (Nov 2 and 3), and from 8.30am to 1pm on Thursday (Nov 4).
Developing web applications that support multiple window-like panels in a single browser page is challenging. This blog post describes how I implemented semi-transparent window borders in Choosel to help with window resizing. I used CSS RGBa background colors to combine semi-transparent window borders with opaque window content.
Choosel is a GWT framework that aims at facilitating flexible visual data exploration. It supports multiple windows on the same page. The windows can be dynamically created, closed, moved, resized and brought to the front. Different window content types such as maps, charts & notes are available.
However, one of the findings from a usability study was that resizing the windows was difficult. The main reason was that the window borders were fairly thin (3 pixel). So I decided to increase the border thickness to 7 pixel. However, I found that increasing the thickness of opaque borders often occluded relevant content from underneath, e.g. from other windows. To solve this problem, I implemented semi-transparent borders using CSS. The two screenshots below illustrate the differences between the two designs:
Thin, opaque borders(click thumbnail to enlarge screenshot)
Thick, semi-transparent borders(click thumbnail to enlarge screenshot)
A window in Choosel is basically an HTML div element that contains an HTML table. The table contains cells for the borders, the header and the content. To allow for transparent boundaries and opaque window contents at the same time, I set the background color of the window div to be completely transparent using RGBa:
background-color: rgba(0, 0, 0, 0.0);
Using CSS opacity was not an option, because opacity is inherited and thus combining opaque window content with transparent border would not have been easily possible. The borders have semi-transparent background colors, again set using RGBa. The transparency of the window content depends on the implementation of the content type. For example, notes are slightly semi-transparent when inactive, but the visualization views are opaque.
The semi-transparent window borders were tested and work with Firefox 3.6, Chrome 6 and Safari 5. Choosel is not designed for Internet Explorer (up to version 8).
Google Maps is a great way to show location-based data on a map. In Choosel, we implemented a generic map widget which leverages Google Maps. This can for example be used to visualize the locations of recent earthquakes. Choosel also supports multiple coordinated view with selections and highlighting of items across different views (see Video):
However, occlusion in the map becomes a problem when trying to highlight resources across views. For example, when highlighting a particular earthquake in the timeline, it might be hidden by other earthquake overlays which are displayed on top of it in the map. The z-index of the earthquake overlay in the map would need to be adjusted such that the earthquake is displayed on top while being highlighted, but this is not directly possible using the Google Maps API 1.0 for GWT.
I implemented a custom Overlay class that uses a GWT label to display a data item. Using a GWT widget in the custom overlay has several advantages: (1) we can change the CSS styling, including the z-index, (2) we can use standard GWT event handlers, and (3) we don’t need to load images.
Before, we used the MapIconMaker from the gmaps utility library. The CSS based approach has some cross-browser limitation, e.g. rounded corner on IE, but it is faster because no images are loaded any more. However, the z-index changes outlined here are possible with any GWT widget, so switching to an Image widget should be easy.
This are the main elements of the LabelOverlay implementation used in Choosel:
public class LabelOverlay extends Overlay {
private Label label;
private LatLng latLng;
private MapWidget map;
private Point offset;
private MapPane pane;
private Point locationPoint;
public LabelOverlay(LatLng latLng, Point offset, String text, String styleName) {
@Override protected final void redraw(boolean force) { /* * We check if the location has changed, because * Google Maps allows infinite panning along the * east-west-axis and requires an updated widget * location in this case, although it will not * force redrawing. */ Point newLocationPoint = map.convertLatLngToDivPixel(latLng);
if (!force && sameLocation(newLocationPoint)) { return; }
updatePosition(newLocationPoint); }
@Override protected final void remove() { label.removeFromParent(); }
I will present a poster on the Choosel Framework at IEEE InfoVis 2010. The main goal of the Choosel project is to enable software developers and researchers to easily create web-based visual data exploration environments for novices. The poster paper briefly summarizes some of the related work, the features of Choosel, and the results of a prelimary usability evaluation:
Since information visualization has become increasingly vital to experts, it is now important to enable information visualization novices to consume, construct, and coordinate visualizations as well. Choosel is a web-based environment that aims at facilitating flexible visual data exploration for information visualization novices. It supports the iterative construction of multiple coordinated views during the visual data analysis process. A preliminary user study with 8 participants indicated that multiple windows, enhanced drag and drop interaction, and highlighting of items and sets, in particular, support novices in the visual data exploration process in a useful and intuitive way.
I presented Choosel to the Visual Interaction Design (VisID) research group at the University of Victoria. Choosel is an open-source framework for web-based information exploration environments aiming at information visualization novices.
The first part of my presentation focused on several design decision behind Choosel. The framework is targeting information visualization novices - those who are not familiar with information visualization and visual data analysis beyond the graphics encountered in everyday life. Two major design decision we made based on those constraints is choosing the web as the target platform and developing Choosel using GWT.
We assumed that those information visualization novices are more likely to look at smaller data sets (up to 5000 items), but are not willing to spent much time getting started with visual data analysis. This was the main driver behind the decision to develop a web-based environment, because this spares user the burden of installing software. We considered removing this entry barrier more important then scalability beyond several thousand data items. As our main goal was to a provide interactive information exploration environment, responsiveness was important and we decided to use primarily technology that runs on the user's computer and not on the server.
In Choosel, we leverage third party visualization components and toolkits such as the Simile Timeline, Protovis and FlexViz. In order to be able to integrate different technologies such as Flash and JavaScript in the browser, we decided to use a JavaScript based technologies. First, we developed a initial prototype using the dojo toolkit. However, it turned out that because of our software development skills and tool support for unit testing, refactoring, and debugging, we were able to develop the same prototype using GWT in about a quarter of the time. The current version of Choosel is based on GWT.
Choosel supports the creation of web-based information mashup environments. These mashup environments facilitate the flexible recombination of information in different views such as maps, timelines and graph viewers. Users without any programming expertise can remix information using drag and drop interaction and explore data sets. The workspaces (mashups) can be stored and shared among users.
We are looking for contributors. If you are interested, please post on the choosel mailing list.
As part of my PhD research, I am looking at ways to make visual data analysis more accessible to end users without data analysis expertise. Specifically, I am researching how they can easily coordinate multiple visualizations. This has led to the development of web-based visual analytics research prototype, which I evaluated in a user study. The results indicate that novel concepts such as drop target highlighting, drop previews and using multiple user defined sets are useful and easily usable for end users.
I presented the tool and the results (see poster and presentation below) at the IBM University Days 2010. A version of the visual analytics environment that is tailored to exploring biomedical ontologies is available at: bio-mixer.appspot.com
Bio-Mixer is a web-based environment that supports the flexible exploration of biomedical ontologies. The concepts in the ontologies and their mappings can be explored in different views such as graph views, lists and timeline views. Drag-and-drop interaction can be used to show items and collections in different views, to create filtered views and to synchronize selections. Bio-Mixer enhances drag and drop with a new drop target highlighting and preview approach to make working with multiple collections and views easy. Bio-Mixer also provides support for ontology annotation and workspace sharing between collaborators.
Software developers perform different kinds of analytical activities. For example, they want to find out which code might be affected by a change, which change caused a bug or build failure, or which source code was changing in work items related to performance issues. Similarly, project managers might want to learn from the latest iteration of product development by analyzing produced artifacts, e.g. work items, source code and build results. There are many tasks in software engineering that would benefit from tools that enable the flexible and integrated analysis of information stored in different places such as issue trackers, source code repositories, and requirements documents.
Too often, software engineering (SE) tool research is focused on creating small, stand-alone tools that address rarely understood developer needs. We believe that research should instead provide developers with flexible environments and interoperable tools, and then study how developers appropriate and tailor these tools in practice. Although there has been some prior work on this, we feel that flexible tool environments for SE have not yet been fully explored. In particular, we propose adopting the Web 2.0 idea of mashups and mashup environments to support SE practitioners in analytic activities involving multiple information sources.
