Download Bridgeworks Schools - Bridgeborn Developer Portal

Bridgeworks Schools
Instructive & Practical Information for
Working with the Bridgeworks System
Kevin Curry
Chief Scientist
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 1
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
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 2
Motivation: We Can Get There Together
<?xml version="1.0" encoding="UTF-8"?>
<?bw onLoad="initialize"?>
<?bwinclude url="./DefaultPreferences.xml"?>
<Scene>
<Isolator name="Root" isolateTransforms="true">
<PerspectiveCamera name="Camera" zoom="3.2" nearDistance=".25" farDistance="4000">
<position x="0" y="0" z="-3"/>
</PerspectiveCamera>
<Group name="Lights">
High-fidelity 4D models
Graph & Chart Layouts
<GlobalIllumination name="GlobalLight">
<ambient r=".25" g=".25" b=".25"/>
</GlobalIllumination>
<DirectionalLight name="Light">
<ambient r="0.7" g="0.7" b="0.7"/>
<diffuse r="1" g="1" b="1"/>
<specular r="1" g="1" b="1"/>
<rotation x="30" y="-25" z="0"/>
</DirectionalLight>
+
Geospatial
=
</Group>
<Group name="Models">
Here are just a few examples
<Model name="UV_BoxG2" url="/objects/UV_BoxG.lwo" enableSharing="false">
<position x="1" y="1" z="0"/>
<rotation x=“45" y=“45" z=“45"/>
> Result Set
Web Service Interface </Model
XML
The ENTIRE XSLT
The View
</Group>
</Isolator>
©2007; All materials property of Bridgeborn
Page 3
<RenderDirective name="RenderDirective" root="Root"
www.bridgeborn.com
antialiasType="0" antialiasWaitTimeMs=“1000“
backgroundImageFilename="images\Sky2.jpg"/>
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
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 4
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)
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 5
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
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 6
Fundamentals: Basic Concepts
From BwSchools
Getting Started
Create a scripted browser application:
Insert the Bridgeworks control into an HTML page
using the <OBJECT> 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 applicationspecific messages using the <SendMessage> Command.
• Messages describe events and states
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 7
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)
–
•
•
•
•
From BwSchools
Attribute Targeting
Nodes
Evaluators
Directives
Commands
Schemata
GetAttribute/SetValue pattern enables Attribute setting given an Attribute name and a value (i.e., a simple XML
deserialize any Bridgeworks object)
Parser can
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
–
This is analogous to the use of JPEGs or PNGs in HTML images
machines that encapsulate algorithms; Attribute
values can be set from Evaluator output
Models
–
Bridgeworks uses 3rd party, binary 3D files for high-fidelity Models; Lightwave and ArcView Shape are supported
• <img src=“images/banner.jpg”/>
=
<Model url=“objects/truck.lwo”/>
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
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 8
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
•
transform it into a viz
Sometimes we load high fidelity models and script actions and behaviors
data from Web Services (business intelligence) and
around domain tasks (training, process monitoring/management)
From BwSchools
Labels
Scripting
Stand Alone
Demos
URL Tests
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 9
Building Blocks: Anatomy of a Scripted App

Bridgeworks
Runtime Engine
Javascript


Sometimes we
connect to data
sources through
Web Services
Scripted
DHTML
Control
Panel
Bridgeworks
is created in
a window in
the page
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
Bridgeworks Window
 Everything on
Sample DHTML Div, for example, a table
the page is
scriptable and
accepts XML
Web Page
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 10
Building Blocks: Guts of a Scripted App
Create Bridgeworks Control using JavaScript
 Bridgeworks.ReceiveMessage(string xml);
 This
instantiates
Bridgeworks
And the
followingthe
output
interface: Object with
the following input interfaces:msg);
 Bridgeworks.SendMessage(string
ReceiveMessage(string xml);
SendMessage(string xml/filename);
msg);
 Bridgeworks.UpdateScene(string
UpdateScene(string xml/filename);
Bridgeworks integrates like any simple input/output machine that
Interface
from Bridgeworks
to JavaScript
passes
an agreed
upon, in this case
ubiquitous, I/O format…XML
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 11
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
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 12
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 BwSchools
E. Coli
g.licio.us
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 13
Reversing Engineering E. coli: Anatomy
CDC HTML Page
(Data as free text)
http://www.cdc.gov/ecoli/2006/september/updates/
Bridgeworks
Web Developer
Get
Updates
Bridgeworks Markup
Bridgeworks
Runtime Engine
Javascript
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 14
Reverse Engineering E. coli: Key Elements
• 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 site
• Implemented using JavaScript
• Built it over the weekend
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 15
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
<AutoInterpolate duration="2" target="Arizona">
<color r=".9" g=".9" b=".9"/>
<scale x="1" y="1" z="1"/>
</AutoInterpolate>
•
•
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:
<SendMessage event=“Mouse.Hover" numResponses="-1" target="Bridgeworks_CB"
get="Selector/Selected"/>
•
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
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 16
Reversing Engineering g.licio.us: Anatomy
Endpoints
http://del.icio.us/network/USER
del.icio.us DB(s)
(for retrieving user’s network)
https://api.del.icio.us/v1/
del.icio.us
(for retrieving users’s tag sharing data,
authenticated)
http://del.icio.us/feeds/json/tags/
Bridgeworks
Runtime Engine
©2007; All materials property of Bridgeborn
www.bridgeborn.com
(for retrieving
user’s tags and tagcounts)
Javascript
Page 17
Reverse Engineering g.licio.us: Key Elements
• Graph visualizations of social networks in
del.icio.us
• Demonstrates 3 graph types: Radial Tree,
Force-directed Graph, & Cone Tree
• Implemented using JavaScript, some
asynchronous (AJAX)
• Consumes data from del.icio.us Web Services
• Built ver. 1 in a day
Back to Anatomy
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 18
Reverse Engineering g.licio.us: Breakdown
• All the script for g.licio.us is in the HTML page; right-click
to view source
• 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)
• 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 things
• 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)
Back to Anatomy
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 19
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
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 20
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-ofbusiness 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.
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 21
RIV: Retail Web Services
Web Service Interface
A View
XML Result Set
Web Service Interface
XML Result Set
The ENTIRE XSLT
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 22
A View
The End
Contact:
[email protected]
757.437.5000
©2007; All materials property of Bridgeborn
www.bridgeborn.com
Page 23