Whenever I hear the term ‘reactive’, I immediately think about data-driven forms and widgets. Markup isn’t just used for HTML forms and widgets, however: SVG is a markup language, so why not use reactive programming techniques to generate data-driven graphics?
That’s the goal of Paths.js (GitHub: andreaferretti / paths-js, License: Apache 2.0, bower: paths-js), by Andrea Ferretti. It features a chainable API for generating SVG paths:
var path = Path() .moveto(10, 20) .lineto(30, 50) .lineto(25, 28) .qcurveto(27, 30, 32, 27) .closepath();
path.print() returns the relevant markup. This can then be used with a templating language like Handlebars or mustache.js: templates/line.html.
This example is from the Paths.js demo (GitHub: andreaferretti / paths-js-demo). The demo uses Ractive.js to bind JSON data to UI controls and charts. It has several graphs with animations, and uses instances of
Ractive together with instances of
Path to create a clean, interactive data-driven UI.
I like the combination of modern templating languages, SVG, and Ractive.js in Andrea’s demo. The Paths.js API makes generating SVG less tedious than it could be, and various charts are included that you can use to get started quickly.
If you like the sound of Ractive.js, then take a look at the Ractive.js demos, which include some SVG examples.