Updated xkcd style graphing tool

After a few years (8? really??) I decided to patch up and update a tool I used while doing my Master’s degree.

You can use it here or look at the source code here.

What is it? It’s a tool for making quick and sketchy looking graphs of functions. It’s a bit like wolfram alpha, but it makes the graphs look.. sketchy. Which is important, if you want people to know, intuitively “this isn’t real data”. When might you want that? When hypothesizing, when designing, or when learning are all good times. It also just looks quite fun.

I was hosting it on a site, but that didn’t pan out due to various underlying changes. Now it’s a github page, which is much less hassle and should prevent it from decaying, and it keeps it close to its code’s home.

Originally, this was it’s main function – interpreting a narrow range of functions and plotting them with nice colors and style. Way back, I did a bunch of tweaks, like enabling you to choose your own color for lines, and allowing some not-strictly mathematical behavior to still “kinda work ok” rather than erroring out.

But most of all I gave it the ability to plot any javascript you want. I’ve not really really tested this, but as it’s taking a function it should… do… anything?

Why on earth might you need this? Well, for my masters thesis, I needed to plot game design balance – and shockingly, that’s not very mathematically pure. Now, if you want to see var a = 1; var b = 2; var c =3; var d = 4; if(x <a) {Math.pow(x, 2)} else {if(x<b) {Math.pow(a, 2)} else{ if(x<c) {Math.pow(x-(b-a),2)}else{if(x<d) {Math.pow(c-(b-a),2)}else{Math.pow(x-((b-a)+(c-b)),2)}}} } plotted against var sellPrice = (-x)+7; var buyPrice = 0.2*x+1; Math.pow((sellPrice-buyPrice),(x-1.3)*1.7) and then composite them together to see what happens with var sellPrice = (-x)+7; var buyPrice = 0.2 * x+1; var t = Math.pow((sellPrice-buyPrice),(x-1.3) * 1.7); var a = t; var b = 2; var c =3; var d = 4; if(x <a) {Math.pow(x, 2)} else {if(x<b) {Math.pow(a, 2)} else{ if(x<c) {Math.pow(x-(b-a),2)}else{if(x<d) {Math.pow(c-(b-a),2)}else{Math.pow(x-((b-a)+(c-b)),2)}}} }, then you can absolutely do that

Doesn’t mean it’ll make any sense – but you can play with much more fun things to see how they might look – like quickly superimposing signals on tops of each other to see how they look – sin(x), sin(x*4) and sin(x)+sin(x*4).

So, anything javascript…? How far can you stretch it? Give it a try and let me know if you produce something fun, or if it breaks unexpectedly. https://bomadeno.github.io/xkcdgraphs/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s