1. ©2007; All materials property of Bridgeborn Page 1 www.bridgeborn.com Bridgeworks Schools Kevin Curry Chief Scientist Instructive & Practical Information for Working with the Bridgeworks System

2. ©2007; All materials property of Bridgeborn Page 2 www.bridgeborn.com Motivation: Why do you care? You and your customers need relief from an unprecedented burden of information and information technology You and your customers know that visualization is great for relieving strain caused by too much information Integrating visualization as a core capability for line-of-business is hard Bridgeworks is making it easier for you to bring visualization platform to your line of business

3. ©2007; All materials property of Bridgeborn Page 3 www.bridgeborn.com Motivation: We Can Get There Together High-fidelity 4D modelsGraph & Chart LayoutsGeospatial Here are just a few examples =+ Web Service InterfaceXML Result SetThe ENTIRE XSLT The View

4. ©2007; All materials property of Bridgeborn Page 4 www.bridgeborn.com Lesson Plan Fundamentals –We will talk about what Bridgeworks is and what it isn’t –We will demonstrate some basic concepts free of context –We will talk about how these concepts apply to your needs Building Blocks –We will step through a basic process for assembling Bridgeworks elements into an application –We will talk about how to use this process for your purposes Reverse Engineering E. coli and g.licio.us (say what?) –We will deconstruct and show you exactly how we made the e. Coli and g.licious demos –We will talk about how the elements of these demos apply to your needs Rapid Information Visualization –We will show you how we created and attached Web Services to customer data in order to extract, transform, and load customer data into dynamic, interactive, multi-dimensional mash-ups –We will talk about how to make this process work for you

5. ©2007; All materials property of Bridgeborn Page 5 www.bridgeborn.com Fundamentals: Bridgeworks is… Bridgeworks is a software platform for enabling visualization as a core capability in your business Bridgeworks is a lightweight (< 5MB) runtime engine that accepts XML as input for dynamically creating, updating, and interacting with multi-dimensional, rich media Bridgeworks is used for building applications that combine data with views Bridgeworks is extensible through client-side scripting Bridgeworks is extensible through a C++ API Bridgeworks is versatile ; we use it in loosely-coupled, lightweight apps and tightly integrated, enterprise platforms (Bridgeworks is right here, click to get it)here

6. ©2007; All materials property of Bridgeborn Page 6 www.bridgeborn.com Fundamentals: Bridgeworks isn’t… A domain application A simulation A domain library of analytic models (although it does expose a few reusable algorithms through an extensible Evaluator pattern in the API) Yet ported to Unix, Linux, or Mac Free, except for personal, non-profit use* * Not sanctioned by Bridgeborn as a complete declaration of terms

7. ©2007; All materials property of Bridgeborn Page 7 www.bridgeborn.com Fundamentals: Basic Concepts From BwSchoolsBwSchools Getting Started Create a scripted browser application : Insert the Bridgeworks control into an HTML page using the tag and client-side scripting language like JavaScript To create a Windows client application: Instantiate a Bridgeworks object using the C++ library (not covered here) To create a Java client application: Instantiate a Bridgeworks object through the Bridgeworks Java-Native Interface (JNI) (not covered here) Manipulate Bridgeworks in a scripted application : 1.Pass XML messages into Bridgeworks the using Bridgeworks.UpdateScene interface 2.Receive XML messages from Bridgeworks by implementing Bridgeworks::ReceiveMessage interface 3.Respond to Bridgeworks messages or create application- specific messages using the Command. Messages describe events and states

