JavaScript library for hierarchical data visualization. Space-efficient non-rectangular treemaps, animated zooming and engaging transitions. Free demo.

FoamTree is a JavaScript tree map visualization with innovative layout algorithms and animations.

Very large hierarchies Using FoamTree to browse Tree of Life data, 100k+ groups at 100+ levels.

Determines the general type of layout to generate. Depending on this option, FoamTree will produce polygon-based organic-looking visualization or the traditional rectangular tree map. …

What's in the code? Getting search results from a public search engine using AJAX and converting the results to FoamTree format. Using the CarrotSearchFoamTree.loader utility …

You can use this demo to visualize data stored in an Excel or OpenOffice spreadsheet. See this spreadsheet for the required cell layout. All you need to do is to copy the data from your …

Using the layout option to choose between rectangular and polygonal treemap layouts. Using the stacking option to enable "flattened" view of the treemap. Using the descriptionGroupSize and …

This demo visualizes Tree of Life datasets available from www.phyloxml.org. Use the search box or links below to zoom to a specific node. Double click a group to open it and zoom. Press Esc …

Polygon sizing accuracy FoamTree tries to ensure that the areas of polygons correspond to the weights defined in the input groups. More specifically, the ratio of polygon area to the parent …

What's in the code? Using a fast JavaScript image blur to generate a blurry backdrop for the visualization. Using the groupContentDecorator callback to disable drawing of the default …