Archive for the Category Degrafa

 
 

Axiis – New data visualization framework

axiis_logo

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…

More fun with Degrafa Repeaters

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.

US Trade Deficit Visualized

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.

My speaking schedule at MAX 2008

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.

360 Flex Feedback – Thanks Community

I just got feedback from my 360 Flex session, and I must say it was very pleased to see how many people found the session valuable.  It is always very hard when preparing to present technical information to guess what people already know and what they want to learn.
I spent quite a bit of time polishing code and generating some new stuff that I could share with the community, and the reality is that if this were a billable engagement (the work required to prepare for my preso) it would have been a good size project.  So I was very gratified to see such positive feedback from the community.
I have not done a lot of public speaking, and as such it is something I am trying to learn how to enjoy more and become more effective at.  One of the real challenges I find is how to be engaging and dynamic when discussing detailed technical information.  I tend to be more about “here are the facts” and less about “here I am to entertain you.”  I think there is a happy medium somewhere in the middle that a speaker finds over time, this is something I am striving for.
I look forward to MAX, and even more so the next 360 Flex to have an opportunity to create even more engaging and valuable presentations that I can share with the community.

Chart Slicer Component Released

Today I am releasing a chart slicer component that behaves like the one seen on Google Finance.

I had several requests for the source code for my Google Finance sample, but regretfully the code is embarrassingly sloppy, and I am not sure when I will be getting back to cleaning it up.  One of the components within that example is this chart slicer control, which I have now created a simple example for, with source code included.
This control can target any Flex cartesian chart, although I have only tested it with a few, so I am sure people will find edge cases (or perhaps not so edge cases) that break the component.   It is easy enough to change the display in the control from an area chart to any of the MicroCharts included with a little customization.
This component has a liberal use of Degrafa to make all the magic work, from custom skins on the sliders, to the microcharts used to represent the data, to the tick marks within the slider track the reference the positioning of the items in the target chart.  You will also notice some extra logic that has the sliders snap into alignment with the actual item renderers of the target chart.   With larger data sets this is less noticeable, but with small ones it is very effective.   
Many thanks to Doug McCune for his HSlider control, and the efforts put forth by Brandon Meutzner.
You can see the example and download the code here.   As usual all code is released under an MIT license.

New Degrafa Repeaters

One of the first areas of Degrafa I started working on was a revamp of the current Repeater objects.  Jason had some cool ideas on what we could do to make repeaters more concise, flexible, and powerful.   After a couple of IM chats I had a reasonably good idea of what we wanted to accomplish and I rolled up my sleeves to see what I could do.   You can see the most current rev in our Dev branch at Google Code, although I suspect we will end up cleaning up some of the name spacing and move the new GeometryRepeater class somewhere else.
One of the challenges the current Degrafa Beta 2 suffers from is that we have a myriad of specific geometry repeater classes like Line, Circle, Rectangle, etc…    Not only does this clutter up our core class libraries, but it is also much less flexible than it can be.
The new architecture we are developing takes a different approach, instead of creating gemoetry specific repeater classes we wanted to create an abstract repeater engine.   This is accomplished through our GeometryRepeater class which inherits from Geometry and implements the IRepeaterModifier interface via its modifiers array.  Okay, so what does this all mean?
1.  You define the geometry you want repeated with any number of Degrafa geometry objects, which can be separate objects or complex compositions.   You are no longer limited to the current repeater classes, but can easily repeat ANY Degrafa geometry you create.
2. You define HOW the geometry repeats via one or more IRepeaterModifiers.   Initially we have created a PropertyModifier that allows you to target one or more geometry objects within your GeometryRepeater and an associated property you want to modify.  You can have as many RepeaterModifiers as you want to create composited repetitions.  Over time we may add additional core modifiers, or you can create your own by implementing the IRepeaterModifier interface.
Below you can see how one might implement a Circle repeater that repeats along a horizontal Axis:
<GeometryRepeater>
<Circle radius=”30″ centerX=”10″ centerY=”10)”/>
<modifiers>
<PropertyModifier property=”centerX” offset=”10″ offsetOperator=”add”/>
</modifiers>
</GeometryRepeater>
For a more complex example you can check out this demo that has view source enabled.
When you look at the demo you will see a simple circle geometry that is being repeated 30 times with multiple property modifiers being applied to it.  If you look at the code there are some interesting things to note here about the PropertyModifier class.
1.  We support targeting common properties across multiple targets via just one repeater like are doing here with the myCircle and myRect in the targets properties.  We also support not only direct object properties, but also descendent properties via a dot notation (look at the property=”fill.alpha”) setting for example:
<PropertyModifier targets=”{[myCircle,myRect]}” property=”fill.alpha” offset=”.01″ offsetOperator=”add”/>
2. We support built in static operators as well as offset functions.
Not only can you provide static offset amounts (as in the example above) with fixed operators like add, subtract, or none you can also provide offsets as an array that will behave like a modulo function against the iteration number as in the radius modifier below.   Additionally you can also provide offsets as dynamic functions as in the fill.color modifier that uses the custom colorOffset function found in the sample source files.
<PropertyModifier targets=”{[myCircle]}” property=”radius” offset=”[5,4,3,2,-2,-3,-4,-5]” offsetOperator=”add”/>
<PropertyModifier targets=”{[myCircle,myRect]}” property=”fill.color” offset=”{colorOffset}” offsetOperator=”add”/>
There are many more advanced features, but I will wait until we have pinned down the exact functionality for our Beta 3 release before delving into it further.  Please check out the sample, and use view source to get an idea of what is possible.

