degrafa

There is an article up on InsideRIA that introduces some of the theory and features of Degrafa. I also put together a couple walkthroughs to get you started, but they just barely scratch the surface of what is possible. Definitely check it out if you’re looking for a quick shot of some beginning Degrafa knowledge.

One of the things we’re beginning to focus on is putting together more tutorials, samples and screencasts that really show off what you can do with Degrafa. This article is part of that initiative. With a new version of Degrafa on the horizon, it will be more important than ever to make sure we share the knowledge.

Read An Introduction to Degrafa

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.

We’re starting to see some really cool examples of Degrafa as more people get their hands on the framework and become more familiar with it. I come across new examples every week that are using Degrafa in a variety of ways. From data visualization, to skinning, games and more. It really shows just how flexible Degrafa can be.

I just came across a Tic-Tac-Toe game created by the guys over at Paranoid Ferret. The source is available for this game, but I think the best part is they walk you through how they made the game. We’ve been trying to make sure we have tutorials about how to use Degrafa, but we’ve been busy on the next version of Degrafa. It’s great to see people within the community contributing to the dialogue and really showing the power of the framework.

The Tic-Tac-Toe post is an introduction to a series that will walk through all the steps that were taken to achieve the final product. I definitely recommend checking it out to get a taste of what Degrafa can do. Nice work guys!

Read the article

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.