MAA Session 2010 - Graph2D: An Interactive Graphing Library using the HTML Canvas

API Example

Math.sin(x)

published 2010-01-08 15:19:39-05:00 slide order

Javascript API

There is a full Javascript API.
You can create or manipulate graphs without using the microformat.
This is useful for dynamic content.
For example, detecting graphs in added content:
```
Graph2DFactory.detect(myNewDiv);
```

published 2010-01-08 15:09:38-05:00 slide order

The Magic Incantation

Add a script header to include the Graph2D code:

<script type="text/javascript" 
        src="http://www.milowski.com/math/graph2d/graph2d.js">
</script>

Add an onload event handler to detect the graphs:

<body onload='Graph2DFactory.detect()'> ...

or use event handlers

window.addEventHandler(
   'load',
   function() { Graph2DFactory.detect(); }, 
   false
);

published 2010-01-08 14:53:48-05:00 slide order

The Graph2D Microformat

A simple "microformat" on an HTML div:
- class="graph2d" on the div wrapper,
- each function is a div with class="function",
- control panel is a descendant div with class="controls",
- control buttons are spans with class of "zoom", "redraw" or "reset".
The microformat is "loose".
You can place these anywhere within the wrapping "graph2d" div.

published 2010-01-08 14:46:20-05:00 slide order

A Simple Example

<div class='graph2d'>
   <canvas width='500' height='500'><!--canvas--></canvas>
   <div class='function' 
              style='color: rgb(255,0,0);'>2*x*x + 3*x + 2</div>
   <div class='function' 
              style='color: rgb(0,0,255);'>Math.sin(x)</div>
   <div class='function' 
              style='color: rgb(0,255,0);'>Math.tan(x)</div>
   <div class='controls'>
     <span class='zoom'> </span>
     <span class='redraw'> </span>
     <span class='reset'> </span>
   </div>
</div>

published 2010-01-07 18:52:20-05:00 slide order

For More Information

Works in Safari, Firefox, Chrome, iPhone/iPod Touch, Google Andriod phones ...
IE 8 is still to come (possible but not attempted).
Examples, code, and documentation at:
http://www.milowski.com/math/graph2d/
Contact me at:
alex@milowski.com

published 2010-01-07 18:47:55-05:00 slide order

What is Graph2D?

A Javascript library for 2D graphing of functions that provides:
- multiple graphs,
- axes and grids,
- zooming and panning;
a simple "microformat" inclusion mechanism,
a programming API for the "brave",
and all using the new HTML5 canvas element.

published 2010-01-07 18:46:31-05:00 slide order

Graph2D: An Interactive Graphing Library using the HTML Canvas

R. Alexander Milowski

published 2010-01-07 18:37:49-05:00 slide order layout