Mouseover image. View Source
SVG filters are a powerful and underutilized tool. Filters are a post processing step that allow you to create interesting effects by adding pixel-based effects. They can be chained together, manipulated on the fly, and applied to different elements to create powerful visual experiences. Pretty graphics aren't the only benefit to filters. Not only can filters enhance the visualization's story; filters can be used as another dimension to encode data.
How Filters Work
At a high level, filters take some input source and apply an effect. The input source can be a vector / graphic / text / etc. or another filter. They produce an output result which is then rendered (or used as the input to another filter). Filters can work on an individual element (rect, circle, text, etc.) or a container element (a group, pattern, mask, etc.).
SVG provides numerous filter primitives, such as blur and turbulence, which can be combined and merged togeter, allowing the creation of some really powerful and cool effects. The W3 SVG Filter Spec goes into great technical detail about how filters work. Here are some examples of what can be created using filters:
WIP screenshot from my HTML game using filters to show explored area
Filters can be used to create a variety of effects. Here are some examples which all use a single brown circle as their source image:
Using Filters to Enhance Story-Telling
Not all visualizations can benefit from the additional visual artifacts filters can add. In fact, they often will lessen the impact of a visualization. For many charts (perhaps even the majority of them), adding 'chart junk' can detract from the story a visualization tells.
However, visualizations are not always presented in a vacuum. Often, a chart is embedded in an article or included in a presentation. Even when a visualization stands alone, it is used to tell a story. Form and function cannot be separated. The presentation of the chart, regardless of the accuracry or rigour that went into the research behind it, shapes the way a reader intreprets it. Choosing the aestethic aspects (or even the right visualization type) is difficult, and sometimes the line between data visualization and data art is thin.
Decorating a chart can often aide in the story-telling experience of the visualization because, at their core, visulizations tell a story about data. Of course, one must be very careful not to occlude the data with filters, or to obstruct the actual chart. Depending on the audience, the story, and the visualization's goal, adding filters (or chart junk) can create a more powerful experience.
For instance, take this visualization of player data in Guild Wars 2, published a couple of years ago:
It's a basic chart that shows the total population of character types (races / classes / gender / tradeskills). The visualizations are straightforward, and while it isn't a shining example of data visualization (it does not include basic things like axes and numbers, annontations, information on if the scales are shared, etc.), it's not inherently bad. The purpose of the visualization was to communicate some data to players while representing the Guild Wars brand (hence the colors and symbols). However, for me, it does a poor job of that.
In response, using the same data, I created a visualization that made heavy use of filters to fit in more with the theme of the game and the goal of the visualization - to communicate in-game statistics while maintaining the 'feel' of the game. The visualization itself, of course, is not 'correct' in some ways; however, it was very successful in reaching a large number of players and communicating data. Sometimes, making sacrifices of data visualization 'purity' can better allow people to experience the story the visualization is telling - and be more engaged and interested, ultimately understanding the data better than a non-decorated chart could.
This isn't the best example of how filters can be used either (and it can be fairly slow, even in more beefy machines) - but it does illustrate how filters can have a powerful impact on the experience of consuming data
Aesthetic artifacts aren't the only value filters are able to provide. Filters can be useful for reasons apart from visual enhancements. Just as position on a y axis can encode a dimension of data, filters can be used to encode other dimensions of data, such as ambiguity.
Encoding Data with Filters
How do you show ambiguous or nebulous data? What if you're unsure about the error range of the data (but you have a decent idea). Error bars are a common solution, but they're not the best fit for all visualizations.
Most people are familiar with basic data visualization primitives: position, size, color, shape, etc. Different primitives can encode different dimensions of the data. For instance, imagine a simple bar chart.
Here's some help:
You can use various data visualization primitives to show different properties of the data. In this bar chart, category (A, B, C, ...) is encoded in the x dimension, and value (0 to 40) is encoded in the y dimension. This is pretty standard. However, it is possible to encode more information in this chart. Each bar could be color-based on another dimension of the data. The bars could also have different patterns (along with color) to show yet another dimension of the data. Color and patterns could be used to show either categorial data (e.g., use red/green/blue/etc to show different types of a value; e.g., 'Monday' or 'Wednesday'), or noncategorical / linear (e.g., use different shades of a color to show different degrees or ranges of a value; e.g, 0-10). The bars could be ovals, or have rounded corners, to encode another dimension (but I wouldn't recommend this madness).
One dimension that is sometimes overlooked is uncertainity. Many excellent visualization types exist to show ranges of error, such as error bars:
However, I think (depending on the application, audience, and data), SVG filters can be used to show ambiguity in an easier to comprehend way. Imagine encoding uncertainity as the strength of a blur filter:
Or, if a line chart visualizes some sort of uncertain data, showing wiggly lines could better communicate the uncertainity - as opposed to a title (that few will read anyway) that simply says 'This data contains some degree of uncertainity.' Simply presenting a normal line chart implies no ambiguity in the data: it's a sharp, crisp line chart like all other scientific charts, so of course it's right! Wiggly lines both communicate a more coherrent story telling experience and communicate the data's ambiguity.
Going Foward
Keep in mind that not all browsers support SVG filters. If your goal is to reach as many people as possible, filters may not be the best option. However, if you are able to restrict your content to modern browers, filters can be a powerful tool.
Creating filters is a difficult task. It involves thinking about how filters can combine with each other, and is not very inuitive (for me, at least). Inkscape provides some great tools for visualizing filter creation and the output of created filters. Because Inkscape outputs SVG, you can directly use the filters created in Inkscape in the browser. Also, here are some notes on a talk I gave about SVG filters at the D3 unconference.
SVG filters can be used also in CSS3 - allowing any element to receive any filter. Performance considerations aside, this is a powerful feature that is not commonly used (and not supported by all browsers). What excites me is not only seeing more widespread use of filters, but the CSS Shader spec proposed by Adobe. One must be careful when using filters (or using any kind of decoration) in data visualizations. In most cases, filters can be just chart junk and not add to the visualization in any way. However, depending on the goal and when used properly and carefully, filters (and possibly shaders) can enhance a visualization's story-telling power.