Here is a running copy of the visualization I put together for Adobe MAX 2009.

This visualization takes data collected by ocean buoys (CDIP) and plots them visually to make it easier for myself to know when the surf is good and if it is getting better or worse.   You can watch the full presentation where I explain this visualization in detail here: http://www.twgonzalez.com/blog/?p=267

Here is a brief synopsis:

4 Buoys visualized

Each buoy breaks down wave energy along a spectrum banded by 9 ranges of wave periods.

Arc segments with longer radi represent longer periods (shorter wedges represent less powerful wind swells, longer wedges show more powerful ground swells.)

The length (size) of the arc is determined by how much energy is within that specific band of swell period (more arc length equals more energy.)

Interactivity:

1)  You can select a particular buoy by clicking its label – that will then display a 2 week history for that buoy in the histogram along the bottom.

2) You can roll over any particular wedge and see a datatip with a 12 hour history for that particular period.   The energy shown is in cm2 and represents the surface area underneath the wave – it does not directly correspond to wave height.

3)  You can  animate the 2 week period by pressing the play button within the histogram.

3)  You can pause the animation and manually move the animation forward with left/right arrow keys

4)  You can also use your mouse click to skip to any section of the time period.

I have plans to add more to this visual over time, and I actually have a version working against live data, I just need to carve out the time to publish it to my server.

Axiis Beta 1

We have just recently released the Beta 1 version of Axiis last week.

This version of Axiis is a much more stable and cleaner build than the Alpha we released back in May.   There have been performance optimizations, refactoring of our core classes, and lots of little bug fixes.   We have also added a couple new examples to our examples section.

I am personally using Axiis now in several commercial projects, and I would feel comfortable recommending it to others if you are a on the more advanced side of the Flex development spectrum.

For those of you who missed my session at Adobe MAX this year, you can see the recorded session here.    I have included a link to the source code as well at the end of this post.

I would suggest viewing the presentation directly from the Adobe site, as it provides a better user experience.  They did a great job of creating chapters in the timeline so you can skip ahead to relevant sections.

I have also included the source code which you can download from here:

http://www.twgonzalez.com/demos/SourceCode/MAX_2009.zip

This purpose of this article is to introduce developers and data visualization specialists to Axiis, which is an open source data visualization project based on Adobe Flex and Actionscript 3. While you do not have to be an expert in Flex Builder or ActionScript 3, having experience in both will make understanding this tutorial easier. Throughout the article I will assume you are comfortable with the fundamentals of building an application with Flex, and understand some of the primary language constructs embodied within ActionScript 3 and the Flex SDK, primarily MXML and Binding.

Den ganzen Beitrag lesen…

Just an hour ago I wrapped up my presentation with Michael covering the alpha release of Axiis, the open source data visualization framework he and I have been working on for the last 5 months.

As fate would have it, I ended up coming down with the cold I had successfully resisted for two weeks from my two little boys, but I think the presentation went over well, despite my nasal delivery.

Michael did a phenomenal job of doing a live demo creating a chart from scratch. Unfortunately these sessions turned out to not be recorded, so perhaps we will do a screen cast of that demo.

We are really excited to get feedback from the community and move Axiis forward to its beta launch, which will hopefully be later this summer.

Well, I guess it is time to finally let the cat out of the bag.  For the past few months Michael VanDaniker and I have been working away on a new open source project we have named Axiis (you can thank Juan Sanchez for the great name.)   We are still a couple months away from our first public alpha release, but I think it is worthwhile spending some time to discuss the details of what we have been developing. 

Axiis represents a new way to conceive of and develop interactive data visualizations.   It is based on Flex and ActionScript 3.0 but has a uniquely different approach to creating visualizations than the standard Flex charts, and pretty much any other data visualization package I have seen.  Our primary goal in developing Axiis is to create very concise, expressive, and flexible framework that uses a purely declarative (markup) based approach to create anything from simple cartesian charts to very complex and involved data visualizations.  

Den ganzen Beitrag lesen…

In doing client specific work, especially for business info-graphics, I often get client requests asking “can we see this in a pie chart?” For 90% of the use cases there is usually always a more effective way to visualize data than using a pie chart. As you may know, this is due to the fact that it is much harder to distinguish value differences in a polar layout than in more straightforward linear layouts (bar/column, etc.)

Den ganzen Beitrag lesen…

For those of you who were unable to attend Adobe MAX this year, Adobe was kind enough to record all of the sessions and release them publicly.   My session covered off on Data Visualization with Flex, and was structured as a high level overview, good for beginners to advanced users.  I primarily cover the use of Flex charts, and quickly go through several examples from the basics to more advanced customization.   The preso is relatively quick paced, but should give people a good overview of what options exist within the Flex Chart controls and how you might use them within your projects.

You can see a high-res HD version directly on AdobeTV here.   

I was working on a couple of new geometry objects for Degrafa this evening, and I ran across this sample I had come up with a few months back.  It was just some playing around with repeaters, and I thought I would post it as I think it is pretty impressive for only 30 lines or so of code.

You can see the demo here.

This data visualization design study is the first in (hopefully) a series of visualizations depicting US and Global Finance information.  My original goal was to tell a compelling story with this visualization, and stay true to many data visualization best practices.   But somewhere along the way, the artist in me became more absorbed in the aesthetics than the underlying story, and I abandoned many of the best practices I had hoped to employ.

As a result I think the data visualization still works for the main trends.  You can see annual trade surplus/deficit information for each of the top 10 countries for each (surplus/deficit.)  The countries that are in surplus (adding cash to the US Economy) are along the top, while the countries along the bottom show the corresponding trade deficits (that are taking cash out of the US Economy.)    It is pretty obvious that overall the US has far more deficit than surplus trade, and by a huge margin, and that in later years the US deficit with China is pretty large.

I did spend a fair amount of time working on a simple algorithm that represents the flow of cash as various weighted lines for each country (as shown in the top right legend.)  Visually I believe you can get a rough at-a-glance view of how much cash is flowing from each country, while still having enough fidelity at the lower volumes to discern differences between those volumes, since in essence it is a log scale in stroke weights.

I had played around with animating the flow of cash monthly so you could see it funneling from the surplus countries to deficit countries, but I started to hit too many performance issues with the animation, and I thought this version was a good stopping point.

On the technical side, this is pretty much pure Degrafa GeometryRepeaters and CubicBezier curves.   One of the most elegant things about this visualization is that the core code that maps the visual structures is less than 60 lines of Degrafa MXML.

At some point in the future (perhaps 360|Flex in Indianapolis) I will open up the source code and walk through how it is done.   Suffice to say that I am 100% convinced that using markup to create your composite visual structures and procedural code to tweak them is a much more effective and intuitive way to code than using a pure procedural/OO approach.

After spending a fair amount of time working with Processing, which is pure OO/Procedural coding, getting back to Degrafa was refreshing change.  Things like the GeometryRepeater class are extremely powerful for this type of work – especially when you bind it to dynamic data sets.   Being able to use markup to make contextual relationships in XML to your visual forms is extremely helpful for keeping all of your abstractions front and center mentally.  With complex visualizations and lots of composite pieces the human brain (especially mine) is limited as to how many abstractions it can keep in working memory at any one given time.   By being able to describe your structures declaratively in a concise amount of space, you can then manipulate specific properties of that structure while still being able to reference the whole.   This allows me to “sketch” in my major graphic forms and then later add details, animation, and styles to each piece of the form.