Coloring edges based on whats active - plus moving the label based on angle

44 views
Skip to first unread message

FoaS

unread,
Oct 6, 2009, 5:11:42 PM10/6/09
to JavaScript Information Visualization Toolkit
Here's a two curveballs for you. I'm working entirely with an RChart

First
------
in the onclick I have function that changes the class of the label to
'label-active' and the class of any other labels to 'label-inactive'.
My database has one-way interactions. ie: Node2 has Node1 as an
adjacency, but Node1 does not have Node2 as an adjacency.

What I'd like to do is set up a way so that if you click on node1, all
the edges that link from node1 to another node turn blue, all the
edges that link from another node TO node1 red, and any edges that do
not interact with node1 turn grey.

Second
-------
I saw on the video there is a way, once SVG is integrated, to have the
labels of a node rotate in orientation to center of the Rchart. What
it also did was moved the label to outside the radius of the circle on
which the node lies.
I know that rotation is not something that can be done with HTML, but
I am wondering if there is a way to change the position of the label
so that it lies outside that same radius. Basically as the node moves
about the chart, the label will orbit the node but always stay as far
as possible from the center of the chart. make sense?

To whom can answer these conundrums - you'd have saved me many many
mornings of waking up with imprints of keys on my forehead, as well as
hair-restoration surgery later in life.

FoaS

unread,
Oct 7, 2009, 12:49:43 AM10/7/09
to JavaScript Information Visualization Toolkit
I figured out how to change the edges color based on the relationship
between the nodes. it involved adding a custom array that contains the
parents of the node (I couldn't make a way for Adjacencies
differentiate between parent and child graph.nodes), and then
comparing the items on that array with the names of adjacent nodes -
if it finds one, it changes that adjacencies color.
I can post a snippet of code if people are interested in it.

The second problem still alludes me. I think what needs to happen is I
need to multiply the position of each label based on a vector
determined by the angle from the center of the canvas - I just have no
idea how to do it...

FoaS

unread,
Oct 7, 2009, 12:01:02 PM10/7/09
to JavaScript Information Visualization Toolkit
I also found a solution the second problem. Again, I can post code i
people are interested.

Nico Garcia Belmonte

unread,
Oct 7, 2009, 12:39:47 PM10/7/09
to javascript-information...@googlegroups.com
Hi,

For the first point, have you considered using the getParents method?

http://thejit.org/docs/files/Graph-js.html#Graph.Util.getParents


On Wed, Oct 7, 2009 at 6:01 PM, FoaS <furyof...@gmail.com> wrote:
>
> I also found a solution the second problem. Again, I can post code i
> people are interested.
> >
>



--
I would never die for my beliefs because I might be wrong.

Bertrand Russell

FoaS

unread,
Oct 8, 2009, 11:01:00 AM10/8/09
to JavaScript Information Visualization Toolkit
Hey - I did try a getParents, but I couldn't get it to work. The
method I used works, for now - but if it turns out to be too unwieldy
- I will consider another attempt. What I'm doing is actually grabbing
the mySQL database and parsing the data with PHP and then converting
it into a JSON database. The additional property that I needed doesn't
add anything to the source, it just references the same data twice in
the parsing stage.

how does one post code on thus forum?

Nico Garcia Belmonte

unread,
Oct 8, 2009, 11:05:49 AM10/8/09
to javascript-information...@googlegroups.com
Well, people generally just paste it or link to it, however I like the suggested posting guidelines by the google maps group:

"Posting code is not helpful, although if you have a specific question about a specific few (less than five) lines of code, you might get an answer if you post those. Don't be surprised if you get asked for a link instead."

Damion Dooley

unread,
Oct 26, 2009, 5:02:40 PM10/26/09
to JavaScript Information Visualization Toolkit
Related to #1, can I ask (Nico?) if there's a way to tweak the
hypertree graph drawing algorithm so that edges of a shallower depth
are drawn last, so that in effect they overlay above deeper edges? I
was able to recolor edges according to depth, but discovered the
hypertree algorithm has the shallowest drawn first. The result:

http://www.learningpoint.ca/network/

FYI, This freebie app draws links between presenters and keywords that
describe them. I was toying with this as a way to augment the usual
linear writeup of conference presenters here:

http://www.gaininggroundsummit.com/speakers.htm

Regards, and thanks for a shrink-wrapped hypertree / graphics toolkit!

Damion

On Oct 8, 8:05 am, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> Well, people generally just paste it or link to it, however I like the
> suggested posting guidelines by the google maps group:
> "Posting code is not helpful, although if you have a *specific* question
> about a *specific few* (less than five) lines of code, you *might* get an
> answer if you post those. Don't be surprised if you get asked for a link
> instead."
>
> http://groups.google.com/group/Google-Maps-API/web/suggested-posting-...
Reply all
Reply to author
Forward
0 new messages