6 ms·

Create your own XKCD-style Graphs

76 points by obilgic 14y ago

davewicket 14y ago
OK we cant stop reposting this now.
- alexkus 14y ago
  I'll put it on my to-do list (once I finish my to-do list app/site)...
  - olanmatt 14y ago
    Incredibly original idea!
- skeletonjelly 14y ago
  Maybe you should be asking "can we stop upvoting this now"
nthitz 14y ago
As reddit beats jokes to death, HN beats XKCD programming exercises to death. Cool refinement of the existing XKCD work though!
eranation 14y 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.
- imkevinxu 14y 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?
  - eranation 14y 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-canvas-javascript-to-take-screenshots http://stackoverflow.com/questions/4912092/using-html5-canva...
  - baconner 14y 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 14y ago
    I've not yet tried it, but check out this: https://github.com/sampumon/SVG.toDataURL https://github.com/sampumon/SVG.toDataURL Which apparently originates from this paper: http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#experimenting http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Bac...
    - imkevinxu 14y ago
      Thanks! Will look into it.
  - enjalot 14y ago
    another client side option is canvg http://code.google.com/p/canvg/ http://code.google.com/p/canvg/ which is more wrapping around a dataURL.
tshadwell 14y ago
Plotting sin(x)/cos(x)*e^x and changing the refinement has interesting effects.
- FuzzyDunlop 14y ago
  Same with log(x) too.
deleted 14y ago
[deleted]
eatporktoo 14y ago
plotting x*x1 works but I am not sure why. very interesting graph resulted.
- omra 14y ago
  Interesting! I decided to do some detective work and find out why. I found this: http://imkevinxu.com/xkcd/parser.js 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 14y 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 14y ago
I'm guessing 'hand drawn' is the new thing, then?
- drewda 14y ago
  It's been a trend in graphic design for a few years now: http://www.papress.com/html/book.details.page.tpl?isbn=9781568986265 http://www.papress.com/html/book.details.page.tpl?isbn=97815...

76 points by obilgic 14y ago

davewicket 14y ago

OK we cant stop reposting this now.

alexkus 14y ago
I'll put it on my to-do list (once I finish my to-do list app/site)...
- olanmatt 14y ago
  Incredibly original idea!
skeletonjelly 14y ago
Maybe you should be asking "can we stop upvoting this now"

nthitz 14y ago

As reddit beats jokes to death, HN beats XKCD programming exercises to death. Cool refinement of the existing XKCD work though!

eranation 14y 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.

imkevinxu 14y 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?
- eranation 14y 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-canvas-javascript-to-take-screenshots http://stackoverflow.com/questions/4912092/using-html5-canva...
- baconner 14y 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 14y ago
  I've not yet tried it, but check out this: https://github.com/sampumon/SVG.toDataURL https://github.com/sampumon/SVG.toDataURL Which apparently originates from this paper: http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#experimenting http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Bac...
  - imkevinxu 14y ago
    Thanks! Will look into it.
- enjalot 14y ago
  another client side option is canvg http://code.google.com/p/canvg/ http://code.google.com/p/canvg/ which is more wrapping around a dataURL.

tshadwell 14y ago

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

FuzzyDunlop 14y ago
Same with log(x) too.

deleted 14y ago

[deleted]

eatporktoo 14y ago

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

omra 14y ago
Interesting! I decided to do some detective work and find out why. I found this: http://imkevinxu.com/xkcd/parser.js 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 14y 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 14y ago

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

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