d3 Best practices to visualize data?

Question

I am working on a project where data points are visualized in the scatterplot using d3. Since it is a web application, the region is limited and a lot of points overlap. In total there are 20k points and I allow users zooming in with a brush (and its extent) on regions, but even when zoomed in there is still a huge overlap of points. An example of such a situation:

What are good approaches to still visualize underlying points, to enhance the view or perception of the points? I was thinking about maybe using transparency, but I do not know if that would do it.

It might be worthy to note that all points represent genes, so clustering them may not be very logical in terms of representation.

Answer 1

I would suggest trying d3's fisheye plug-in. It allows you to zoom and distort the scale with the mouse letting you zoom in on areas.

You can see an example of it used with a scatter/bubble chart lower on the page here: http://bost.ocks.org/mike/fisheye/

In addition, if you have overlap I would increase opacity, so you can see which points have lots of overlap vs. points that don't.

Here's an example graph with very clustered points that I created using both fisheye and opacity: http://crclayton.com/projects/fisheye/

It also allows you to hover over individual points to see a tooltip containing more details about them.

Answer 2

If the number of data points is of interest, then you could cluster the points (either on client/server side). You typically see this pattern if maps have too many markers (example cluster map).

---

Edit:

I am still not quite sure if I'm heading in the right direction. To visualize the quantity of points you could use a 3D visualization. Here is an idea taken from the Software Cities project:

You could basically render the position of the points on the plane and create vertical cylinders - the more points on the same spot, the higher the cylinder.