Implementation of Bubble Treemaps for Uncertainty Visualization.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
html
src
test
.gitignore
README.md
bubble-treemap.png
index.html
index.js
package-lock.json
package.json

README.md

Bubble Treemaps for Uncertainty Visualization

I want to thank Thilo Spinner for providing this implementation.

Disclaimer

This is an ongoing rewrite of Bubble Treemaps in JavaScript and not the code that was used to generate the images in the paper.

A live demo can be found at https://grtlr.github.io/bubble-treemaps/.

Example of a Bubble Treemap

More details about the publication, including a pre-print of the paper, can be found here.

Abstract

We present a novel type of circular treemap, where we intentionally allocate extra space for additional visual variables. With this extended visual design space, we encode hierarchically structured data along with their uncertainties in a combined diagram. We introduce a hierarchical and force-based circle-packing algorithm to compute Bubble Treemaps, where each node is visualized using nested contour arcs. Bubble Treemaps do not require any color or shading, which offers additional design choices. We explore uncertainty visualization as an application of our treemaps using standard error and Monte Carlo-based statistical models. To this end, we discuss how uncertainty propagates within hierarchies. Furthermore, we show the effectiveness of our visualization using three different examples: the package structure of Flare, the S&P 500 index, and the US consumer expenditure survey.

Citation

@article{Goertler2017BubbleTreemapsUncertainty,
  author  = {Jochen Görtler and Christoph Schulz and Daniel Weiskopf and Oliver Deussen},
  title   = {Bubble Treemaps for Uncertainty Visualization},
  journal = {IEEE Transactions on Visualization and Computer Graphics},
  year    = {2018},
  volume  = {24},
  number  = {1},
  pages   = {719-728},
  doi     = {10.1109/TVCG.2017.2743959},
}

Building

npm run build
npm run minimize