8. ©2007; All materials property of Bridgeborn Page 8 www.bridgeborn.com Fundamentals: Base Elements Attributes, Objects, & Collections –Everything in Bridgeworks, even primitive types, is an Object –Objects have Attributes ; most Attributes’ values can be modified (set) –Objects can be stored in Collections (ex., a list) –GetAttribute/SetValue pattern enables Attribute setting given an Attribute name and a value (i.e., a simple XML Parser can deserialize any Bridgeworks object ) Nodes, Directives, & Evaluators –Some Objects are Nodes ; Nodes can be arranged into graphs –Graphs and subgraphs can be traversed by Directives ; Directives check and set the state of Nodes they traverse –Some Nodes are Evaluators ; Evaluators are simple input/output machines that encapsulate algorithms ; Attribute values can be set from Evaluator output Models –Bridgeworks uses 3 rd party, binary 3D files for high-fidelity Models ; Lightwave and ArcView Shape are supported –This is analogous to the use of JPEGs or PNGs in HTML images = Commands –Some Objects are Commands ; Commands can be Executed to perform actions ; Commands can be triggered by Attribute values or user-defined Events (Bridgeworks defines some of its own Events) Documents –Everything in Bridgeworks can be expressed through XML documents and fragments; Bridgeworks Markup Language –Bridgeworks ML is declared in a library of public schemata (XSD) –Everything in Bridgeworks can be changed dynamically at runtime, without prepackaging or compiling contents From BwSchoolsBwSchools Attribute Targeting Nodes Evaluators Directives Commands Schemata

9. ©2007; All materials property of Bridgeborn Page 9 www.bridgeborn.com Building Blocks: Scripted Browser Applications You can deploy online and offline browser applications that use Bridgeworks; we use an ActiveX control for Internet Explorer We use lightweight client and/or server side scripting languages to implement domain tasks around domain applications We use XML and XSLT to transform domain data into Bridgeworks Markup and/or to insert domain data into Bridgeworks Objects Sometimes we consume data from Web Services (business intelligence) and transform it into a viz Sometimes we load high fidelity models and script actions and behaviors around domain tasks (training, process monitoring/management) From BwSchoolsBwSchools Labels Scripting Stand Alone Demos URL Tests

10. ©2007; All materials property of Bridgeborn Page 10 www.bridgeborn.com Building Blocks: Anatomy of a Scripted App  Bridgeworks is created in a window in the page  Everything on the page is scriptable and accepts XML  Sometimes we connect to data sources through Web Services  We often get data from Services through script, but we also load it off the local machine and/or use common adapters to connect Bridgeworks directly to sources

11. ©2007; All materials property of Bridgeborn Page 11 www.bridgeborn.com Building Blocks: Guts of a Scripted App Interface from Bridgeworks to JavaScript Create Bridgeworks Control using JavaScript  This instantiates the Bridgeworks Object with the following input interfaces:  SendMessage(string msg);  UpdateScene(string xml/filename);  And the following output interface:  ReceiveMessage(string xml);  Bridgeworks.ReceiveMessage(string xml);  Bridgeworks.SendMessage(string msg);  Bridgeworks.UpdateScene(string xml/filename); Bridgeworks integrates like any simple input/output machine that passes an agreed upon, in this case ubiquitous, I/O format…XML

12. ©2007; All materials property of Bridgeborn Page 12 www.bridgeborn.com Building Blocks: Outside-the-Browser Apps You don’t have to use a browser to use Bridgeworks. You can write Java apps around Bridgeworks using the JNI Bridge* You can also embed Bridgeworks windows in Microsoft Office™ applications and use Office integration techniques You can use the C++ API directly or get to Bridgeworks through the Win32 COM Bridge Flex and Apollo, and other so-called Rich Internet Application (RIA) platforms are on the radar In all cases you still use those 3 interfaces simple interfaces to pass data and messages back and forth to Bridgeworks * Again, this is in the lab. It is scheduled for deployment it in version 2.3

13. ©2007; All materials property of Bridgeborn Page 13 www.bridgeborn.com Reverse Engineering E. coli and g.licio.us E. coli and g.licio.us are web apps that mash-up data on the Internet and visualize it. From BwSchoolsBwSchools E. Coli g.licio.us

14. ©2007; All materials property of Bridgeborn Page 14 www.bridgeborn.com Reversing Engineering E. coli: Anatomy

15. ©2007; All materials property of Bridgeborn Page 15 www.bridgeborn.com Hybrid Geo-spatial and Bar Chart viz of 2006 E. coli Spinach Outbreak Bridgeworks Web Developer created a dashboard, then hand-collected daily updates from free text found on a CDC web sitea CDC web site Implemented using JavaScript Built it over the weekend Reverse Engineering E. coli: Key Elements

