I'm not a big fan of just zipping up all my source files and tossing out a download link because without some context, sample code isn't generally very useful.  Instead, I'll be doing several blog posts over the next few weeks with some detailed explanation to go with the code, so keep checking back.

If you have any questions about the material I presented, or just Pixel Bender or Flex in general, send them over.  I'd love to help.

You'll notice there is some overlap with the set that are natively available in flash.display.BlendMode, but I thought it would be pretty educational to see how these shaders are written Pixel Bender.  I have yet to test to see if there is a significant performance difference.

Application - Source

The formulas behind these blend modes were pretty easy to find.  I got them from a combination of http://www.pegtop.net/delphi/articles/blendmodes, http://dunnbypaul.net/blends/, wikipedia and the Flash docs.

One topic I wasn't able to find much documentation on was how to handle alpha channels for the various blend modes.  It gets complicated if both layers have transparency, and I'm not sure if there is a standardized way of computing the resulting alpha.  So for these examples the alpha is simply set to that of the input image.  This means that these blend modes work perfectly for opaque images, but vary from what you might see in photoshop when transparency is involved.  If anyone has any good resources on the topic or would like to contribute to this effort, let me know in the comments.

My only criticism is that Flex effects in general tend to have lackluster performance.  I frequently use libraries like TweenLite instead.  Can TweenLite play nicely with Pixel Bender effects?  Of course.  I'll do an example of that sometime this week.

• ambientColor - color to apply to all pixels of the image
• angle - angle at which the spotlight is projected (in degrees)
• azimuth - angle between the image plane and the spotlight (in degrees)
• coneAngle - angle of the spotlight's "opening" (in degrees)
• distance - distance from the spotlight to the center point
• intensity - intensity of the spotlight
• position - x, y, z position of the spotlight
• spotColor - color of the spotlight

There are so many different ways that you could use this effect, I will probably devote a few more posts to showing additional examples.  In this demo, I created a couple of draggable handles that you can use for positioning the spotlight, and some preset configurations (try the dawn, day, and dusk buttons).  Next time, I'll incorporate some animation.

Application - Source

• center ([0-2048, 0-2048]) - the center coordinates of the magnified area
• outerRadius (0-500) - the radius of the magnified part of the image
• innerRadius (0-500) - the radius of the fully magnified part of the image
• magnification (1-50) - the amount to magnify the image by (e.g. set to 2 for a 2x magnification)

Note that the ranges specified above are just the recommendations from the .pbk file, you can set these values to whatever you want in your application.

Take some time and play around with the settings, it is possible to acheive a several different effects.  If innerRadius is 0, it creates a "bubble".  If it is higher than outerRadius, then you get a hard edged circle.  In this demo, I disabled values between 0 and 1 for magnification because they can create some strange side effects, but if you are careful you can use fractional magnifications to create a "pinch" type effect.

Application - Source

• amount (0 - 0.5) - the amount of blur to apply
• center ([0 - 2048, 0 - 2048]) - the focal point of the blur

Application - Source

*Note: This application requires Flash Player 10

Photo courtesy of my talented and beautiful girlfriend, Bre Gehrken.

• amount (0 - 20) - the amount to sharpen the image by
• radius (0 - 1) - pixel distance to sample from

Application - Source

*Note: This application requires Flash Player 10

Photo courtesy of stock.xchng

• amplitude (0-1) - the height of the waves
• frequency (0-.54) - how close together the waves are.  Higher value = more waves.
• progress (0-1) - percentage of the wave sequence.  Animate from 0 to 1 to get a smooth wave effect.

This was my first go at a Pixel Bender filter, let me know what you think.  I've got a couple more in the works, so check back soon.

Application - Source

*Note:  This application requires Flash Player 10

Photo courtesy of stock.xchng

