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:

You create some initial data as key-value pairs with numeric values. For example: var initialData = { foo: 10 } initialData in the docs 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 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 } . 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.