SVG

Ractive.js works with SVG just as easily as with HTML. This makes it possible to create data-driven graphics using the same declarative structure as we use with the rest of the web.

Step 1

In the template, we've got some hard-coded values. Let's replace them with mustaches:

<!-- the rectangle -->
<rect width='{{width}}' height='{{height}}'/>

We can use expressions to replace the other hard-coded values:

<!-- the area of the rectangle -->
<text class='area' x='{{ width / 2 }}' y='{{ height / 2 }}'>
  {{ Math.round( width * height ) }} px²
</text>

Note that we're using Math.round() to make the end result cleaner.

Apply similar changes to the labels, then add some data:

var ractive = Ractive({
  el: output,
  template: template,
  data: { width: 100, height: 100 }
});

Execute this code. Now we can have some fun:

var ractive.animate({ width: 300, height: 200 }, {
  easing: 'easeOut',
  duration: 800
});

SVG is a big topic; bigger than can be accommodated here. It's well worth learning how to use it though. Unfortunately, the web is littered with bad SVG tutorials, but once you get your head round the basics it all makes a lot of sense.

Since you're a better (and more charismatic) developer than most, I predict you'll pick it up easily.

Step 2

In this example, we're using the same data as in the previous tutorial to draw a combination area range and line chart. It's more of a demo than a lesson.

There are some points worth noting here. Firstly, we're mixing HTML and SVG together in the same ractive - the two languages are treated as equals.

Secondly, we haven't had to write a render or update function – our intentions are expressed declaratively. There's some custom logic to create the shape of the temperature band polygon, for example, but we don't need to specify when that logic should be invoked – the system simply reacts to new data and internal changes in state. The temperature labels don't need an event handler to tell them when to switch from °C to °F.

Thirdly, because this is based on a template, it's much easier to understand and extend than we've come to expect data visualisations to be. Ordinarily, you'd have to maintain a complex mental model of the flow of your application in order to understand which bits of code affected the result in which ways – here, the link between code and result is much more obvious.

Step 3

Since SVG gets along with the regular DOM pretty well, you can also interact with stuff inside an SVG just like you would with HTML. Using our simple square example from above, add a click event handler to the rectangle that makes it toggle back and forth between 100px sides and 140px by 160px sides.

<rect on-click="@.animate('width', 140, { easing: 'easeOut' })" />

If you like, you can add separate animate calls for width and height with different easings. Then your square will rectangle in an elastic-y way.