Filters allow for additional visual effects, such as blur. The most obvious use of filters is to enhance a visualization's aesthetics, or to create data "art." Filters can be used as their own dimension for encoding data - for example, accuracy, precision, or confidence could e represented by a blur filter; the strength of the blur representing the confidence of the data.
Most things you can do in photoshop for filter effects you can do with SVG. Inkscape can help you experiment/play with filters with a UI before going for code.
All the inkscape filters can be done in svg. Inkscape was built to do standardized SVG. Illustrator was built before standardized SVG - lot of the illustrator filters are not in the specification and will just be rasterized.
The filters that stack is really hard to get right with just javascript, but you can get it right in inkscape and export it into omething your D3 visualization can consume.
Add a <defs> tag and define a filter within. A filter tag has (at least) two attributes: in and out. These specify which "image" r "layer" to apply the filter to. SourceGraphic is a reserved word that references the graphical elements that were the original input nto the <filter> element
var defs = svg.append('svg:defs');
var filterBlur = defs.append('svg:filter').attr({ id: 'blurFilter' });
filterBlur.append('feGaussianBlur').attr({
'in': "SourceGraphic",
'stdDeviation': 20
});
- Use the filter attribute on an element to refer back to the filter id you defined; e.g.,
<rect filter="url(#blurFilter)"></rect>
Specific examples
- Blur / Fade Wet Window Effect. Two images - one is blurred, one is not
- Using filters to turn bad vis into attractive data art
- Coffee Stain effect
General
