FoamTree

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

To add 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 = () => {
  const element = useRef(null);
  const foamtree = useRef(null);
  useEffect(() => {
    foamtree.current = new FoamTree({
      element: element.current,
      pixelRatio: window.devicePixelRatio || 1,
      dataObject: {
        groups: [
          { label: "Hello",  weight: 20 },
          { label: "world!", weight: 10 },
          {}, {}, {}, {}, {},
          {}, {}, {}, {}, {},
          {}, {}, {}, {}, {},
          {}, {}, // some empty groups to fill the space
        ],
      },
    });
    return () => {
      if (foamtree.current) {
        foamtree.current.dispose();
      }
    };
  }, []);

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

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: 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.