
Create your own XKCD-style Graphs - obilgic
http://imkevinxu.com/xkcd/
======
eranation
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.

~~~
imkevinxu
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?

~~~
eric_bullington
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...](http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#experimenting)

~~~
imkevinxu
Thanks! Will look into it.

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

Cool refinement of the existing XKCD work though!

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

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

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

~~~
FuzzyDunlop
Same with log(x) too.

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

~~~
omra
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"

~~~
imkevinxu
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
10 _x, I did not check for x10 to turn into x_ 10.

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

------
davewicket
OK we cant stop reposting this now.

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

~~~
olanmatt
Incredibly original idea!

