FoamTree

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

To add a FoamTree dependency to your project:

npm install @carrotsearch/foamtree

The simplest React component showing a FoamTree visualization:

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
• FoamTree demos and code examples
• FoamTree documentation

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: A 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 JavaScript code.

FoamTree is free to use with Carrot Search branding. A license key, passed in the licenseKey option, unlocks the branding options; contact Carrot Search for licensing.