FT500 explorer

This demo visualizes a ranking of world's largest companies according to Financial Times.

---

FT500 Global FT500 US FT500 Europe FT500 UK FT500 Japan FT500 Emerging markets

---

Group by

Size by

Color by

Search

---

Layout

rectangular polygonal circular

Export

Lo-res JPEG High-res JPEG Ultra-high-res PNG

---

What's in the code?

• Converting a custom FT500 JSON into FoamTree JSON.
• 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 descriptionGroupMinHeight options to configure the size of the parent group description fragment depending on the layout.
• Using groupLabelLayoutDecorator to draw labels of description groups in bold font.
• Using groupColorDecorator to draw groups in custom colors. The color palettes are computed with the formulas of Paul Tol's color schemes, the same as in palette.js.
• Using the imageData property and a download link to save the visualization image as a JPEG or PNG image.
• Using the onGroupHover and onGroupSelectionChanging events to get information about companies being hovered on and selected, so that their details can be presented in the right-hand side panel.