svgPHPGrapher - a new math plotter
By Murray Bourne, 29 Sep 2015
Over the last few weeks I've been developing a new math plotter. It produces an svg image server-side using PHP.
The graphs on IntMath were produced over a number of years using a range of different software, and were starting to look rather dated. Most of the curves were pixelated, and I'd used a motley range of clashing colors.
However, the problem with JSXGraph is it involves a large footprint (167 kB of script, even after compression by gzip), which is a killer for mobile devices, especially if you just want to plot a simple graph on your Web page. Yes, the js file is cached by the browser, but a lot of first-time users will hit the back button rather than waiting for a large download.
- jQuery for a lot of interaction (92 kB compressed);
- KaTeX (34 kB) or MathJax (160 kB) for displaying mathematics (I mostly use KaTeX these days);
- Google Analytics (for optimizing the site, about 18 kB)
The grapher brief
My aim was to produce a grapher with the following characteristics:
- Small page load time
- All the grunt work would be done on the server (not the client device)
- Produced good looking graphs
- Displays axis variables (How often did your math teach tell you to "label your axes"? Most graphing software does not include this feature.)
- Relatively easy to use
There is also the option to cache graphs, so if they take a lot of processing time. it needs to only happen once (by the first visitor) and subsequent visitors will see the cached svg image.
What is SVG?
SVG stands for "scalable vector graphics" and it's a method for producing crisp, good looking images at any resolution. Older image formats like GIF, PNG and JPEG are made up of a collection of colored pixels in fixed positions. When you zoom in on such images, you see pixelated edges. But in the case of SVG images, the edges remain crisp. (This is desirable in this age of mobile devices with retina screens, and the requirement to produce scalable images for different screen sizes.)
For example, here are screen shots from a zoomed-in SVG image (on the left), where you can see the fonts and curves are smooth and attractive, while the one on the right is a zoomed in PNG image of the same subject matter. You can see the shape edges are quite ugly, and the fonts are no better.
SVG allows you to describe an image mathematically. For example, an ellipse is created using:
<ellipse stroke="#165a71" stroke-width="3" fill="#5a9fb5" opacity="0.5" cx = "77.222" cy = "153" rx = "31" ry = "62" ></ellipse>
The first part includes instructions for colors of edges and the inside (fill), and the last parts describe the center of the ellipse and how far the ellipse extends in the x- and y- directions.
By defining shapes in this way, the resulting file size is smaller than a PNG or GIF, and takes less download time.
Here are some example output graphs. They are real SVG images (not screen shots). You can zoom in on them to see the crisp edges I was talking about above.
Here's a plot of the hyperbolic cosine function y = cosh (x) . (A catenary is the shape traced out by a chain or a rope hanging from 2 fixed points.)
Here are some of the possible geometric shapes:
This is the curve x = t cos (t), y = t sin (t) from −7π/2 < t < 7π/2.
Syntax, download and more examples
You can try out svgPHPGrapher yourself, if you like. You can find a download link, syntax for using the grapher, and many more examples on this page:
You'll just need a PHP-based server (on your local machine, EasyPHP is recommended, or a real server) and a browser. Let me know how you go with it. I hope you find it useful.
See the 2 Comments below.