From CS294-10 Visualization Fa08

Jump to: navigation, search


Part 1: Storyboard

The Global Exergy Systems Navigator is an interactive map of the global flows of exergy through human systems, illustrating how the world uses exergy. It is intended for lay audiences, policy makers, and researchers alike: anyone who would like to better understand the complex mechanisms by which we convert natural energy resources in to end-uses.

The Exergy Navigator tracks exergy through human exergy systems. Exergy is a thermodynamic term that describes the useful portion of energy, the fraction of energy that can be used to do work. For example, gasoline can be burned to run an automobile engine; much of its energy can be used to do useful work and therefore gasoline is an exergetic fuel. By contrast, the heat produced by that engine is a form of energy, but has very little useful potential for work, and so has very little exergy. Tracking exergy, we can more clearly identify opportunities to increase the efficiency of the human energy system.


Data for the Exergy Navigator were collected from dozens of reference sources such as International Energy Agency and UN databases, scientific journals, and government reports. Because the Exergy Navigator is essentially a collection of referenced interrelated data about the exergy system, it does not possess predictive power. It is neither an energy-systems simulator nor can it simulate future trends in energy use. The Exergy Navigator offers a detailed picture of how the world currently uses energy. All the data that make up the navigator are of two types: carriers and transformations of exergy. Carriers and transformations alternate in sequences through the energy system.

A carrier is the medium in which exergy is stored. Examples include:

1. Primary resources such as coal, natural gas, wind, and solar radiation.
2. Intermediate carriers such as electricity and gasoline.
3. End-uses such as heat for cooking, mechanical work from appliances, and vehicle propulsion.

Each carrier entry in the database contains relevant metadata such as total contained exergy, a detailed description of its role in the global exergy system, as well as references to the data’s published source.

Transformations use exergy to convert one carrier into another and always result in a net loss in exergy. Examples of transformations include:

1. Various power plants, which convert input carriers such as coal and uranium into electricity.
2. Agriculture, which takes plants and exergy from gasoline, electricity, etc as inputs to create raw food, textiles and solid biofuels.
3. Food processing, which converts raw food into processed food using various exergy sources.
4. Metabolism, which converts raw and processed food into human mechanical work and waste.

Each transformation entry in the database contains relevant metadata about it such as a detailed description of its role in the global energy system, the names and exergy/carbon values of its input and output carriers, and average efficiency based on the aggregate of exergy inputs and outputs.


One of the most important messages I would like to convey with this data set is just how complicated and interconnected it is. I would like the user to truly appreciate the trouble we go to in converting natural resources into energy services. When you turn a light bulb on, for example, a long chain of exergy conversions occur to make that possible. An example scenario is that coal is mine from the ground, purified, combusted in a coal-fired power plant to produce electricity which is transmitted to your home, which powers the light bulb. Dozens of similar scenarios produce power for lighting since we produce electricity from many natural resources.

To convey this complexity, I've decided to show all the nodes (exergy carriers and exergy transformations) and connections in the system at once - in a single view. This immediately gives the user a sense of the number of nodes and interconnectedness in the system. With this much information on screen, there really is no room to label all of them, so I suggest an interaction where the user hovers over any carrier or transformation, and the connections leading to adjacent nodes and the nodes themselves become highlighted and labeled. This way the user can simply move the curser over the visualization and immediately begin to learn about the connections between exergy carriers and transformations. If the user clicks on a node, a pop up dialog box appears to give more information about it such as its magnitude and other metadata.

To the right of this visualization is a search dialog which provides real-time searching of carriers and transformations, as well as a scrollable list. The user can either look for a carrier or transformation by name or browse the alphabetical list to see what's available. Clicking on an item in the list highlights it in the view. This list can also be quickly filtered to show only transformations or carriers. Popular searches are saved below so that people can jump right into what others have found most interesting (optional).

Default View: All carriers and transformations are visible and unlabeled.

Hover View: Any carrier or transformation you hover over and all adjacent nodes are labelled and connections are highlighted

Item Details: Clicking on any node pops up a dialog box with information about that carrier or transformation. (optional)

Future Directions

The proposed visualization focuses on conveying the complexity of the global exergy system. However, it doesn't give a quantitative picture of exergy carriers or transformations and their relationships. For the final project, I intend to continue this work in developing an interactive drill-down visualization for exploring the quantitative specifics of each carrier and transformation.

Part 2: Working Visualization

The Energy Navigator can be found here

Part 3: Report

Description of Final Application

The application consists of two main visual components: the navigation bar and the visualization.


The data that drive this visualization were exported from a MySQL database into GraphML format using Ruby on Rails. This was necessary to allow Flare access to the information about the nodes and connections.

Navigation Bar

The navigation bar allows you to perform real-time searching and filtering of the carriers and transformations displayed in the data grid below. Real-time string searching is performed as the user types in the search field. Users can also use the filter buttons to limit the items in the data grid by node type (exergy carrier or transformation) or by the "position" in the global energy system of a node (primary, intermediate, end-use carrier or transformation). Text searches and filtering can be combined as well.

Exergy carriers are represented as blue dots. Exergy transformations are encoded as small bar graphs whose height represents the overall efficiency of that transformation.

Finally, a tally of the currently visible carriers and transformations in the data grid is displayed in real-time below.


The visualization portion of the application, to the right of the navigation bar, encodes all carriers and transformations in the data set as a node-and-edge model. When a user hovers the cursor over any node, that node's connections are highlighted in high contrast red (for inputs) and green (for outputs). Arrowheads at the end of the edges also encode connection directionality. Carriers and transformation nodes are encoded identically in the visualization as they are in the navigation bar. In fact, even the interaction is identical: hovering over a carrier or transformation listed in the data grid highlights that node's connections in the visualization. This was done to provide a consistent user experience across the two major visual components of this application.

Changes from Storyboard to Implementation

Most of what was described in the original storyboard was implemented in the final application. Designing a layout algorithm to minimize edge crossings and place the nodes in their appropriate sections (primary, intermediate, end-use) was much harder than anticipated. Two interdependent methods were attempted: modifying a force-directed layout and enhancing a tree layout by calculating and including max-depth information about each node. As a result, we had to settle on a random layout of the nodes. Also, labeling highlighted nodes was causing a lot of bugs, so we had to omit that in this version.

The most significant addition not mentioned in the storyboard is encoding the transformation nodes a as small bar graphs depicting that transformation's total efficiency. Originally we had intended to visualize transformation nodes as simply circles of a different color. The current method is much more data-dense and informative. We also added the ability to filter by node "position" as well as by node type (carrier or transformation). This affords the user finer control in filtering the data. Finally, we added the carrier and transformation tally at the bottom of the data grid.

Development Process and Division of Labor

Jeremy and Ljuba spent approximately 20-30 hours each on this project. The work was divided to make best use of our different skills:

Ljuba's contribution was to conceive the application storyboard and lay it out in Flex. He was responsible for exporting the database information into GraphML format and doing an early import of the data as a node-and-edge visualization using Flare. He also implemented the navigation bar and most of its features. Finally, Ljuba guided most of the design decisions such as layout as well as color and line style selection.

Jeremy's contribution was in implementing the visualization portion of the application. He is responsible for analyzing the graph structure and processing data on load that will be used for the intellinget layout (although the current layout is just random and does not yet use these data). Jermemy implemented the interactivity with the nodes (hilighting on mouseover, etc). He is also responsible for implementing the node renderers in the data grid and visualization.

Bundled Source Code

The Flex Builder project can be downloaded here. The only additional requirement to building this project is the Flare library.

[add comment]
Personal tools