Treemap Visualization

[erikbonn]

Description

This PR is to bring in the Vega Treemap visualization as a POC to RSC. This uses and displays hierarchical data as a set of nested rectangles. I've implemented things similar to what you would see in the Vega example, but added a few interesting features that may or may not be desired. Some work is still needed as far as parameterizing a few more things, testing, and making sure we are considering the right props that should be allowed, but this hopefully gets us most of the way there.

I have the nodes text of the tree avoiding the root, and the leaves text avoiding the nodes and root text so that there weren't collisions, but it's not totally perfect. I've seen other examples online where a small header(maybe another 'ghost' node or a thick top border) contains the name of the node so that things aren't as cluttered. This could be an option in the future. For now, I went with sort of a word cloud approach where the node text floats in the middle while having the leaves text avoid it.
I also added the concept of a segment key that allows us to add scales with corresponding colors that match from the highest parent downward, then we just adjust opacity as we go deeper. This has some limitations, since the human eye can only perceive a few levels of opacity, so maybe after a certain point we default to a light color or try something else to visually indicate nested nodes/leaves. I also made the default border thicker on the nodes as well compared to the leaves to aid in seeing nested nodes.

This was a really fun project and my first foray into Vega visualizations, and I hope that we can eventually get this visualization merged in! I appreciate any feedback. Thanks!

Related Issue

(Need to create an issue)

Motivation and Context

The Treemap visualization is an interesting Vega chart that I have wanted to contribute to RSC. During a hackathon week at Adobe, I decided to implement this viz. This could be another useful viz added to RSC consumers.

How Has This Been Tested?

This has not been thoroughly tested yet, aside from visually in storybook and the online Vega spec builder. This is a work in progress where I wanted to get as much done during our hackathon as I could.

Screenshots:

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.