d3 ordinal x-axis, change label order and shift data position

Question

I have been working on a visualization and have it working fine scaling the x-axis linearly (d3.scale.linear()), but the x-axis is really ordinal and so I am now going back and trying to switch to using d3.scale.ordinal().

The visualization is here http://bl.ocks.org/natemiller/raw/f9aa776243c9035f75b2/

I've made some progress, but I have two issues that I haven't solved yet.

1. I would like to specify the order of the values on the x-axis. Currently the values are numbers (1,2,3..) so currently I would like them to be in ascending order, but later I will use more informative labels and would like to be able to specify their order as well.

2. The data points don't line up with the x-axis labels and I'm not sure why. I think I might need to translate the data so it lines up, but I'm not sure if that's correct. I'm specifying the x-axis range as rangeBands and using that to set the circle positions, but obviously there is some error in this specification.

Thanks for any help.

PS: this is a different issue, but I'm wondering if there is a means of randomly, introducing a very small "jitter" to the circles so they overlay each other less. This is sometimes done in static plots and might be an interesting addition to this visualization. Or it could make it messy.

Nate

Answer 1

The order of values for ordinal scales is the order in which you give them to .domain(). That is, simply pass the order you want to .domain() and it should just work.

The problem you're having with the circles and labels lining up is because you're not taking the size of the range bands into account. That is, the circles will be positioned at the start of a range band and the labels at the center. The code for setting the x coordinates should be something like

.attr("cx", function (d) { return x(d[axes.xAxis]) + x.rangeBand()/2; })

Also note that you might want to sort the numbers passed to x.domain() -- currently the last value is less than the value before that.

Regarding the "jitter", one easy way of doing that is to add a small random number to the coordinates of the circle. There's no explicit support for that in d3, but it's straightforward to implement.