Tesseract Example With d3.scale.ordinal() based bar chart

[Dmitri Cherniak]

mbostock recently released a library for filtering large datasets in the browser and it comes with a nice example using d3 charts which can be seen here: http://square.github.com/tesseract/

I was trying to adapt this example to use with a centralized logging platform I've built and would like to be able to filter by username (which are discrete string values, not continuous numerical values) but am running into problems with d3 (I'm new to it) and am not really sure what to do to get it to work. 

I can set up a domain nicely:

barChart().dimension(user).group(users).x(d3.scale.ordinal().domain(users.all().map(function (u) { return u.key;}))

but am unclear what to do with the range. I've tried using all the range methods that come with the scale, but can't seem to figure out what I need to do.

I've tried hard coding in some numbers for the range to test it out but I get errors like "Error: Invalid negative value for <rect> attribute width="-200"" and am unsure how to debug.

If anyone has taken a look or tried to adapt it in a similar way I would appreciate some tips.

Thanks,

D

[Jason Davies]

This is happening because ordinal scales don't currently support
inverting from pixel space back to data space. The d3.svg.brush
component looks for an "invert" function when computing the extent,
which is in turn passed back to the Tesseract example. You could work
around it by adding the following to the "brush.chart" event handler:

if (!x.invert) {
var d = x.domain(),
r = x.range();
extent = extent.map(function(e) { return d[d3.bisect(r, e) - 1]; });
}

Alternatively, we could add support for this to D3's ordinal scales:

https://github.com/mbostock/d3/pull/598

--
Jason Davies, http://www.jasondavies.com/

[Steven Brown]

Many thanks for this from someone who was going crazy trying to get brushes to work with ordinal scales.