Now that the word is out about the collaboration between Degrafa efforts and Adobe, we’ve been getting plenty of questions regarding the viability of continuing to use Degrafa. People have asked, “Well, with FXG, won’t Degrafa become obsolete?” The answer is no.

Right now we’re finally at a point where we can start moving beyond creating basic shapes, fills, etc. and moving into a realm of really powerful stuff, all of which we’re hoping will extend FXG. With inspiration coming from things like Processing, we’re really focussing on allowing people to do some typically difficult things very easy.

We’ve discussed how you might use Degrafa for various types of data visualization, but with things we’re implementing in Beta 3 you’ll be able to completely change the way you think about charting in Flex. Some people are already taking advantage of the in progress version of Beta 3 to do some really great stuff.

Joe Johnston of Universal Mind created a slick looking chart that mirrors the look you might find on the Nike+ site. Doesn’t look like a typical Flex Charting component does it?

If you were at 360|Flex you may have seen Tom Gonzalez present some of his latest works that use Degrafa. He’s contributed a lot to opening up new possibilities for Degrafa in the data visualization arena. Below is his Google Finance “dashboard” that uses Degrafa for charting, complete with “micro-charts” created using the newly revamped Geometry Repeaters.

Ryan Campbell has also taken a liking to the new Geometry Repeaters and what is possible just using Property Modifiers with them. He combined Degrafa and OpenFlux to create what he’s calling FluxCharts. Definitely cool.

It’s really great to see people start jumping into the next release of Degrafa when it’s still a work in progress. Even better, all these samples have source available.

Ok, I couldn’t resist using the title. Tom Gonzalez put together a really nice example of a gauge built using Degrafa. He also did a lot more than that. For some of the custom items like the tick marks, he made his own ArcLineRepeater based on Degrafa’s LineRepeater so that it rotated around a central point. Based on what Tom said, it sounds like it was pretty easy for him to do.

This example also allows you to apply different skins like you would any other Flex component, but instead of having to go to an external application like Fireworks or Flash you can do all your skinning for the gauge right in Flex and assign them through CSS. Tom’s example has 2 skins you can choose from and you can change properties like colors, angle, tick alpha and more very easily.

I think the coolest thing about this example is that Tom already had this gauge built before, but realized it had much more potential if he converted to use Degrafa. The result seems to be a much more flexible solution that can be extended quite easily to take on a number of different appearances. Good stuff!

Check out Tom’s blog post about the gauge and don’t forget to view the source.

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.

Here is a Flex dashboard prototype demo that was put together for EffectiveUI as a proof-of-concept. It provides a good perspective on how Degrafa could be utilized in a real-world scenario. The map, map legend and linear gauge skins were all done using Degrafa markup.

The map started as an SVG file, which was then brought into Degrafa. Each state was built up as an MXML component by extending Degrafa’s GeometryGroup. The color of each state are applied at runtime depending on a product selection and the value for the selected state.

As Degrafa get’s closer to a beta release, we hope to continue to provide additional examples of more advanced applications of the framework.

View the Example