how to use string values as axis ticks properly in d3js? Not able to map data correctly can't figure out whats wrong in this code

Question

I am new to D3. In my scatterplot i need to plot usernames for y-axis but data and axis tick values are out of order can anybody help me find out what's wrong with this code ?

Full link to my code : Scatterplot code

Answer 1

I don't see anything major in your code. A couple of things:

1.) The sorting on your y-axis is fine. It's sorted in the order they appear in your data. As @mdml says in the comments, you can sort them differently if you desire.

2.) You have an "odd" point in your data. Everything is occurring around Nov-27-2014-12:33 except for one point on the 28th. This is causing d3 to pick a larger range for the x-axis and plotting most your data points on top of each other.

3.) You should probably "center" your points in relation to you y-axis:

.attr("cy", function(d) { return y(d.user) + y.rangeBand() / 2; })

Here's an example tweaking some things .