Create your own XKCD-style Graphs

http://imkevinxu.com/xkcd/

by obilgic • 14 years ago

76 19 14 years ago

imkevinxu.com

davewicket• 14 years ago

OK we cant stop reposting this now.

alexkus• 14 years ago

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

olanmatt• 14 years ago

Incredibly original idea!

skeletonjelly• 14 years ago

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

nthitz• 14 years ago

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

Cool refinement of the existing XKCD work though!

eranation2• 14 years ago

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.

imkevinxu3• 14 years ago

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?

eranation2• 14 years ago

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...

baconner• 14 years ago

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.

eric_bullington• 14 years ago

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...

enjalot• 14 years ago

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

tshadwell• 14 years ago

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

FuzzyDunlop• 14 years ago

Same with log(x) too.

eatporktoo• 14 years ago

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

omra• 14 years ago

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"

imkevinxu3• 14 years ago

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 :)

iamdave• 14 years ago

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

drewda• 14 years ago

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

Create your own XKCD-style Graphs

Related Stories