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:

• the presence of filters in SVG tag in index.html
• three lines in bandline.js link the new SVG filters to the bands, lines and extent box paths
• line thickness was increased and opacity decreased for .valueLine

Inspired by Elijah Meek‘s work on sketchy visualizations.

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

• noise based displacement filters yield wiggly lines and contours
• a stripe pattern in the filter adds rough paper texture

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.

License