FoamTree

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

demo

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:

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.

Package detail

@carrotsearch/foamtree

readme

FoamTree