interactive nodes

[Naushad UzZaman]

Hi All,

I am new to GraphViz and CanViz. I am working on visualization of
temporal information from text. Let me explain a bit. I want to find
extract events in the text (newspaper domain for example) and order
them in terms of temporal orders, so that seeing it readers/viewers
can understand when one event occurred in relation (temporal) to other
events. I have managed to convert my extracted information to GraphViz
format, which already shows that as expected.

For the events, I want to include more information. For example, if
the sentence is "Obama presses BP on compensation", then my main event
is "presses". In a newspaper article there are many events like these,
so when showing the temporal relations between events, I cannot show
too much information except the events like "presses". But I want to
make it interactive, e.g. when user clicks "presses", it shows more
information about it, e.g. Obama and BP, etc; also probably add images
as well. Thats why I was looking for tools and found Canviz. It seems
to me it is the right tool running the example, but I have few more
questions.

i. I am not clear from example, how I can show texts when a node is
clicked. Is there any step by step tutorials?
ii. I am curious to know, if its possible to make it interactive, e.g.
if a node is clicked, something will pop up to show more information
(which would include texts and images). If its possible, where can I
find a step by step guide? Is it possible using just GraphViz?

Waiting eagerly for the answers.
Thanks in advance.
Best Regards,
Naushad

[Eric Poiseau]

Naushad

you should have a look at the following project http://kylescholz.com/projects/wordnet/

Hope it helps

Eric

[Ryan Schmidt]

Welcome!

Canviz supports all the usual browser mouse events (e.g. onclick), so you can put an onclick attribute into your node or edge in your Graphviz file and it will pass through to Canviz. In that onclick event, you could use any JavaScript command you can think of, for example to show another div that has more information in it.

[Ryan Schmidt]

On Jun 17, 2010, at 16:07, Naushad UzZaman wrote:

> On Wed, Jun 16, 2010 at 4:29 PM, Ryan Schmidt wrote:
>
>> Canviz supports all the usual browser mouse events (e.g. onclick), so you can put an onclick attribute into your node or edge in your Graphviz file and it will pass through to Canviz. In that onclick event, you could use any JavaScript command you can think of, for example to show another div that has more information in it.
>

> Sorry to bother you again. As I told you earlier, I am new with javascript, I am having a very basic problem. I will be honest with you, I didn't spend too much time; but it seems to me it will be very easy, so thought it might be better to email you.
>
> For example, I want to open a new window onMouseOver to a node. I would do this in html in this way:
> <a href="#" onMouseOver="open_new_window()" onMouseOut="close_window()">Hover </a>
> where open_new_window function creates and opens a new window with some text, when mouse is over the text "Hover", and close_window closes the new window.
>
> What I am not sure is, how I put this href properties in Canviz nodes (in dot files), similar to your example:
> node [href="javascript:void(click_node('\N'))"]
>
> I am sure, it will be very easy answer, that's why probably couldn't find any Canviz documentation to explain it.
>
> Your answer with some explanation will be highly appreciated. I guess others should know about it already. In case you feel some other novice like me might think its useful, feel free to reply in the group.

It's no bother!

If you want to achieve the same effect as this:

<a href="#" onMouseOver="open_new_window()" onMouseOut="close_window()">Hover</a>

Simply write your Graphviz file like this:

digraph G {
somenode [href="#" onMouseOver="open_new_window()" onMouseOut="close_window()"]
}

Of course if you want to pass the node ID to the functions (for example if there is a specific window associated with each node), then it's simply:

digraph G {
somenode [href="#" onMouseOver="open_new_window('\N')" onMouseOut="close_window('\N')"]
}

[Naushad UzZaman]

Dear Ryan,

Thanks a lot for your reply. I actually never programmed in javascript before, but I was checking today and it seems Canviz with javascript should serve my purpose. I will explore more, if I get into problem with Canviz I will let you know.

Thanks again.
Naushad

[Naushad UzZaman]

Dear Eric,

Thanks for your reply. My browsers (chrome, safari, firefox) in Mac didn't show anything but the words. I clicked the Notes on top and showed some example's screenshot, which confirmed my assumption that its not rendering like the screenshot.

Any way, for my purpose, for now, it seems Canviz should work well for me. I will explore more. Thanks anyway.

Naushad

--
Naushad UzZaman
Graduate Student, U of Rochester
http://www.cs.rochester.edu/~naushad/