One of the greatest features of graphing libraries like d3.js/Rickshaw is that the image they create isn’t just a png or a gif, but an SVG, which means that it is vectorized. Vector images have “infinite resolution”- as you scroll in, the lines don’t become more pixellated. Find an image on the internet and zoom in on it (Ctrl + Scroll up) and then try to scroll in on my site header. You’ll notice that my site header maintains crisp lines regardless of how far you zoom in, whereas most images just become pixellated.
http://savas.ca/blog/wp-content/uploads/2014/06/svg-vs-png-1024x589.png 1024w, http://savas.ca/blog/wp-content/uploads/2014/06/svg-vs-png.png 1116w" sizes="(max-width: 640px) 100vw, 640px" />
With something as pretty as a wave graph, having a vectorized image is a big plus, so I wanted to make sure that people could save their creation as an svg. Easy, right? No.
So close, yet so far…
SVG files are actually just XML files. Try opening up a .png with notepad and you’ll get a mess of characters, but try opening an svg and you get clean code split into paths. When d3.js creates a graph, the svg code is actually in the browser. Literally all someone would need to do was inspect the source of a page and copy/paste it into a text file and save as .svg to get their vectorized image! So how hard could it be to let people save the image themselves? Apparently, very hard.
Here’s what needs to be accomplished:
1. Send *something* the string of text that was generated by d3 (the svg code)
2. Package the code, save as svg, send to user
Language
Javascript doesn’t provide data download functionality (this is probably for the best, for security reasons), and from my research I couldn’t find anything with PHP that would allow me to do what I wanted. There *are* some tools that would let me make files using javascript (e.g. Node.js), but since I’m not actually running the server myself, I can’t run them on my current hosting plan. I finally stumbled upon someone trying to accomplish the exact same thing as me, though.
http://d3export.housegordon.org/
I thought this would solve all of my problems, so after learning how to set this up on my own site, I uploaded it and tried. I had to tweak the code a bit because of some errors (I don’t know perl, so I was kind of editing their code in the dark), but eventually I got it to the point that it worked for most graphs (it seemed to fail on larger ones). I have since tried to tweak it to work again but instead just broke it completely. Once I have time, I’d like to go back and fix it, but I’ve found a simple interim solution that should solve most of my problems.
This is a little addon that I found that perfectly accomplishes my goal, except it only works on Chrome. Considering that Chrome has 60% of the market share as of May 2014, I’m not terribly unhappy with forcing users to use it for now (especially since LastWave isn’t being used ALL that much), but I’d like at some point to go back and fix it up.