Create your own XKCD-style Graphs | Hacker News Reader

Create your own XKCD-style Graphs

imkevinxu.com

76 pointsobilgic19 comments

I was about to say: "another one?" but this is actually pretty cool, kind of sums up all other posts on this topic in the past few weeks. Open source evolution at it's best. Each new post is something that adds a little more on the previous, gives proper credit, and the end result is something useful, that will make any boring graph a little less boring, this is why HN is so great.

From a question on stackexchange on Mathematica (I think) to basic implementation in HTML5/JavaScript, to a fully functional graph generator that needs no code.

The next evolution I assume can have a jsfiddle like short URLs, share buttons, and a voting mechanism for best graphs.

Thanks there! I agree, I was heavily inspired by the Mathematica solution and after looking at Dan's D3 JS code I knew a simple UI was finally possible so I made it all last night.

Ideally I'd like to be able to export the d3 graphs as images, any idea on how to do that?

I'm sure you looked at the same articles, and found it surprising there is no easy way apparently. but a brute force way will be to send the final SVG / Canvas to the server side and render it there?

EDIT: this seems like a nice approach:

http://stackoverflow.com/questions/4912092/using-html5-canva...

I've been having a lot of success with phantom.js for converting browser rendered svg to various formats. I imagine there are a ton of svg>image options but phantom is nice in that its nearly WYSIWYG output vs chrome.

I've not yet tried it, but check out this: https://github.com/sampumon/SVG.toDataURL

Which apparently originates from this paper: http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Bac...

Thanks! Will look into it.

another client side option is canvg http://code.google.com/p/canvg/ which is more wrapping around a dataURL.

As reddit beats jokes to death, HN beats XKCD programming exercises to death.

Cool refinement of the existing XKCD work though!

I'm guessing 'hand drawn' is the new thing, then?

It's been a trend in graphic design for a few years now: http://www.papress.com/html/book.details.page.tpl?isbn=97815...

Plotting sin(x)/cos(x)*e^x and changing the refinement has interesting effects.

Same with log(x) too.

plotting x*x1 works but I am not sure why. very interesting graph resulted.

Interesting! I decided to do some detective work and find out why. I found this: http://imkevinxu.com/xkcd/parser.js, and thought that maybe if I knew how the strings were parsed, I could figure out why it was doing that.

    $ string_eval("x*x1")
    "x*x1"

I figured that the issue must be with the equation drawing or evaluated. Here's what I found as an inline script (note that i is points at which the function is evaluated):

    current_expression = expression.split("-x").join(-i);
    var result = eval(current_expression.split("x").join(i));

So it just splits up the equation and rejoins it. From here it was pretty easy to see what was happening:

    $ expression = string_eval("x*x1");
    "x*x1"
    $ expression.split("x").join(12);
    "12*121"
    $ expression.split("x").join(3);
    "3*31"
    $ expression.split("x").join(0.3);
    "0.3*0.31"
    $ expression.split("x").join(-3);
    "-3*-31"

Awesome detective work there! Yes you are correct, the basics of the parser is that it is just replacing values for x and while I did a check for 10x to be 10x, I did not check for x10 to turn into x10.

Just pushed the bug fix, should work now! Hacker News is awesome, thanks :)

OK we cant stop reposting this now.

I'll put it on my to-do list (once I finish my to-do list app/site)...

Incredibly original idea!

Maybe you should be asking "can we stop upvoting this now"

Reply on news.ycombinator.com