Question

I am playing around with d3 to build some scatter plots. For some reason, I am not able to get a proper X-axis for my plot – the axis always has some overlapping text. Also, the dots seem to overlap with the axis. How can I fix this to look nicer?

I have put my attempt at jsfiddle. Any suggestions?

Answer 1

You can use axis.ticks to reduce the number of ticks; xAxis.ticks(5) seems to work well here.

To stop the dots from overlapping the axes, you have a few options. One is that you could increase the tickSize or the tickPadding. The circles would still overlap the tick marks, but they wouldn’t overlap the tick labels. The other option is that you can increase your domain to force there to be additional space between the circles and the axis.

Normally, you compute the domain automatically with d3.extent (or just d3.min and d3.max). Here’s an example of how to extend the domain by 10% on each side:

// First set the domain automatically from the data.
var x = d3.scale.linear().domain(d3.extent(numbers));

// Then extend the domain using invert (with the default range [0, 1]).
x.domain([-.1, 1.1].map(x.invert));

// Lastly set the desired range.
x.range([0, width]);

In your case, since you’re hard-coding the domain, you can just change what you’re hard-coding to a wider range of values.