I have a fairly long history with building charting components in Flash and Flex. My first job involved developing a suite of "drag and drop" charts and other modeling tools in Flash for a financial modeling application. Now I am working at Gallup, Inc. (the guys who do "the Gallup Poll"...) and have authored a Flex application which renders charts for gallup.com articles. Along the way I've studied works by Edward Tufte (he's been called "the DaVinci of data visualization") as well as Stephen Few (who offers some great practical application to Tufte's theory) and others. Given all the research that has been done in human perception and data visualization, I feel that the default styles for the Flex charting components need a bit of tweaking to really optimize their usability. (Also, from what I've seen of the ILOG Elixir library, those charts need A LOT of tweaking... but let's try to stay on topic ;). This article will kick off a series where I will share some of my tricks for making charting components that are both aesthetically pleasing and easy to comprehend.

Getting Started

I'm going to focus on the 3 basic chart types: LineChart, ColumnChart, and BarChart, and you can apply many of these tricks to other more complex types. I created a simple application which sticks one of each chart type in a TabNavigator, gives them some data providers, and sets up the series. Its pretty basic, no special styles are applied. I realize that this would be a very poor structure for a real application - I'm organizing it in the way that best illustrates the techniques below.

From this point on you may find it useful to follow along with the source in the final application.

Application - Source

Develop a Color Scheme

I could write an entire post on the use of color (and I might in the future), but I'll cover this briefly. Usually, you want all of your series to have equal visual weight, so the two obvious options are to vary the hue, or to vary the brightness and saturation. One thing to keep in mind when varying hue though, is that about 1 in 76 people (thats 3.5 million in the US alone) have some sort of color deficit, the most common being red-green color blindness. Selecting red and green colors that don't vary significantly in brightness can make your chart very difficult to interpret for a fairly significant part of the population. It also might make your colors indistinguishable when printed in grayscale. Let's play it safe by using the second option. A great resource that I have used on many occasions is Color Brewer, which was developed by Cynthia Brewer to create good color schemes for maps. The same schemes work great for graphs too! I set it to "sequential" and selected a blue scheme which should work very nicely.

To apply your selected colors, set the "fill" property on each series. You can bind to a SolidColor object created in actionscript, or inline a <fill> tag in mxml.

Changing The Default Styles

First thing's first: the drop shadows have to go. I'm all for using filters and effects in Flex applications, but they really tend to get in the way of the data when used in charts. This is an easy fix. Just set seriesFilters="[]" for each chart.

Similarly, since outlining bars will also add extra clutter, I will set stroke="{null}" for each series (BarSeries and ColumnSeries).

Now, because we want to override a lot of default settings on the Axis, AxisRenderers and GridLines, we'll have to explicitly lay them out in mxml for each chart type. For the BarChart it will look something like this:

AxisRenderers

Rather than the fat blue axis that is available by default, I prefer to use a thinner light gray stroke instead. The only purpose of the axis line is to provide a little visual separation between the categories (or dates) and the data - so it doesn't need a lot of visual weight. The axis that runs along the LinearAxis (eg the horizontal one on a BarChart, or the vertical one on a ColumnChart) won't be necessary at all. It will be implied by the grid lines which will all come to an end right at the axis. To turn it off, set showLine="false".

Update:  To improve the readability of the graph i have use the labelGap property to increase the gap from it's default of 3 to 10-12 on each axis.

GridLines

Even the grid lines are often non-essential to the readability of the graph. When the data permits it, I prefer to use Ely Greenfield's bar labels and leave the gridlines off all together. This results in a super clean and modern look. For the sake of example though, I included them here.

You always want the grid lines to run perpendicular to the LinearAxis. (The only time I can think of that you would want them running both ways is in a chart with 2 linear axes, like a scatter plot). You control this by setting direction="vertical" or direction="horizontal" on the GridLines element. Likewise, we only want to display the origin (i.e. 0) for the same direction. So on a ColumnChart, you would set direction="horizontal", verticalShowOrigin="false" and horizontalShowOrigin="true". On a BarChart, you would set direction="vertical", verticalShowOrigin="true" and horizontalShowOrigin="false".

I chose to make the stroke for the origin the same as the stroke for the Axis: light gray with 3 pixel weight. The stroke for the grid lines themselves should be very faint - no more than 1 pixel wide and only slightly lighter or darker than the background color. We don't want the grid lines to compete for the viewer's attention along with the actual data.

The final trick I employed here was offsetting the gridlines -.5 pixels. This solves a glitch where the top line doesn't always display. Try removing the line x="-.5" in the SampleBarChart class and you will see what I mean. Obviously this is a hack, but it has worked pretty well for me thus far.

LineCharts

There aren't many differences here except we are setting the "lineStroke" style instead of "fill" on the series. My rule of thumb is that the thickness of the line should approximately equal width/number of points or 3, whichever is less. This is a very general heuristic, but will help ensure that in very dense data sets, the thickness of the line doesn't obscure the data points. Because this isn't easy to generalize for all different types of dataProviders and because my data set isn't dynamic, I just set the weight to 3.

I also added a labelFunction to the DateTimeAxis so that the dates would show up in a more readable format. "Feb 2008" is much more readable than "2/08".

The Final Product

That's it! You could further improve on this example by adding a legend, selecting a better font, and maybe embedding the text - but I'll leave that for you to experiment with. Of course these settings won't work for every situation, but I think it makes for a good starting point for whatever types of data you might come across. As you probably have noticed, the emphasis is all on simplicity. By removing the extra "fluff", you create a chart where the data is the main focus and enable the user to have the best possible experience.

If you have additional suggestions, or questions regarding chart styles feel free to comment.

Application - Source

I added myself as a watcher to this feature request ages ago, and yesterday it got mysteriously re-opened and marked as "Internal Review". Here's hoping they include it in Flex 4. Go there and vote!