FoamTree demos show examples of simple and advanced use of FoamTree API.
Quick start demo

Quick start

A simple example of embedding FoamTree in a HTML page.

Photo explorer

Photo explorer

Interactive explorations of photos available on Flickr.

Financial Times 500 visualization

FT500 explorer

Interactive visualization of world's largest companies according to Financial Times.

GitHub search and visualization in FoamTree

GitHub search & visualization

Visualization of GitHub search results, makes advanced usage of FoamTree APIs.

FoamTree settings panel

Tuning panel

Interactive tweaking of all FoamTree options.

Visualizing 100k+ groups in FoamTree

Very large hierarchies

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

Deferred layout

Deferred layout

Keeping FoamTree responsive while visualizing a large and deep hierarchy.

SCADA system dashboard using FoamTree

SCADA system dashboard

Using FoamTree to build a dashboard of readouts from a SCADA system.

FoamTree on touch & mobile

FoamTree on touch & mobile

Optimizing FoamTree for touch and mobile devices.

Generating fancy background images using FoamTree

Fancy backdrop image generator

Not often useful but fun to do: generating fancy background images using FoamTree.

Drawing images inside polygons

Images inside polygons

Drawing custom content, such as SVG images, inside FoamTree polygons.

Rectangular treemap in FoamTree

Rectangular treemaps

Preserving the original order of groups in FoamTree using rectangular layouts.

Interactive custom content in FoamTree

Interactive custom content

Making custom content interactive. Click the up/down arrows to change group weights.

Visualizing CSV data in FoamTree

CSV to FoamTree

A simple conversion of tab-separated CSV data to FoamTree JSON.

Showing data loading progress message

Loading indicator

Showing data loading and layout preparation indicator.

Editing of FoamTree labels

Group label editing

A simple utility for interactive editing of FoamTree group labels.

Lazy-loading of data

Lazy-loading of visualization data

Fetching child groups only when the user opens the parent group for browsing.

Showing interaction guide and hints

Interaction guide & hints

Enabling FoamTree interaction guide and contextual gesture hints.

Showing the progress of layout relaxation

Layout relaxation progress

Showing layout relaxation progress bar.

Visualizing code coverage

Visualizing unit test code coverage

Showing Java code coverage statistics gathered by Atlassian Clover.

FoamTree with custom group tooltips

Custom per-group tooltips

Displaying custom HTML-based tooltips with rich information about each group.

Group descriptions

Group descriptions

Allocating space for larger group descriptions.

Polygon sizing accuracy

Polygon sizing accuracy

Visualization of how closely polygon areas represent group weights.

Settings for FoamTree 2.0.x look and feel

FoamTree 2.0.x look and feel

Tuning FoamTree 3.x to look and behave like FoamTre 2.0.x.

Sticky HTML tooltips over FoamTree

Sticky tooltips

Repositioning HTML overlays to match FoamTree zoom, pan and expose transformations.

Graph navigation

Graph navigation

Using FoamTree to navigate a graph. Includes a bit more advanced API usage.

FoamTree in scrollable content

FoamTree in scrollable content

Allowing default browser actions for scroll and other events.

Showing group details in title bar

Details in title bar

Showing more details about a group in the title bar.