improve svg:path mouseover sensitivity?

[Daniel]

I'm trying to build something similar to NYTimes interactive line
chart:
http://www.nytimes.com/interactive/2009/11/06/business/economy/unemployment-lines.html

The problem I have when trying to plot 100s of svg paths, is however
that I don't get the same kind of "mouseover sensitivity" as NYT's
Flash version. (More so in Firefox 4 than Chrome.)

To plot the lines I use this simple code:

var line = d3.svg.line()
.x(function(d) { return xScale(d.x); })
.y(function(d) { return yScale(d.y); })
.interpolate("linear");

paths
.enter().append("svg:path")
.attr("class","path")
.attr("d", function(d) {
return line(d.data)
})
.attr("stroke",#666")
.attr("fill","none")
.attr("stroke-width", "1")
.on("mouseover", mouseover);


Perhaps I would get better results with some kind of "scale
interaction technique"?
http://mbostock.github.com/protovis/docs/invert.html

Any ideas on how to improve the sensitivity of the mouseover trigger?
Thanks.

[Jason Davies]

On Thu, Jul 14, 2011 at 06:47:44AM -0700, Daniel wrote:
> I'm trying to build something similar to NYTimes interactive line
> chart:
> http://www.nytimes.com/interactive/2009/11/06/business/economy/unemployment-lines.html

Cool!

> The problem I have when trying to plot 100s of svg paths, is however
> that I don't get the same kind of "mouseover sensitivity" as NYT's
> Flash version. (More so in Firefox 4 than Chrome.)
>
> To plot the lines I use this simple code:
>
> var line = d3.svg.line()
> .x(function(d) { return xScale(d.x); })
> .y(function(d) { return yScale(d.y); })
> .interpolate("linear");
>
> paths
> .enter().append("svg:path")
> .attr("class","path")
> .attr("d", function(d) {
> return line(d.data)
> })
> .attr("stroke",#666")
> .attr("fill","none")
> .attr("stroke-width", "1")
> .on("mouseover", mouseover);
>
>
> Perhaps I would get better results with some kind of "scale
> interaction technique"?
> http://mbostock.github.com/protovis/docs/invert.html
>
> Any ideas on how to improve the sensitivity of the mouseover trigger?

Instead of using "mouseover", you might want to listen for "mousemove"
on the whole chart instead, and compute the nearest path for each event.
This was called "pointing" in Protovis. This seems to be what the NYT
version is doing, because you can move the mouse in between paths (e.g.
at the top where they're further apart) and you can see it toggle
between whichever path is closest to the mouse at the time.

--
Jason Davies, http://www.jasondavies.com/

[Mike Bostock]

Using mousemove and then finding the closest line is probably what you
want to do here, as Jason suggested. You could also try simple things
like using a thicker stroke, or using invisible lines with thicker
strokes. If you have lots of points, you could try dropping them into
a quadtree to accelerate searching for the closest point:

https://github.com/mbostock/d3/blob/master/src/geom/quadtree.js

You can even build a Voronoi diagram out of the points and then use
that, as described in this CHI '05 paper on "bubble cursors":

http://www.dgp.toronto.edu/papers/tgrossman_CHI2005.pdf

Mike

[couloir007]

The issue I'm having is that the mouseover over event only seems to
work on a small section of the path. Is this a known issue?

Thanks!

On Jul 14, 9:47 am, Daniel <daniel.lapi...@gapminder.org> wrote:
> I'm trying to build something similar to NYTimes interactive line

> chart:http://www.nytimes.com/interactive/2009/11/06/business/economy/unempl...

>
> The problem I have when trying to plot 100s of svg paths, is however
> that I don't get the same kind of "mouseover sensitivity" as NYT's
> Flash version. (More so in Firefox 4 than Chrome.)
>
> To plot the lines I use this simple code:
>
> var line = d3.svg.line()
>                         .x(function(d) { return xScale(d.x); })
>                         .y(function(d) { return yScale(d.y); })
>                         .interpolate("linear");
>
> paths
>                 .enter().append("svg:path")
>                         .attr("class","path")
>                         .attr("d", function(d) {
>                                         return line(d.data)
>                          })
>                         .attr("stroke",#666")
>                         .attr("fill","none")
>                         .attr("stroke-width", "1")
>                         .on("mouseover", mouseover);
>
> Perhaps I would get better results with some kind of "scale

> interaction technique"?http://mbostock.github.com/protovis/docs/invert.html

[Jason Davies]

On Tue, Jul 19, 2011 at 11:08:09PM -0700, couloir007 wrote:
> The issue I'm having is that the mouseover over event only seems to
> work on a small section of the path. Is this a known issue?

If you are on Safari, yes. I added a brief section about this to
https://github.com/mbostock/d3/wiki/FAQ just recently. Here it is in
case someone knows of a more elegant solution:

> You need to add a background <rect> element that fills the area of
> interest e.g. with fill="#fff". In Safari, mouse events will only fire
> on <svg> if the mouse is over a child element.

[Sean Montague]

Thank you Jason, but I'm not sure this addresses the issue. I could be
wrong. Here is a link to the svg may that lacks in performance on
Chrome. It works well on FF, but still not as well as the old ASV plugin
for IE. I can't run IE9 yet.

http://greenworld.org/chrome-test.svg

Sean

[Jason Davies]

Hi Sean,

On Thu, Jul 21, 2011 at 10:32:27AM -0400, Sean Montague wrote:
> Thank you Jason, but I'm not sure this addresses the issue. I could
> be wrong. Here is a link to the svg may that lacks in performance on
> Chrome. It works well on FF, but still not as well as the old ASV
> plugin for IE. I can't run IE9 yet.
>
> http://greenworld.org/chrome-test.svg

Ah, this isn't quite the same issue as the one I was referring to, but
it's related. :) I was talking about mouseover not firing for <svg>.
In your case, mouseover is only firing for a filled or stroked part of
an element. Do you want it to fire for non-stroked parts of elements
i.e. the non-dashed parts of your paths?

I suppose you could add a layer of non-dashed transparent paths
underneath. This way you could also use a slightly thicker path to
increase the mouseover areas.

[Sean Montague]

I tried it in Safari, and it rocks! Not sure why Chrome would have
issues. I tried a solid line, and you can try the red paths, and it's
the same issue. It's so much it won't fire over the gaps, as much as it
won't fire on some paths, and only on parts of others. If you move your
mouse around over all the paths, you will eventually find ones that will
work, but only over a section of line. I'll update it without the dasharray.

Thanks.
Sean

[Jason Davies]

On Thu, Jul 21, 2011 at 11:05:26AM -0400, Sean Montague wrote:
> I tried it in Safari, and it rocks! Not sure why Chrome would have
> issues. I tried a solid line, and you can try the red paths, and
> it's the same issue. It's so much it won't fire over the gaps, as
> much as it won't fire on some paths, and only on parts of others. If
> you move your mouse around over all the paths, you will eventually
> find ones that will work, but only over a section of line. I'll
> update it without the dasharray.

Which version of Chrome? Seems to work fine in 14 (dev) for me, unless
I'm not checking the right paths...

[Sean Montague]

12, the current stable release. I'll try 14. If it's fixed then I'll not
worry.

Thanks!
Sean

[Sean Montague]

I just installed dev version 14 on Ubuntu, and it is slightly improved,
but it still doesn't work as expected. You can mouse over any path
anywhere along its length and the color changes to yellow? With Safari,
FF, and hopefully IE9, I may not worry about it so much.

Thanks!
Sean

On 07/21/2011 11:35 AM, Jason Davies wrote: