# [FoamTree](https://carrotsearch.com/foamtree/)

FoamTree is a highly interactive Voronoi treemap visualization for the browser.

![demo](https://get.carrotsearch.com/foamtree/npm.jpg)

---

To add a FoamTree dependency to your project:

```shell
npm install @carrotsearch/foamtree
```

---

The simplest [React component showing a FoamTree visualization](https://codesandbox.io/p/sandbox/foamtree-react-wrapper-boxt3):

```jsx
import { useEffect, useRef } from "react";
import { FoamTree } from "@carrotsearch/foamtree";

const FoamTreeView = ({ data }) => {
  const element = useRef(null);
  const foamtree = useRef(null);

  useEffect(() => {
    foamtree.current = new FoamTree({
      element: element.current,
      pixelRatio: window.devicePixelRatio || 1,
    });
    return () => {
      if (foamtree.current) {
        foamtree.current.dispose();
      }
    };
  }, []);

  useEffect(() => {
    if (foamtree.current) {
      foamtree.current.set({ dataObject: data });
    }
  }, [data, foamtree.current]);

  return (
      <div
          ref={element}
          style={{ width: "80vw", height: "50vh", margin: "auto" }}
      />
  );
};

export const App = ({}) => {
  const data = {
    groups: [
      { label: "Hello!",  weight: 20 },
      { label: "world!", weight: 10 },
      {}, {}, {}, {}, {},
      {}, {}, {}, {}, {},
      {}, {}, {}, {}, {},
      {}, {}, // some empty groups to fill the space
    ],
  };

  return (
      <div className="App">
        <FoamTreeView data={data} />
      </div>
  );
}
```
---

For more information, see:

* [FoamTree website](https://get.carrotsearch.com/foamtree/)
* [FoamTree demos and code examples](https://get.carrotsearch.com/dotatlas/latest/demos/)
* [FoamTree documentation](https://get.carrotsearch.com/foamtree/latest/api/)

---

Notable features:

* **Non-rectangular layouts**: visually pleasing non-rectangular layouts efficiently use the available space.

* **Rectangular treemaps**: traditional squarified and ordered rectangular treemaps are also supported.

* **Zooming and exposing**: animated zooming and expose interaction for browsing of deeply nested hierarchies.

* **Endless customizations**: custom content in each cell, including additional text, shapes or images.

* **Non-rectangular containers**: embedding Voronoi treemaps in any convex shape, such as a circle or diamond.

* **Support for very large hierarchies**: handling of hierarchies with 100k+ nodes on 100+ levels, such as the tree of life data.

* **Flattened and hierarchical stacking**: all levels visible at once or in a top-down progressive disclosure arrangement.

* **Multilingual and emoji-friendly**: supports all special characters your browser can display, including emoji.

* **Animated transitions**: Multitude of animation parameters can create tens of rollout and pullback effects.

* **Extensive tuning**: Settings panel for tuning of visual properties and exporting them to your Java code.


This package contains a free-of-charge branded version of FoamTree. For licensing of a branding-free
version, [contact Carrot Search](https://carrotsearch.com/contact).

---