How to create a "Bracket" type chart?

[Jeremy]

I've tried searching, and there is probably a more proper term than
bracket, for how to create a chart where each side is a tree with a
single central node. Basically a challenge bracket type setup. Both
vertical and horizontal would be great but horizontal is the main
goal.

I'm guessing that I should start with the tree and re-use the root
node for each direction then sprawl based upon that, but I'm a bit
unsure how to achieve the overall desire.

Our basic data is JSON and consists of something similar to:

root_node = {
name: 'the nodes name',
winnersBracket: [], // array of nodes to the left of this node, they
will only have inbound values
challengersBracket: [] // array of nodes to the right of this node,
they will only have outbound values
}

node = {
name: 'the nodes name',
children: [] // array of child nodes of type node
}

This is for our local soap box derby website to show the race brackets
after the fact. Any help greatly appreciated :)

- Jeremy

[Frank Guerino]

Hi Jeremy,

You might want to take a look at the Dendrogram examples...

• "Dendrogram"
• "Dynamic Node-Link Tree"
• "Dendrogram with Right Angle Elbows"
• "Circular Dendrogram and Phylogram"

They currently draw trees in single directions, like to the right of the base node, but I imagine that you could also use the same philosophy to have it generate a tree to the left of the base node, as well.  If I understand what you're describing, this would allow you to create your "bracketing", on both sides of the base node.

I hope this helps,

Frank

[Jeremy Darling]

That was where I started, but I can't figure out how to get it to draw to both sides.  I'm basically looking to achieve something like the attached image (just in case it doesn't attach I stole it from here as a reference  http://1.bp.blogspot.com/_-hyJR_qDZ7o/S7ENdjtfj2I/AAAAAAAABHQ/wnq90uapmmo/s1600/madness+elite+eight.bmp )

Really the difference is that we want to have racers instead of basket ball teams and some branches will be deeper than others.

 - Jeremy

[Frank Guerino]

Hi,

Playoff Schedule representations are exactly what I saw in my mind, when you described it, so I'm glad we're on the same page.

I think the "Dendrogram with Right Angle Elbows" is what you'll want.

Throughout the example, you'll notice references to X and Y coordinates (in some cases dx and dy).  These coordinate controllers will allow you to control placement.  In the example, X and Y seem to only grow in the "positive" direction (i.e. X grows to the right and Y grows down).  Note: When you draw a canvas, origina (i.e. 0,0) is in the upper left corner of the canvas.

I'd guess that if you move the placement of the root node and all existing nodes to the right by some offset, then drawing backwards (or to the left of the root) will be based on that offset minus the distance you want to place a node at.  I believe a good example to learn about how to do this is "Bar Chart With Negative Values."

I haven't done any of this with nodes before but it appears to be a math problem, more than anything else.  I'm sure Mike and the community will chime in if I'm wrong.

I hope this helps,

Frank

[Jeremy Darling]

Ok, as it says, this probably isn't the best way of doing it, but it works:  http://blockses.appspot.com/2503502 

Hopefully someone besides me finds some use for it.

 - Jeremy

[Keenan Brock]

Jeremy,

I like the bracket. Very nice.

I also came across an ncaa bracket demo that I thought was great.
Don't think it was mentioned on this list yet.

http://thepowerrank.com/visual/NCAA_Tournament_Predictions

Thanks for posting your code,
Keenan

On Apr 26, 5:57 pm, Jeremy Darling <jeremy.darl...@gmail.com> wrote:
> Ok, as it says, this probably isn't the best way of doing it, but it
> works:  http://blockses.appspot.com/2503502
>
> Hopefully someone besides me finds some use for it.
>
>  - Jeremy
>
>
>
>
>
>
>
> On Wed, Apr 25, 2012 at 2:47 PM, Frank Guerino <fgueri...@gmail.com> wrote:
> > Hi,
>
> > Playoff Schedule representations are exactly what I saw in my mind, when
> > you described it, so I'm glad we're on the same page.
>

> > I think the "Dendrogram with Right Angle Elbows<http://bl.ocks.org/d/2429963/>"

> > is what you'll want.
>
> > Throughout the example, you'll notice references to X and Y coordinates
> > (in some cases dx and dy).  These coordinate controllers will allow you to
> > control placement.  In the example, X and Y seem to only grow in the
> > "positive" direction (i.e. X grows to the right and Y grows down).
> >  Note: When you draw a canvas, origina (i.e. 0,0) is in the upper left
> > corner of the canvas.
>
> > I'd guess that if you move the placement of the root node and all existing
> > nodes to the right by some offset, then drawing backwards (or to the left
> > of the root) will be based on that offset minus the distance you want to
> > place a node at.  I believe a good example to learn about how to do this is

> > "Bar Chart With Negative Values <http://blockses.appspot.com/2368837>."

>
> > I haven't done any of this with nodes before but it appears to be a math
> > problem, more than anything else.  I'm sure Mike and the community will
> > chime in if I'm wrong.
>
> > I hope this helps,
>
> > Frank
>

> > On Wed, Apr 25, 2012 at 3:32 PM, Jeremy Darling <jeremy.darl...@gmail.com>wrote:
>
> >> That was where I started, but I can't figure out how to get it to draw to
> >> both sides.  I'm basically looking to achieve something like the attached
> >> image (just in case it doesn't attach I stole it from here as a reference

> >>http://1.bp.blogspot.com/_-hyJR_qDZ7o/S7ENdjtfj2I/AAAAAAAABHQ/wnq90ua...

[Frank Guerino]

Hi Jeremy,

Looks like you definitely figured it out and it looks great!  It will be very useful.

Frank