Timeline with d3--how to handle close-by events?

[speedymcs]

Hi everyone, I am working on my first d3 project, a timeline visualization. In some of the data I'm feeding it, events are very close to each other so that they overlap--I've created a simplified version in this fiddle: https://jsfiddle.net/s4wrs7g8/1/
Each dot should be accessible with the cursor, to show a tooltip or click on the event to reveal more information, but often they are too close together.
I've thought about how to tackle this.. obviously from an Infovis point of view, I'd want each dot to represent exactly the time point that it is linked to, as opposed to just shifting it away from its neighbour by default. Maybe they could move apart on mouseover with a nice transition, but I'm not sure how I would detect the dots' overlap and furthermore, this would interfere with the tooltip. Any ideas/solutions much appreciated!

[Jean-Barthelemy Mercier]

Hi speedymcs,

you should take a look at this example http://www.msdiscovery.org/MSLine  it would probably give you some hints.

Jean

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[speedymcs]

Hi Jean, thanks for the tip! So those guys avoid a lot of clutter by using a second dimension.. I actually already use three "stacked" timelines for three categories, so I would like to not expand them further up or down the screen. The problem I described also appears in that timeline, at the very bottom right where the green and black circles almost perfectly overlap and it is difficult to spot the black circle in the first place or view its tooltip. In terms of discovering occluded dots, I've had a go at lowering opacity, but ideally ones that are close together would move apart a little when the mouse touches them. Is there a way to detect what elements are "touching" a given svg object with d3? Maybe a transformation could be applied on mouseover..