Philosophy

Drawing beautiful charts is a craft, and often one needs to add custom interactions, styling or animations. There are some beautiful chart libraries out there, such as Flotcharts or Dimple, and if those are enough for your needs, they can be a pleasure to use.

In many cases, though, what I really wanted was a library to take care of the generation of the chart, while still leaving me the possibility to render the actual thing. Paths.s does exactly this. It eventually generates SVG paths with a high level API. These paths can be then used together with a template engine such as Mustache or Handlebars to display SVG graphics in the browser. If instead of a static template engine, you use a data binding library, such as Facebook React, Ractive.js or Angular, you get animated graphics for free.

In designing Paths.js, I have tried to follow a few principles:

• paths should be immutable
• all exposed methods should be pure
• from this follows that it is trivial to test components
• and that they work on Node.js as well
• it should be easy to integrate Paths.js into various frameworks

For a more detailed exposition of the philosophy behind Paths.js, see this blog post by Marcello La Rocca. Also, check the slides from my talk at MilanoJS user group, together with the examples.

Another presentation by Marcello goes in detail over the state of graphics in the browser, covering various approaches, including Paths.js.