0

I'm trying to display a large number of images on a d3 display using T-SNE. The x and y coordinates are pre-calculated, the location on the svg area is adjusted using using translate/zoom.

At the moment they all display using the precalculated coordinates.

enter image description here

and they remain in place as zooming/panning.

enter image description here

I'm looking to use collision detection (like this example) to adjust the images locations slightly so that they don't overlap, but as much as possible maintain the rough global structure.

Here's my attempt so far https://gist.github.com/GerHarte/329af8ee5ffd8a1f87c5

With this it loads as in the image above, but as soon as I pan or zoom, all the points expand out hugely to a completely different location on the canvas and look like this, they don't seem to overlap, but they're extremely far apart.

enter image description here

Is there something wrong in my code or is there a better way to approach this?

Update: I followed Lar's answer here, with the slight addition of setting the raw data points to where Lar's code settles since the points are translated when zooming or panning. The results look great (see below), but for a larger number of points (5000+) it seems to crash before converging on a final result.

Are there any suggestions to improve the efficiency with this approach? Going to try the Multi-Foci Forced Directed approach.

enter image description here

Community
  • 1
  • 1
Ger
  • 754
  • 1
  • 9
  • 33
  • 1
    The answers to [this question](https://stackoverflow.com/questions/17425268/d3js-automatic-labels-placement-to-avoid-overlaps-force-repulsion) should help. – Lars Kotthoff Oct 07 '15 at 20:48
  • Thanks this is exactly what I was looking for, I gave a bit of an update in the original post, your approach works great but seems to crash for a large number of overlapping points that get pushed onto outer layers. You mentioned there might be some efficiency improvements, would you have any suggestions areas to work on? – Ger Oct 10 '15 at 20:49
  • This would be quite a task -- I would first iterate over all objects to see which ones overlap which other ones and then determine which of the ones that overlap should be moved and where to. Essentially this would be clustering the objects by overlap and then operate on each cluster individually. Not something you could implement quickly in an afternoon. – Lars Kotthoff Oct 10 '15 at 21:07

0 Answers0