16. ©2007; All materials property of Bridgeborn Page 16 www.bridgeborn.com Reverse Engineering E. Coli: Breakdown Uses Cartographic Boundary data from U.S. Census –(ESRI ArcView Shape format) Extrudes and colors state boundaries by applying reported case totals to the Y axis of the state’s scale Attribute Updates also stylize Bridgeworks, telling it to interpolate (animate) between values When user steps through each reported day with buttons the script sends a sequence of AutoInterpolate Commands into Bridgeworks using Bridgeworks.UpdateScene SendMessage Commands are triggered by Mouse.Hover Events to serialize data in selected Object and send it to the script: Bridgeworks::ReceiveMessage loads the message into a DOM and uses data in the message to configure a RasterLabel that appears when the user hovers the mouse over a state

17. ©2007; All materials property of Bridgeborn Page 17 www.bridgeborn.com Reversing Engineering g.licio.us: Anatomy Endpoints http://del.icio.us/network/USER (for retrieving user’s network) https://api.del.icio.us/v1/ (for retrieving users’s tag sharing data, authenticated) http://del.icio.us/feeds/json/tags/ (for retrieving user’s tags and tagcounts)

18. ©2007; All materials property of Bridgeborn Page 18 www.bridgeborn.com Graph visualizations of social networks in del.icio.us del.icio.us Demonstrates 3 graph types: Radial Tree, Force-directed Graph, & Cone Tree Radial Tree Force-directed GraphCone Tree Implemented using JavaScript, some asynchronous (AJAX) Consumes data from del.icio.us Web Servicesdel.icio.us Web Services Built ver. 1 in a day Reverse Engineering g.licio.us: Key Elements Back to AnatomyAnatomy

19. ©2007; All materials property of Bridgeborn Page 19 www.bridgeborn.com All the script for g.licio.us is in the HTML page; right-click to view sourcethe HTML g.licio.us uses 3 XML files as templates for the 3 types of graph (not necessarily optimal, but it’s just a demo) Network data comes from del.icio.us as JSON – JavaScript Object Notation; we’re experimenting with the XML response API (del.icio.us has RSS feeds you can use, too, and HTML feeds …but the HTML is not well-formed )JSON g.licio.us script calls http://del.icio.us/feeds/json/network/ recursively to build a graph of a given del.icio.us user’s network, among other thingshttp://del.icio.us/feeds/json/network/ For a chosen graph-type, the script loads a graph template into a DOM and uses the DOM to create new nodes for the graph as Bridgeworks Markup (XML)Bridgeworks Markup Reverse Engineering g.licio.us: Breakdown Back to AnatomyAnatomy

20. ©2007; All materials property of Bridgeborn Page 20 www.bridgeborn.com Re-Engineering g.licio.us: Try it yourself! Visualize more than just a social network…you can visualize relationships among words used as tags –Or maybe you can see how to apply this method to the output of natural language processors/analyzers… Traverse larger graphs by dynamically pulling in new depths as you click on and otherwise navigate the graph Tie in other del.icio.us service outputs to the viz –Create a right-click menu, that when clicked on a given user: Pops-up his/her top 10 most recent tags Pops-up his/her top 25 tags as a tag cloud

21. ©2007; All materials property of Bridgeborn Page 21 www.bridgeborn.com Rapid Information Visualization 1.Get data however you can 2.Tag it! (if you can…so you don’t lose track of it) 3.Use common adapters that can get at data and break data out as XML on demand (or by creating cache rules) i.e., from relational DBs, Office Documents, UML models, just to name a few 4.Wrap the data with a service having interfaces that answer key line-of- business questions Return XML from the service 5.Use script and XSLT to manipulate and transform service output into presentation and interaction markup “Presentation and interaction”…meaning not only Bridgeworks! Any presentation and interaction technique worth its salt can and should support this process for ingesting data into views. Bridgeworks didn’t define this process…it fit into it.

22. ©2007; All materials property of Bridgeborn Page 22 www.bridgeborn.com RIV: Retail Web Services Web Service InterfaceXML Result SetThe ENTIRE XSLT A View XML Result Set Web Service Interface A View

23. ©2007; All materials property of Bridgeborn Page 23 www.bridgeborn.com The End Contact: kcurry@bridgeborn.com 757.437.5000