lardbucket: graphsketch

3/24/2009

GraphSketch

Filed under: General — Andy @ 6:48 pm

So, I spent the last few days working on GraphSketch, a new, free, online grapher. It’s available at http://graphsketch.com/ . Go check it out for a minute. Try graphing something like “(x-3)(x+10)(x-14)/100” or “tan(pi*x/10)“. I’ll wait.

(x-3)(x+10)(x-14)/100

Done? That’s pretty much it: Enter an equation, choose some settings, and graph it. There are a number of functions you can use to plot, you can save the graphs to use later (in documents, worksheets, etc.), you can create a permanent link to them to share with others, and a few other nice little things (like getting a quick graph by going to an address like http://graphsketch.com/sqrt(x) ). Details on how below.

GraphSketch is mostly written in PHP, with the actual graphing done in gnuplot. Some manipulation is done in PHP before things are passed to gnuplot to account for odd roots, implicit multiplication, and so forth. In gnuplot, I’m using the pngcairo terminal, implemented in the not-yet-released gnuplot 4.3 CVS code (it’s public but not a “stable” release), to get anti-aliased graphs, because aliased graphs (especially with low graph widths) tend to look relatively poor.

Programming and debugging for the first version took just a few days, which was relatively quick compared to other such applications I’ve made. The main interface is almost entirely one PHP file along with some JavaScript that uses prototype and script.aculo.us to make things work smoothly. Automatically preloaded graphs like the link above are handled through a relatively simple mod_rewrite rule. Naming and the domain name were debated among a few people and decided upon in under an hour, which was also pretty quick.

So, if you have any questions, comments, or suggestions about GraphSketch, feel free to leave a comment below or email me at andy.schmitz at gmail.com.

Thanks,
Andy Schmitz

Update 05/12: GraphSketch now has delivered over 10,000 graphs.

21 Comments »

  1. This is a terrific app, Andy. Its simple interface masks a powerful program with plenty of parameters to tweak. I also like that you can download an image of the graph. Fantastic.

    I’ve been experimenting with 3D graphing in actionscript; parametric surfaces in various coordinates. I don’t know anything at all about PHP or gnuplot but is that something that can be done with that scripting language?

    Comment by colleenk — 3/24/2009 @ 8:02 pm

  2. @colleenk: Thanks for your kind comments. As for other types of plots, especially 3D, gnuplot will do 3D plots, but it will “only” emit a static image from a single viewpoint, not one that can be rotated easily. I suppose that could possibly be okay though. But that would likely require a good number of configuration options. For that reason, I think 3D is a bit lower on my priority list at the moment, but I can certainly think about adding it.

    (As for two other things that are somewhat related, I’d like to add plotting (2D) parametric and polar equations soon, as they require fewer extra options.)

    Comment by Andy — 3/24/2009 @ 9:23 pm

  3. Rotation would be possible with Flash CS4 but I’m still working with CS3. Parametric and polar equations are the logical next step.

    What are some of the advantages of scripting in PHP? What are the limitations? Would it be relatively easy for a mere mortal to learn on her own? I have access to a 22 hr video tutorial (ugh!) through Lynda.com. Your app has inspired me to take a look.

    Comment by colleenk — 3/26/2009 @ 10:09 pm

  4. The advantages and disadvantages of PHP are mostly that it’s a server-based language. You don’t require much of the clients in terms of a proper setup (though a standards-based browser makes things easier). So, I could use gnuplot and know that if it works once for me, it’ll work for everyone else regardless of their computer. It also lets me update things much easier on the server side, without pushing the changes to users. (For other purposes, this is more important: It’s easy to return the results of a database query in PHP without having to transfer the whole database, etc.)

    Another main disadvantage of all server-side languages is that you effectively have to send data whenever you want things to change, and that connection (more or less) has to be initiated by the user – it’s very hard to make a PHP application “push” data to the user unless the user['s computer] is actively asking for it.

    In general, for most simple uses, PHP code is mostly HTML with some extra code thrown in to do fancy things. So if you know (X)HTML, you should be able to start pretty quickly. Things can get almost infinitely complicated after that depending on how far you go, but you can make pretty useful (and seemingly complicated) things with a little knowledge if you can apply it in the right way. (Though that’s often true of many things in general.)

    Comment by Andy — 3/27/2009 @ 10:50 pm

  5. Andy,
    Ok, it is great BUT>>>>> (if you are looking for one more thing to do) it would really be great to have the ability to plot a few individual points (either just one at a time or a short plotlist type thing).. any chances of that?
    Thanks for the great tool
    Pat B

    Comment by Pat Ballew — 4/1/2009 @ 11:38 pm

  6. Andy,
    Great great great

    The ability to plot exp() would add on another great.

    Peter

    Comment by Peter Gibney — 4/2/2009 @ 4:34 am

  7. Pat: It’s certainly a possibility. Right now, it’s not the first thing on my list (as above, parametric graphing certainly is, and then possibly polar), but I’ll add it to the things that I’ll try to get done. Thanks for the suggestion!

    Peter: Thanks! You can now do exp(x) to get e^x. (As a note, you can also use “pi” and “e” to get their respective constants.)

    Comment by Andy — 4/2/2009 @ 8:32 am

  8. Andy, this an awesome tool! Thanks for making it available!

    For some reason, I am having trouble graphing log(x). I keeping getting this error: “There was an error when plotting your graph! Please check that you only used the variable x, and the constant pi or e. Also check the list of usable functions to make sure you typed things properly.”

    The other functions work just fine for me. It’s only the log(x) function. Do you have any idea what I might be doing wrong?

    Thanks…
    Cathy

    Comment by Cathy — 4/13/2009 @ 11:32 am

  9. Cathy: Thanks for your comments. And also, thanks for pointing out that I somehow broke log(x). Apparently I had mis-ordered some of the things that I do to the equation, and managed to completely mess up the logarithm. I believe it’s fixed now, so you can get the graph of log(x) correctly.

    Thanks again for pointing it out! If you notice any other similar bugs, please let me know too.

    Comment by Andy — 4/13/2009 @ 11:59 am

  10. Hi, I got log(x) to work ok – but can graphs of other bases be done? Eg a graph of log (base 2) x?

    Comment by Claire Laverty — 8/12/2009 @ 9:56 pm

  11. Claire: I’ll investigate a variable-base function for the next iteration of GraphSketch (which, incidentally, I’m working on tonight), but in the meantime, you may be interested in the logarithmic change-of-base formula.

    For example, “the base 2 log of x” can be written as (log(x)/log(2)). (The extra parentheses aren’t necessary in this simple example, but could be if you use the expression as an exponent.)

    Hopefully that helps you for the time being. Thanks!

    Comment by Andy — 8/12/2009 @ 10:22 pm

  12. Thanks – that formula did indeed produce the graph required. This is a FANTASTIC resource. Is saving me (as a math teacher) a lot of work.

    Comment by Claire — 8/13/2009 @ 3:53 am

  13. Hi Andy – Just graphed x^(1/3) and only the portion in QI showed up. No points in Q3. Any ideas how to get the complete graph.

    Comment by Mary — 8/25/2009 @ 9:17 am

  14. Mary: As noted on the GraphSketch main page (under the “Please note” section), you will need to use root(x,3) to graph a cube root.

    (Fractional exponents don’t work well with the software I’m using to produce the graphs. If I find a way to make fractional exponents more standard in the future, I will try to do so.)

    Thanks!

    Comment by Andy — 8/25/2009 @ 10:39 am

  15. Love this app!I use it to put graphs into my Word documents for quizzes and tests. One minor problem – the 0′s for labeling are confusing to my students. Is there any way to print the graph without the 0′s but with the grid lines?

    Comment by Eileen — 9/23/2009 @ 6:39 am

  16. Eileen: Thanks for you enthusiasm! Also, thanks for pointing out that the labeling for zeros on the axes can be confusing. I’ve rewritten the tick-mark handling code to no longer label the points at the origin, as I’m unable to come up with any reason that those labels would be helpful.

    If, on the other hand, someone comments that they would like the option to keep them labeled, I can add that as an option, although I think that at the moment, an extra feature to keep that labeled is unnecessary and would add clutter.

    Thanks again! Hopefully this change helps make GraphSketch more usable.

    Comment by Andy — 9/23/2009 @ 12:28 pm

  17. Great app, but how do u do piece wise functions?

    Comment by jordan — 10/20/2009 @ 11:43 pm

  18. Jordan: You can do piecewise functions by graphing something like y = (x<1)(abs(x))+(x>=1)(x^2), which will give you the graph of abs(x) for x less than 1, and x^2 for x greater than or equal to 1.

    You can multiply by other conditions to add further conditions, generally using > or < will work. From there, add more terms to the sum in order to add more pieces to your piecewise function. (This has two side-effects: Where the piecewise function is undefined, the value will be zero, and vertical lines will be formed where there is a discontinuity.)

    Hopefully this helps.

    Comment by Andy — 10/21/2009 @ 6:01 pm

  19. Great App! It was prefect for one of my assignments. I was wondering if your app can sketch limits? For example. My prof gave me a question which is :
    1. Sketch one possible graph of a single function ¦ that satisfies all of the limits below.

    a. lim f(x) = 0
    x ® -1 –
    b. lim f(x) = -1
    x® -1 +
    c. lim f(x) = 1
    x® 0
    d. f(0) = 0
    e. lim f(x) = 2
    x® (infinite)

    Comment by Dan — 11/1/2009 @ 1:34 pm

  20. Dan: Thanks! I’m glad it was helpful. Unfortunately, the underlying grapher (currently gnuplot) expects the functions to be continuous. (It samples the function at a large number of points, and then connects them, in order to arrive at a rather accurate graph overall.)

    Unfortunately, that means that it won’t handle discontinuities in the way one might like. (For example, a jump discontinuity would be drawn connected with a line, rather than disconnected.) Similarly, infinitely small holes won’t appear. You can, however, draw the hole on later manually in a graphics editor, if that helps in some way. I’ll consider adding the ability to add such points later, but at the moment, it’s effectively not possible.

    Sorry, hopefully that explains things a bit. Thanks again.

    Comment by Andy — 11/2/2009 @ 1:29 pm

  21. Andy,
    This is great, but is it possible to have the X range labelled in units of degrees and pi. This is required for trigonometri function graph. Thanks.

    Comment by Woon — 5/27/2010 @ 8:50 pm

RSS feed for comments on this post.

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

My Stuff
Blog Stuff
Categories
Archives