Spoon me on GitHub
automatically interactive graphics

Welcome to the g9 gallery! Drag all the graphics!

I've tried to organize stuff from basic to advanced, so you can scroll from the top to get an intuitive feel for g9. It's worth mentioning, of course, that intuitive feeling is no match for reading the docs.

Before you dive in, here's a brief explanation of how g9 works (scroll down to skip):

How It Works

g9.js exposes a single function, g9(initialData, render[, onChange]). This represents the following flow:

  1. You create some initial data as key-value pairs with numeric values. For example:
    var initialData = {
        foo: 10
    initialData in the docs
  2. This data and a drawing context are fed into a function that uses the data to decide what to draw.
    function render(data, ctx){
        ctx.point(data.foo, 17)
    render in the docs
  3. When someone interacts with the graphics, for example by trying to drag an element to a new position, g9 optimizes over the space of possible values for your data to find a set of values that comes closest to creating the change. If you tried to drag the circle to the left, g9 might come up with the new data {foo: 8 }.
  4. g9 rerenders the entire scene with the new data, so that everything is consistent. If you've provided one, g9 calls your onChange callback with the new data, so you can update other parts of your page.

For a complete treatment of the g9 API, head to the Docs.


A minimal example with only two points. Our render function always draws one point at (x, y), and the other point at (y, x), so when you drag one of the points, the other kind of mirrors it. Try adding a minus sign before the first argument of the first point. What happens?


Lets add a few more points and use a bit or trigonometry to arrange them into two circles. Just for fun, we make the inner points red. Try dragging the points!

The affects option

All of the default shapes in g9 accept an affects option, which tells them what parts of the data they can change. Here are three lines with different values of affects.

Bézier Curve

Here's an interactive version of the quadratic bézier curve animation on the bézier curve wikipedia page.

Three points define a circle






Using Max and Min to limit a point's range of motion.

Kevin Clock

Try dragging the hands!

LOGO Turtle simulator

Grid Warp

Crank and Piston

Try uncommenting the animation block for extra fun!