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.

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