Declarative Graphics

2014-01-16 00:00:00 +0000 by Alex R. Young

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)

Calling 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.

Reactive Pokémon stats.

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.