visual epiphanies >
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.)
The team over at Universal Mind has just launched a private beta of their flagship product, SpatialKey, a product that I first saw a prototype of back at Adobe MAX 2007.
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.
Its Friday, and I told myself I would get some of my processing sketches up on the blog earlier this week. This sketch is a study I was doing on fractal attractors. A large portion of this code is taken directly from the work of David Bollinger and his FungiScrawl Processing work. I found playing with this sketch to be very mesmerizing, and I slowly started to tweak David’s code to make subtle artistic changes in how the attractors were rendering.
For those of you Action Script junkies, reading the source code of Processing should be fairly easy, as it is Java. One of the coolest things about this code is that David is dumping everything into an off-screen pixel-buffer and performing his own anti-aliasing and via a 4 pass sub-sampling algorithm. So that might sound really sophisticated and complicated, but the code is actually very easy to read and was very approachable. Some of what I have learned here I suspect will make its way into the guts of Degrafa at some point.
Early this week, quite by coincidence, Juan at scalenine showed me this by Matt Kenefick, which is almost exactly like what I have done here, but with Flex and AIR… way cool Matt!
I have several other features in this sketch (application in Processing parlance) that I was exploring, like being able to record certain gestures and then paste them in later, as well as other neat ways to manipulate the attractor code for different visual effects.
In doing various experiments with Processing, I have really found that it has been immensely helpful to see the source code of others. Since I consider Processing more for artwork/play, than business, I see algorithms as just different tools to accomplish certain artistic goals. It is really amazing when you can combine different pieces of code from different sources to achieve really interesting and amazing results.
So like the work I have done with Adobe Flex I am releasing some of my experiments for others to see/use. But unlike my work in Flex, I am not making too much effort to “clean” up the source code, so please view source at your own peril, as lots of stuff is just hacked together in a very brittle fashion.
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.
I just got back from my trip up to San Fran, for Adobe MAX 2008, and I wanted to post the source code for my session on Data Visualization. My preso was geared to target a broad spectrum of developer levels from beginner to advanced. I have four code demos that cover off on data structures for charts, data formatting, chart styling/appearance, and chart interaction. Each demo walks through a progression from simple to advanced concepts and code. From the session feedback survey feedback I received today, it appears that audience found the presentation helpful and valuable as I had relatively high marks, and few people told me it was one of the better presentations at the conference. To everyone who attended, thanks for coming, and I hope you got some value out of it.
Here is the link to the source files.
Overall I found the conference as a whole to be a bit of a let down at the content level. It was great to see all the familiar faces and catch up with people, but I didn’t have the same feeling of excitement that I had last year in Chicago. It seemed this year that Adobe was doing a lot more product refinement than pushing any real new boundaries. Flash Catalyst (Thermo) has not really changed (just gotten further along) than what we saw in Chicago last year, and overall the MAX “Sneaks” were rather blah… ActionScript on the server to render HTML… c’mon guys we were doing that kind of stuff with .asp 10 years ago. I sure hope MAX last year was not the apex of Adobe under the guidance of Bruce Chizen, and that now we are starting a decline. I also realize that Adobe/Macromedia has pushed so many boundaries over the last couple of years that as a company it is now in a position where it needs it platform technologies to cross the chasm from early adopters to a more mainstream market, which for people like me becomes boring – because I always want to work with new technologies and be that early adopter level.
Monday November 17th is the official start date for Adobe MAX. I will speaking at several sessions throughout the conference.
On Monday I will be speaking with Juan Sanchez about Degrafa at the 360|MAX unconference. The presentation will be from 4:00pm to 5:30pm.
Then Monday night at 9:30 I will be doing a Birds of a Feather session with Juan, speaking again about Degrafa.
Wednesday at 3:30pm I will be doing my Flex Data Visualization presentation. Adobe asked me to do this preso and to try and serve as wide an audience as possible from Flex rookie to advanced Flex developers. 60 minutes is not a lot of time so I will be moving quickly and I have put together 4 new code demos where I walk through code from simple to advanced examples that cover off on Data Structures, Working with Chart Series, Styling Charts, and Chart Interactivity. Pretty much everything is focused on Flex charting, versus other components. I will also be covering off on some of the open source components I have previously released like the DataSet Component, as well as one or two new components I have created that make it easier to customize Flex Charts.
I hope to see you there, and please don’t be shy about introducing yourself if you have read this blog. MAX is a really fun conference and I am looking forward to it.
UPDATE 11/14/2008: According to the MAX scheduler it says my session is SOLD OUT, but don’t worry if it is like any other MAX event it is first come, first serve – so just be there early. I also realized the session description is slightly different than the content. It is hard in 60 minutes to get too in depth about anything, my session will show different techniques for dealing with data, chart appearance and styling, and user interaction within Flex charting.
Dashboard Insight has just featured my Google Finance dashboard as their dashboard of the week. Thanks DI!
