This is Graph10k, a web app created by Jakob Egger for http://10k.aneventapart.com/
Files
=====
Graph10k consists of two files:
- index.html
- js/min.sj (javascript including minified css)
The uncompressed source is included in the directory "original-source".
Synopsis
========
Graph10k allows the user to plot 2D graphs of functions.
Features
========
- powerful equation editor
- instantaneous display of graph
- gorgeous user interface
Motivation
==========
Graphing a function should be a trivial task. Since most available tools are very complex, many people resort to using a simple graphing calculator side by side with a computer. I want to provide users with an alternative to such graphing calculators. The goal is to keep everything very simple and provide a very intuitive user interface.
Design
======
The basic principle of this design is that every pixel is used for content. On the screen you see only an equation and its graph. There is no space wasted for fancy borders or controls. A small window provides instructions. It can be moved out of the way or closed if not needed.
I opted for typical classroom colors. The equation editor resembles an equation written on a blackboard. The graphing area resembles a sheet of ruled paper, with a sketched graph drawn with a felt tip pen.
Technologies
============
Graph10k does not require any external libraries and is entirely self contained. It leverages cross browser supported DOM methods, including some rather new features such as DOM ranges. I tried to adhere to standards as much as possible, while keeping an eye on browser support.
Graph10k makes extensive use of the HTML5 canvas element. The graph itself is drawn using canvas. Mathematical symbols (square root, braces) are also rendered using canvas elements.
The full featured equation editor (with text selection, arrow key navigation, etc) is implemented entirely in javascript. It uses divs and canvas elements for display. Mouse and key events are all handled by custom functions. I have initially experimented with contenteditable, but failed miserably because of countless bugs in current implementations of contenteditable.
The graphing function uses a "fast" mode for live display. While the equation is edited or the browser window is resized, a low resolution graph is plotted. After a short delay, this instantaneous preview is replaced by a high resolution graph.
I used the /packer/ script by Dean Edwards to reduce the overall file size. The original source is already written in a highly optimized form -- eg. variable and function names are only single letters, and code is reused as often as possible. This results in a very small file size, but it also results in absolutely unreadable code.
Compatibility
=============
Graph10k has been tested on:
Internet Explorer Platform Preview 1.9.7874.6000 (Windows Vista)
Safari 5.0.1 (MacOS X Snow Leopard)
Firefox 3.6.8 (MacOS X Snow Leopard, Windows)
Chromium 3.0.182 (MacOS X Snow Leopard)
Graph10k does not support mobile devices. This is due of the 10k size limit. Including the necessary touch event handlers and key event support would have taken too much space.
Outlook
=======
I like the resulting web app very much. I might make it publicly available, after the contest, if I find the time to implement some additional features. There are a few features that have been left out for space considerations, eg:
- changing the scale of the axes
- copy/paste
- exporting the image
- exporting the formula in latex format
- mathematical functions not provided by javascript (eg. Bessel functions)
- graphing multiple functions simultaneously
- etcÉ
I've worked on this app for several days (I spent an entire day optimizing the file size). Most of the work went into the equation editor.
Thanks to Clemens GrŸnsteidl for testing and helpful suggestions.