Andrew Trice had a post over on InsideRIA about using Degrafa as an item renderer within a Data Grid to create a bar chart like effect. His post really helped show just how simple it can be to use Degrafa for visualizing data. In his example he used some RegularRectangles and bound them to the data that was being pulled into a single column to change the width of the rectangle. This was a very simple, yet effective approach and much nicer than looking at a long list of values.

We extended Andrew’s example a bit into another Data Grid example that uses an item renderer with a split bar visualization and optimized the example a little. This example could be extended even further by using Bitmap or Complex fills based on the data, or changing the shape used for the visual. Here’s what it looks like:

While syncing in iTunes I was looking at the indication of how my media was distributed across my iPhone and realized that same visualization could be duplicated using Degrafa. I used a series of different colored RegularRectangles, some VerticalLineRepeaters for the inset markings that dynamically change count depending on the size, some other Rectangles for highlights and shadows, and a RoundedRectangle to mask the area. I also through in a ComplexFill composed of a Solid, Bitmap and Blend fill to create the colored plaid effect. This was really easy to do with binding to change the width, capacity bars, inset marks and colors. Here’s what the example looks like:

UPDATE: Here’s another example that expands upon the bar charts above to create some shape based renderers and a pie chart renderer. The shape renderers were easy to do. They’re masks created with Repeaters. The stars are Polygon Repeaters, the circles are Circle Repeaters, and the squares are Rounded Rectangle Repeaters. The pie chart renderer is just a couple of Elliptical Arcs. See below:

These examples are available on the Degrafa Samples page with View Source enabled.

There’s so much data flying around out there that would be kinda neat to create unique visualizations for using Degrafa. I’ve been checking out COLOURlovers, Echo Nest, FriendFeed and more that would be cool to try and visualize or use in a visualization. Better yet, you could make certain properties accesible to a designer for them to make the visualizations customized to their specifications.

A lot of people we’ve talked to have been interested in using Degrafa for mapping. Of particular interest was drawing states or regions that incorporate events and data. We put together a proof of concept a while back for EffectiveUI and we’re now making the source available after some clean up and updates to the latest beta release. The sample uses Degrafa to draw the states and for some custom skinning.

There were a number of people on the Degrafa Group asking for the source, so we’ve enable “View Source” on the application. This sample is also available on the Degrafa Samples page.

View The Degrafa Map Sample

New samples of Degrafa in use can be found at http://samples.degrafa.com. If you attended the Degrafa session at 360|Flex you may remember seeing them. They all address some of the new features in latest beta and include samples for:

• Skinning a VSlider to look like a thermometer
• Advanced skinning using Tweener, cursor position, color tweening, skin states, etc.
• Using the derive property
• Reusing compositions created in external MXML files
• Random art with Degrafa and Tweener
• Creating and using libraries

Visit the Degrafa Samples page and enjoy!

Just wanted to do a quick post to let everyone who’s interested know that the Degrafa source code is now available on Google Code. Go grab it, use it, critique it, add to it or whatever you want. Ignore the typos and rough documentation .

Be sure to log any issues you might have along the way. You can do that on the Issue Tracking page on Google Code.

Get the Degrafa Source Code