With g9, making an interactive visualization is as easy as making a visualization that isn't.

Just write a function which draws shapes based on data, and g9 will automatically figure out how to manipulate that data when you drag the shapes around.

Example: An interactive dragon curve in under 40 lines of code. Try dragging the curve!

For more examples, and "how g9 works??", see the Examples.

Getting Started

The easiest way to get started with g9 is to play around with the live programming environment built into the examples page.

CDN

You can just include the following snippet of code to start using g9 in your web pages

<script src='https://cdnjs.cloudflare.com/ajax/libs/g9/1.0.16/g9.js'></script>

Local Installation

To install a copy of g9 locally, first download g9.js and then copy the file to your source directory. Then include the following snippet and you're all set.

<script src='path/to/g9.js'></script>

Browserify/Webpack

If you're using something like Browserify or Webpack, you can install g9 with npm.

npm install g9

var g9 = require('g9')
// or 
import g9 from 'g9'