Additional hierarchy layouts

[techniq]

I created three new vx components for the remainder of the d3-hierarchy layouts.

<Pack />

• Component and example
• d3 example ported from

<Partition />

• Grid

  • Component and example
  • d3 example ported from

• Sunburst

  • Component and example
  • d3 example ported from

<Treemap />

• Component and example
• d3 example ported from

Recommended API change

• Only pass data to children render function for all hierarchy components instead of calling data.links(), data.descendants(), data.leaves() and passing each of them explicitly. I haven't measured, but I'm expecting an incurred cost for each call, and don't expect a user to need both descendants or leaves in the same visualization, for example.

I'll try to submit a PR with these 3 new layout components to vx-hierarchy package, but maybe someone else could create some prettier examples for the gallery than my d3 ported ones? It would also probably be good to put some hierarchical data in vx-mock (maybe the flare.json that d3 uses). It would also be nice to probably create a data generator for this type of data.

I'm next going to start looking at creating an orthogonal link, useful for brackets and possible a curved layout (see this vega example and change the link type). A 45deg elbow would be nice as well. I'm not sure if all of these should be separate components like LinkHorizontal, LinkVertical, and LinkRadial or just a type prop (or something) such as <LinkHorizontal type="orthogonal" />. Thoughts?

[hshoff]

Wonderful! these will be excellent and much needed additions.

maybe someone else could create some prettier examples for the gallery than my d3 ported ones?

I'm happy to do this.

It would also probably be good to put some hierarchical data in vx-mock... It would also be nice to probably create a data generator for this type of data

Good idea. I can add this as well. Will try to find some fun data.

I'm not sure if all of these should be separate components like LinkHorizontal, LinkVertical, and LinkRadial or just a type prop (or something)

I like the separate components instead of trying to overload a simple general component. I see your point though and will give this some more thought.

Only pass data to children render function for all hierarchy components instead of calling data.links(), data.descendants(), data.leaves() and passing each of them explicitly. I haven't measured, but I'm expecting an incurred cost for each call, and don't expect a user to need both descendants or leaves in the same visualization, for example.

super agree with this. i will update all of the different layout components in @vx/hierarchy after we land your PR that adds the new components.

Thanks for this! 🙌

[techniq]

One thing I just remembered, in Example.js for Sunburst you'll notice I had to use arc from d3-shape instead of vx's <Arc /> because vx's also uses the pie layout within it.

Maybe worth separating out a <Pie /> component?

[techniq]

@hshoff Don't miss this comment above ;)