Old school D3 from simpler times
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
- 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
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.