javascript - d3.js scatter matrix with brushing - scale error

Question

I try to reuse the example of 'scatter matrix with brushing': http://bl.ocks.org/mbostock/4063663

It seems that the code is not directly reusable with another csv. Scales seems to be somehow hard coded or so: i change the csv by adding 10 to 75% of the first column values, and the xscale is not directly updated. To visualize the problem, see the fork of the mbostock gist: http://bl.ocks.org/fdeheeger/7249196

I cannot figure out where/how the scale is computed or updated in the javascript code.

Any advice from a d3 expert?

Answer 1

The scales are computed dynamically -- the problem is that the numbers in the CSV are parsed and processed as strings and not numbers. This is also the case in the original block, but there it doesn't matter because the ordering of the strings is the same as the ordering of the numbers.

All you need to do to fix this is parse the strings to numbers:

domainByTrait[trait] = d3.extent(data, function(d) { return +d[trait]; });

The plus makes all the difference here. Complete example here.