Officially Working on Degrafa Team

Over the past couple of months I have become more deeply involved in the open source Degrafa project that was started by Juan Sanchez and Jason Hawryluk over 1 year ago.   Today the Degrafa team has grown quite substantially and I represent the 8th official team member.
There were three primary motivations for me joining the Degrafa team.
Reason 1.  Degrafa just plain ROCKS!  
What I love most about Degrafa is that it represents an extremely expressive, yet compact markup syntax to produce amazing graphical assets.  Basically it allows me to do some really cool things with very little code.
Degrafa leverages the low level flash drawing API’s to implement sophisticated vector and raster rendering via MXML markup.   What does this mean to your average Flex developer?  It means that you no longer have to resort to working in Flash or other vector based tools to create complex vector assets, and you no longer have to struggle with using procedural API’s to manually draw your graphics.   Degrafa piggy-backs off of the same metaphors that most XML based markup syntax does, in that the nested XML structures you use to define your page layout create a visual corollary to the actual physical layout of the code.   With XML markup you can easily see the primary relationships between objects due to their nesting structures.  
When you combine XML Markup with Flash/Flex’s powerful binding mechanism you get a very expressive, compact, and intuitive way to code graphical assets.     One example of this effect in action can be seen in some of the GeometryRepeater code I have been working on for Degrafa (to be covered in a later blog post.)  I was able to take a couple very simple base classes and in less than 15 lines of MXML and 10 lines of AS create a completely dynamic single series Column/Area/Point/Line chart.   That is 25 lines of total code, that is what I call powerful!
Reason 2.  I wanted to give back.
When I started working with Flex in late 2005, I had never been directly exposed to the open source community and always regarded the open source movement with a detached fascination and certain level of disbelief that so many developers would volunteer their time for an apparently non-commercial effort.  Over the past couple of years, my eyes have been opened to the many advantages to open source on commercial, personal, and social level.   In learning Flex and watching the growth of the community I have repeatedly reaped the benefits of others efforts in many areas ranging from free (and excellent) components, blogs, and sharing of ideas.  
I think an individual can only “take” for so long before starting to feel an indebtedness and desire to give back to the community.  Probably most of all is the great level of personal satisfaction I receive when I contribute something to the community that others find great value in.   I probably receive more satisfaction from releasing a component I spent time working on and seeing many people positively respond to it in my blog than I do from landing a large consulting contract.
Reason 3.  Team Culture.
Both Jason and Juan (the two founders of degrafa) are so genuinely enthusiastic about the project and immanently accessible.  When I dove into Degrafa for the first time a couple of months back for work on my Gauge component I started trading e-mails with Juan, which quickly led to multiple chat sessions per day.  Juan was always available to answer questions and point me in the right direction, and then he connected me with Jason, who was equally accessible and helpful.   Once I started working with Jason and he showed me the guts of Degrafa I realized “wow, these are some truly bright people, creating a really amazing framework.”  I was hooked.
Moving forward my role at Degrafa will probably have many facets, but I will most likely be focusing as a direct contributor to the core engine as well as helping to provide  some organizational support for Degrafa as an entity and open source project.