Re: Tweak for interactive SVGs?

[Bill B. <bi...@br...>]

peter wrote:
> Bill Broadley wrote:
>> I've been generating some plots that get a bit busy, sometimes it's nice to be
>> able to toggle what you see.  So I wrote a script to tweak the gnuplot output,
>> and it generates:
>>          http://cse.ucdavis.edu/bill/barc.svg
>>
> Hi again,
> 
> quick after thought: could you extend it to having the line sample next
> to the title as part of the clickable?

That would be somewhat tricky.  Currently I have:
<text  onclick='ToggleVisibilty(evt, "1add")'>1-thread add</text>

Which is inside a <g> that sets the style, color, widget, font, stroke, etc.

The sample line is part of the entire path:
<path id='1add' d='M715.6,72.0 L757.8,72.0 M774.4,440.3 ...

The first M is the beginning of the sample, the next M is the start of the
graph.  So the quick easy thing to do is:
http://cse.ucdavis.edu/bill/out2.svg

I only fixed 1-thread add, notice that you can click on the graph for that
line, the sample, or the text.  But you can't unclick the sample once it
disappears.  Splitting out the sample so it doesn't disappear would be
somewhat harder, but possible.  There are two fixes for that, making the
sample not disappear, or making it clickable even when invisible... both possible.

> I find it more intuitive if I
> want to hide the dark blue line to click on the dark blue sample since
> that it what I have to identify first. Obviously when you are thinking
> in the other direction, removing "2-thread-add" you are more likely to
> click the text.

Indeed, I considered making the samples much thicker to make them easier to
click on.  Or maybe drawing an invisible but clickable box around the title
and sample so it's easier to click on.

Of course once you get used to this you start wishing that gnuplot's
x11/wxwidgets interface had similar functionality.  I looked around for other
solutions to something like this and found none.  Google Gadgets can do some
of this stuff, but seem toy like and not friendly to log/log graphs.  Open
Flash Chart seems like an interesting approach, they definitely do interactive
charts with tooltip/balloons for the values of the nearest datapoint and the
like, but again I didn't see an easy way to toggle data, nor do log/log
graphs.  So here I am with the best solution I've found so far.

> Both approaches are valid depending on why one wants to hide a line. For
> example if I want to see the detail of your "1-thread add" , I would
> identify the dark green line as the one masking what I want to see and
> it would be my instinct to click on the green line segment. (When I
> realise it does nothing I go for the text).

Indeed.

> The other question is discoverability in the svg graphic. There is no
> established token to indicate the titles are interactive. It may be
> worth adding a bullet or round button before each title as a visual key.
>  This may want to be optional since these titles can encroach on the data.

Indeed, I wasn't sure.  On one hand a traditional radio button and/or checkbox
would be the easiest for a user.  Then again I kinda like not changing the
look at all in case a user wants to use it to look just like it does now.

> consider a small red square with a 1px black outline in front of
> "1-thread add". May be helpful.

Navigating a datafile without any metadata via regular expressions is
definitely not the way to do this.  But if it's done in the SVG output driver
anything along these lines should be possible.