Spoon me on GitHub
g9.js
automatically interactive graphics

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!

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'