A tree map visualization tool for hierarchical data.

FoamTree is an in-browser implementation of hierarchical Voronoi Treemaps. With animated transitions and zooming, varied layouts and visual customizations, FoamTree aids the understanding of hierarchical data through an efficient and engaging user experience.

FoamTree is an HTML5 application, and it can be integrated into any HTML page using a simple JavaScript API - no plugins required.

The tool itself relies on data models that consist of a hierarchical structure of groups, represented by a polygon. Each group shown in the visualization can be in a combination of four different states, depending on user interactions:

  1. selected / unselected: groups selected by the user are drawn with a thick outline
  2. open / closed: if a group is open, its label and polygon are not painted so that the user can interact with its child groups
  3. exposed / unexposed: an exposed group gets zoomed in, so that the user can inspect its contents more easily; groups that are not exposed at the moment are zoomed out and dimmed
  4. hovered: a group over which the user's pointer is hovering gets highlighted



Image: FoamTree.

These states can be customized further using a multitude of animation parameters, and visual tuning settings that adjust colors, fonts, borders, shadows, and other aspects of the FoamTree cells.


Image: FoamTree.

Visit the FoamTree website here.