Graphing API

Some Usage Examples

All of this is within a div.graphie that takes no attributes, unless you want to update another graph with data-update="previousid".

init({
    range: [ [ -24, 24 ], [ -18, 18 ] ],
    scale: [ 20, 30 ] // a unit square is now 20px wide by 30px high; omit for 40 x 40
});

style({
    stroke: "black",
    strokeWidth: 2 // px; "2px" works too
});

// Two sides of a triangle
path([ [ 0, 0 ], [ 1, 0 ], [ 0, 1 ] ]);

// A (closed) equilateral triangle
// These are polar coordinates; maybe this is superfluous feature-adding
path([ polar( 0, 0 ), polar( 1, 0 ), polar( 1, 60 ), true ]);

// Labels for that triangle!
// These are TeXed and pretty
label( polar( 0, 0 ), "A", "below left" );
label( polar( 1, 0 ), "B", "below right" );
label( polar( 1, 60 ), "C", "above" );
label( polar( 1, 60 ), "C", 90 ); // same as "above"

label( [ -3, 4 ], "marcia", "left", {
    labelDistance: 4,

    // this is CSS style, not SVG
    // label styles don't work yet :(
    color: "#fff",
    background: "cornflowerblue"
});

// A big semitransparent purple circle at the origin (radius 17) with a thick
// red stroke
circle( [ 0, 0 ], 17, {
    fill: "purple",
    stroke: "red",
    strokeWidth: 5,
    opacity: 0.6
});

style({
    stroke: false,
    fill: "yellow",

    //        [    point  ,    size   ]
    clipRect: [ [ -7, -4 ], [ 14, 8 ] ]

    // scale, range are probably illegal right here
}, function() {
    // Both of these will be filled with yellow and have no stroke
    // Two tall (8:1 semiaxis ratio) ellipses clipped at the top and bottom
    ellipse( [ -6, 0 ], [ 1, 8 ] );
    ellipse( [ 6, 0 ], [ 1, 8 ] );
});

// The following arc is *not* yellow or clipped but it probably looks much
// prettier than this nice diagram does
//
//        *
//       /
//      |  (5,0)  *
//       \       /
//        *-___-*
//
arc( [ 5, 0 ], 4, 120, 360 );

// line(a, b) is the same as path([a, b])
line( [ 0, 1 ], [ 1, 3 ], {
    arrows: "->" // or "<->"
});

// Grids always go through the origin
grid( [ -17, 17 ], [ -13, 13 ], {
    stroke: "gray",
    step: [ 4, 3 ]
});

// Some plots
plot( function( x ) {
    // javascript Math is already imported
    return x * sqrt(x);
}, [ -6, 6 ], {
    stroke: "red"
});

plotPolar( function( th ) {
    return 2 * sin( 4 * th );
}, [ 0, 2 * PI ], {
    stroke: "blue"
});

plotParametric(function( t ) {
    // [x, y]
    return [ sin(t), sin(2 * t) ];
}, [ 0, 2 * PI ], {
    stroke: "green"
});

// Event handlers are basically the same as in Raphaël but use our nice coordinates for animations
// This doesn't work yet, sorry.
circle( [ 0, 0 ], 1 ).click( function( e ) {
    // Grow over one second
    this.animate({
        r: 2
    }, 1000);
});

We also have some additional info on adding interactive elements to your graphs.

Thoughts

• Degrees are used everywhere an angle is used except as the argument of a polar plot function.