Andrew Trice
Real-World Rich Internet Applications
Wednesday August 15, 2007
360|Flex: Programmatic Visualizations
Finally, what you all here at the conference have been waiting for... Here's the content from my 360 Flex presentation on Monday: Programmatic Visualizations. Just to be clear, these are simplified examples of using the drawing API for data visualization. There are contless variations that you can produce to create meaningful visual representations of your data. My intent is that these can help you create and expand your own ideas. To create real-world enterprise-level applications, you'll definietly need to go a few steps further to optimize performance, manage memory, and maximize the user experience. I had a lot of fun writing these examples, and I appreciate the great feedback that I've gotten so far.
Basic Drawing
My first example is a basic drawing application. It just shows how to use the drawing api in a very simple "paint" style applications.
Dynamic Coloring
My second example shows you how to use the drawng API to visualize data states. It extends the mx:Canvas control to draw a background color that is depenant upon data that is passed into it. A similar approach for color coding could have been used simply by binding the "backgroundColor" style to a color value. I used the drawing API in this example to add the gradient overlays to provide some depth. FYI: The icons are not included in the source distribution b/c you have to license them. This will work with any other kind image though.
Relationship Mapping
This example extends from the concepts of dynamic coloring, and takes it a few steps further. This example will show you how to use the drawing API to create a visual association between nodes of related data. The nodes are based off of the renderers in the previous example. The rest of the code shows you how to simply loop over a collection of links and create these associations simply based upon graphics.lineTo and graphics.moveTo. This is based of a previous study of mine on visualizing relationships in Flash.
Minimaps
This example takes the previous example and shows you how to use image manipulation functions to make scaled copies of your flex components. It shows you how to utilze the bitmapData.draw function and matrices to manipulate and create new kinds of interfaces. This example is based off of a previous study of mine on: Real time thumbnails of Flex components
Custom Charting
This example was really fun to write. Its a baseline that can be used for a custom charting framework. There are 3 different kinds of charts in here: A gradient column chart, a gradient line chart, and a variable-radius pie chart. All of these were designed to show off the drawing API. A full chart implementation would need labels, and some more error checking, but it is a good start nonetheless. The gradient column chart is designed such that the gradient can be applied either per column or for the entire chart. The gradient line chart shows you how to draw a line chart where the line uses a gradient drawing fill. The variable radius pie chart is a variation from the normal pie chart. Each pie wedge has the same arc size/width, but the radius varies dependant upon the value of the item in the data provider. The radial pie chart uses the Pen class from the actionscript cookbook. You gotta buy the book to get that class... sorry.
Custom Grid Renderers
My next example is based on a previous blog entry for creating datagrid charts for visual representation of data. You can find more about that here: Thinking Outside Of The Grid/
Vector Mapping
I am an admitted map geek. I love maps. This one is a pet project that I am currently working on. I'm not distributing the code for this yet, or releasing a compiled version b/c it is still in its infancy. I downloaded some ESRI .shp files for geographic coordinates for the shape of the united states from http://www.usgs.gov/. I used a shp2text program to convert the shp file data to an xml structure, and then used the Flex UI to render the geographic data. Its a really cool application. The problem is that there is a TON of data (anywhere from 3 to 130 megs, depending which shp file you use). The huge amount of data causes some serious performance issues, which I'm still trying to work out to create a usable application.
