Joohun Lee Joohun Lee - 2 months ago 17
Javascript Question

How to add jitter to avoid overplot in D3?

Is there any way I can add jitter to the dot on the plot to avoid overplot?
X axis is "categorical" value and "y axis" is "numeric" value.
with codes given below, I could plot on X/Y but some observations are overlapped.


Part of my code is

var xValue = function(d) { return d[xVar];}, // data -> value
xScale = d3.scale.ordinal()
xMap = function(d) { return xScale(xValue(d));},
xAxis = d3.svg.axis().scale(xScale).orient("bottom");

var yValue = function(d) { return d[yVar];}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");

.attr("class", "dot")
.attr("r", radius)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", function(d) { return color(cValue(d));})


I add jitter to all x values as below. xMap = function(d) { return (xScale(xValue(d)) + Math.random()*10);}, this will help to avoid overplot.