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(da