Would it be possible to draw family trees with this toolkit?

[gwrynn]

Hi all,

I'd like to implement an interactive family tree for my blog. It
should look approximately like this:

Grandfather ------ X------ Grandmother
|
|
-----------X---------
| |
Uncle Mother --X-- Father
|
|
-------X------
|
|
Son
Daughter


I think that this would require to draw a spacetree where several
parents and children are allowed appear at the same level of the tree
with empty nodes at the places marked with X.

Would this be possible? I'm very new to JS and it would help a great
deal to get some info before I dive into this.

Any help is greatly appreciated.

Cheers
Tom

[Nicolas Garcia Belmonte]

Hi,

A tree structure like this would seem possible but would require some
code customization at the node rendering level. What I mean with this
is that you'd be using the same tree layout that the Spacetree
provides, but instead of rendering simple rectangles as nodes you'd be
rendering a complex drawing that would either represent a single
person (like with Uncle) or a couple like in "Grandfather ------
X------ Grandmother" . Also instead of drawing simple lines for edges
you'd be rendering something a little bit more complex as edges. I've
seen people use the toolkit to draw family trees before, unfortunately
I don't remember the links to those projects.

You can learn more about creating node rendering functions for the
spacetree in this documentation:

http://thejit.org/static/v20/Docs/files/Visualizations/Spacetree-js.html#ST.Plot.NodeTypes

You can also find an example that implements a node rendering function
for the spacetree here:

http://thejit.org/static/v20/Jit/Examples/Spacetree/example5.html

The code is here:

http://thejit.org/static/v20/Jit/Examples/Spacetree/example5.code.html

A more complex example for the spacetree is here:

http://thejit.org/static/v20/Jit/Examples/Other/example3.html

The code for the example is here:

http://thejit.org/static/v20/Jit/Examples/Other/example3.code.html

You might also be interested in some simple canvas tutorial to get
started rendering custom nodes and edges:

https://developer.mozilla.org/en/canvas_tutorial

I hope this helps,

> --
> You received this message because you are subscribed to the Google Groups "JavaScript InfoVis Toolkit" group.
> To post to this group, send email to javascript-information...@googlegroups.com.
> To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.
>
>

--
Nicolas Garcia Belmonte - http://philogb.github.com/

[Thomas Schutzmeier]

Nicolas,

Thank you for your elaborate answer and the references, this really
helps a lot. I didn't think about drawing couples in a single node,
that's an excellent idea!

Cheers,
Tom