A Few Things I Learned in my Latest Visualization Effort

I recently incorporated a decent amount of data on US religion demographics into a US Births/Deaths visualization. Here are a few notes from the road.

Chrome Has Rendering Flakiness that Firefox and Safari Do Not

For showing images, whether in an svg element, an img tag, or as the background of a div via a css class, Chrome will sometimes have a crisp image suddenly go blurry. An example is shown below. The blurriness tends to go away after a few seconds, but doesn't seem to happen for either FireFox or Safari.

Transient Blurry Image on Chrome
(have yet to see this happen on FireFox or Safari)

Has That Dynamically-Added Css File Loaded Yet?

I have a fairly large css file that is used for images. This file is loaded by inserting the link into the DOM after the page is loaded. There are also image files as well that can be used until the css file has been loaded. But how can you tell if the css file has been downloaded? It turns out that you can check for the existence of a css class. In this case, I check to see if the last css class defined in the file is available. If it is, I assume that the file has been loaded (I don't know if this is completely reliable, but seems to work ok so far). The code used (from stackoverflow) is below. In my case, I wasn't needing to call this function all the time, but there could be some performance hits that need to be addressed if that were the case.

function getAllSelectors() {
    var ret = [];
    for(var i = 0; i < document.styleSheets.length; i++) {
        var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
        for(var x in rules) {
            if(typeof rules[x].selectorText == 'string') ret.push(rules[x].selectorText);
        }
    }
    return ret;
}
function selectorExists(selector) {
    var selectors = getAllSelectors();
    for(var i = 0; i < selectors.length; i++) {
        if(selectors[i] == selector) return true;
    }
    return false;
}

Checking if CSS Class Exists
(from this stackoverflow post)

pixlr is a Great Online Image Editor

I needed to tweak on a few images in simple ways that were beyond the capabilities of the Mac's Preview program. Using the online pixlr image editor was a very easy way to do what I needed to do. It has a ton more features than I needed as well.

Using Node.js for Data Preprocessing

I needed to massage some data files for use in the visualization, and used node for the (modest) preprocessing/restructuring I needed to do. There is definitely something to be said for staying in the "same language" mindset (javascript).

Javascript Minification Can Break on Syntax Errors

At one point I was getting some odd killer errors all of a sudden when running the grunt-contrib-uglify grunt task. The error message pointed to a place that made no sense. It turns out I had an extra parenthesis in some javascript code that was triggering this. Luckily, this was easy to find (and WebStorm was pointing it out anyway), but this experience is something to keep in mind should I see it again.

Using Something I Noticed from Reading the jQuery Source

I was reading through the jQuery source code the other day, and noticed this quick way to defined an array of strings:

var anArrayOfStrings = 'element1 something here fourth fifth'.split(' ');

Kind of trivial, but the conciseness is quick to type and comprehend.

A Convenient but Suboptimal Way to Replace Periods in a String

I don't love regular expressions as much as some people seem to. So, it was irritating when I was (trvially) needing to replace a period with an underscore in a string and it wasn't working. Yes, I was escaping the period, and it still wasn't working. But I came across a sneaky little way to do this that eliminates the need to escape altogether (via this stackoverflow post):

var newString = oldString.split('.').join('_');

Someone on stackoverflow asked how this performed compared to using a regualr expression, and so someone else posted the results (which you can reproduce for yourself on jsperf here). It turns out that the split/join method is about 75% slower than using a regular expression. So, you've been warned (and so have I).