display hierarchy upside down

[brno32]

I've got something based off of the example here https://airbnb.io/visx/dendrograms

Is there a way to flip it upside-down? e.g., show $ at the bottom and the children above it?

[williaster]

Hey @brno32 👋 , yes this should be straight forward!

You can simply update the <Cluster /> size prop from [width, height] to [width, -height]. Y-coordinates in svg start at 0 at the top of the chart and are positive going down, so this will result in node positions from 0 (top of the chart) to -height px above the chart (thus getting clipped).

To fix this you can just add a y-translation to the nodes to move it within the viewport, e.g., wrap it in a <Group top={height}>...

Here's a modified sandbox.

[brno32]

Thanks so much for typing this up! I really appreciate it.

Your tricks worked great 👍