All examples By author By category About


Watercolor bandlines / sparklines

Watercolor and paper texture effect without programming. Prototype - best run on Chrome (Safari 10 will support arrow functions and Firefox will hopefully become faster). A cleanup of what appeared here.

Bandlines, sparklines weren't meant to operate as sketchy charts, it's just an example for such styling with plot types that I like a lot.

Forked from monfera's block: Fluid configuration of d3.js bandlines with FRP

Changes to the original:

Inspired by Elijah Meek's work on sketchy visualizations.

Unlike these sketchy visuals, the watercolor and paper effects are done with filters:

A lesson learned is that what works with smooth paint doesn't work as well with texture. The texturization of the bands reveal that the bands (rect elements) don't move in sync with the value lines. Time permitting a real solution should transform such elements if there's a chance for rough fill style (patterns, sketchy and/or filter based texture). Also, in this specific solution all the bands are of a similar contour.