condensed/alternate layouts for tree graph?

[Andy K]

Hi All,

I'm looking at options for displaying a tree-style graph in a more
narrow/condensed way -- the tree will have a single root node, and
then 2-3 levels of children/grandchildren nodes, potentially very
dense (some nodes having 20+ children).

The design constraints are that the full diagram be displayed on a web
page with multiple other elements, so it would need to be either a
small square or a long rectangle (either vertical or horizontal).
Ideally, nodes would be labelled, but these could be mouseover-only.
I'm thinking of a dendrogram/cluster as one option, but would be
interested in hearing other creative suggestions.

Thanks --

Andy

[Andy Kalinowitsch]

Thanks for the suggestions, Mike -- the indented tree seems like the best option for an easily-readable vertical display.

For square space, I'm also thinking of a quartered sunburst or quartered radial tree (showing only the top-right quadrant of each, with origin/root-node in the lower-left corner), and forcing all nodes/links into that 90-degree slice.  Haven't looked at if/how the layouts would need to be tweaked for that yet ...

Andy

On Thu, Mar 22, 2012 at 9:38 AM, Mike Bostock <mbos...@cs.stanford.edu> wrote:

An indented tree layout is one option if you want the long rectangle
approach. Indented trees aren't great for seeing the entire tree
structure at-a-glance, but each node is easily readable (since it has
its own row), and it's easy to tell the parent for each node due to
indentation.

http://bl.ocks.org/1093025

For a square space, the circle-packing layout is very good at showing
the hierarchy through containment (enclosure), and it's
aesthetically-pleasing. You could use uniform-size circles.

http://mbostock.github.com/d3/talk/20111116/pack-hierarchy.html

For a more traditional tree diagram, use the tree layout. This uses
the "tidy" algorithm which should give you the best use of space while
still showing the tree structure. You may need to adjust the size of
the layout dynamically based on the size of the tree. There's an
outstanding feature request to support fixed-size nodes:

https://github.com/mbostock/d3/issues/317

Mike

[Mike Bostock]

[first name last name]

Thanks for the suggestions of Indented Tree. It seems the link  Indented Tree / D3 / Observable (observablehq.com) is publish in 2020. But your comment is at 2012, how do you get that link 9 years ago？

[Gordon Woodhull]

Mike has redirects from many of his old bl.ocks to new Observable notebooks. :)

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/ce44b851-505c-46e8-b703-58b216d89f97n%40googlegroups.com.