Remote Remote VisualizationVisualizationExplorations of Ajax & Web ServicesExplorations of Ajax & Web Services

OverviewOverview

Yahoo Pipes AJAX (Asynchronous Yahoo Pipes AJAX (Asynchronous JavaScript and XML) Dynamic Workflow JavaScript and XML) Dynamic Workflow VisualizationVisualization

Charge Density Visualization ClientCharge Density Visualization Client Image Generating ServletImage Generating Servlet Portlet InterfacePortlet Interface

JavaScript 3DJavaScript 3D Introduction to Visualization (China 2007)Introduction to Visualization (China 2007)

Yahoo Pipes ReviewYahoo Pipes Review

Dynamic workflow generation focus of Dynamic workflow generation focus of VLab requires an intuitive interfaceVLab requires an intuitive interface Allow user to observe, modify, and create Allow user to observe, modify, and create

workflowsworkflows

Yahoo Pipes offers an attractive workflow Yahoo Pipes offers an attractive workflow generation interfacegeneration interface http://http://pipes.yahoo.compipes.yahoo.com

Pipes ReviewPipes Review

Initial ReactionInitial Reaction Slow, Slow, SlowSlow, Slow, Slow

Recently, yahoo has improved the Recently, yahoo has improved the performance of the object connector performance of the object connector animations.animations.

Light Weight Pipes Light Weight Pipes RemakeRemake

Prototyped light weight versionPrototyped light weight version http://www.gorerle.com/vlab-wiki/index.php?thttp://www.gorerle.com/vlab-wiki/index.php?t

itleitle==AJAX_Scientfic_Workflow_Application:DevelAJAX_Scientfic_Workflow_Application:Developer_Guideoper_Guide

Built on Script.aculo.us and Prototype Built on Script.aculo.us and Prototype JavaScript libraries.JavaScript libraries. Famously integrated into Ruby on RailsFamously integrated into Ruby on Rails

Charge Density Charge Density Visualization Client (CDC)Visualization Client (CDC)

VLab Portal using Gridsphere 2.1VLab Portal using Gridsphere 2.1 Visualization Services automatically Visualization Services automatically

generated by WATT (Web Automation generated by WATT (Web Automation Translation Toolkit) CompilerTranslation Toolkit) Compiler

Web Service accessed via ServletWeb Service accessed via Servlet Servlet Accessed via JSR-168 PortletServlet Accessed via JSR-168 Portlet

Charge Density ServletCharge Density Servlet

TechnologiesTechnologies: Maven2, WSDL2Java, Java : Maven2, WSDL2Java, Java Servlet Library, Java Reflection LibrariesServlet Library, Java Reflection Libraries

Three OutputsThree Outputs text/HTMLtext/HTML img/pngimg/png 500 Internal Server Error w/ Msg500 Internal Server Error w/ Msg

Access using query stringAccess using query string http://lilli.msi.umn.edu:8080/vlabportlets/cdc_servlethttp://lilli.msi.umn.edu:8080/vlabportlets/cdc_servlet

Charge Density PortletCharge Density Portlet•Custom JavaScript object interacts with the CDC Servlet

•Features

•Quick Views

•Custom Views

•Atoms, Volume, Contours, Cut Plane, & Bounding Box On/Off switches

JavaScript 3DJavaScript 3D

Motivation : Charge Density ClientMotivation : Charge Density Client Need an intuitive way to do custom rotations Need an intuitive way to do custom rotations

of visualizationof visualization

LimitationsLimitations JavaScripts inherently poor performanceJavaScripts inherently poor performance Limited information about the visualized dataLimited information about the visualized data Poor cross-browser compatibilityPoor cross-browser compatibility

JavaScript 3D JavaScript 3D ImplementationImplementation

Started with pre-built 2D vector graphics library Started with pre-built 2D vector graphics library written by Walter Zorn.written by Walter Zorn. http://www.walterzorn.com/jsgraphics/jsgraphics_e.htmhttp://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Implemented basic 3D geometry projectionsImplemented basic 3D geometry projections Implemented basic 3D geometry point rotationsImplemented basic 3D geometry point rotations Used point project and rotation to create cube Used point project and rotation to create cube

and sphere objectsand sphere objects Integrated vector graphics library to draw lines Integrated vector graphics library to draw lines

to each projected 2D pointto each projected 2D point

JavaScript 3D Next StepJavaScript 3D Next Step

Future work will deal with integrating Future work will deal with integrating event listeners to perform trackball style event listeners to perform trackball style rotations based on user mouse rotations based on user mouse interactions with 3D canvas.interactions with 3D canvas.

Performance Optimizations to make this Performance Optimizations to make this application viable on today's browsers application viable on today's browsers and computersand computers

Introduction to Introduction to VisualizationVisualization

Spent month in china working with various Spent month in china working with various students and professorsstudents and professors

Gave presentation on visualizationGave presentation on visualization Importance of VisualizationImportance of Visualization Common ToolsCommon Tools Tool DemosTool Demos Common TechniquesCommon Techniques

Get materials onlineGet materials online http://www.martin-lyness.comhttp://www.martin-lyness.com

ConclusionConclusion

Yahoo Pipes ReviewYahoo Pipes Review Charge Density Client InterfaceCharge Density Client Interface JavaScript 3DJavaScript 3D Introduction to Visualization PresentationIntroduction to Visualization Presentation