Treemap vs. Sunburst - Same concept?

[Randy Zwitch]

In trying to learn more about the treemap visualization that is presented in the Vega editor, I came across this d3 example of a Sunburst chart, which uses the same flare.json data:

http://bl.ocks.org/mbostock/4348373

Can anyone give a real quick explanation/pros and cons to visualizing with a tree map vs a sunburst? Do they actually represent the same type of hierarchical structure, or is it just a coincidence they use the same dataset?

Thanks!

[FLECK Kyllian]

Human has more difficulty to apprehend and visualize areas so it's preferable to use treemap than sunburst ^^

[FLECK Kyllian]

*and angles

[Roy I]

Hi Randy,

Many articles from Google search...

https://blogs.office.com/2015/08/11/breaking-down-hierarchical-data-with-treemap-and-sunburst-charts/

https://docs.oracle.com/cd/E28280_01/web.1111/b31973/dv_treemap.htm

https://www.medien.ifi.lmu.de/lehre/ws1112/iv/folien/IV-W11-07-Hierarchies.pdf

[iain.di...@gmail.com]

Both represent hierarchically arranged data.

The treemap uses a Cartesian coordinate system; the sunburst a polar coordinate system. However, whereas the treemap uses area (two-dimensions), the sunburst uses angle (one dimension). Neither area nor angle are ideal, but design is about trade-offs. In this case, I think area is probably more effective than angle when effectiveness is a matter of speed and accuracy of interpretation. (You can find more about the effectiveness of the different visual variables in Tamara Munzner's excellent Visualization Analysis and Design. Figure 5.1 provides an excellent overview.) That said, there's more to "effectiveness" than speed and accuracy; we might, for example, be irresistibly fascinated with the circular.

That's a bit telegraphic, but I hope it's useful. You're question is interesting and not something I'd really considered before.

Iain

[Randy Zwitch]

Thanks for the links Roy.

[Randy Zwitch]

Thanks for the explanation Iain! Where I was struggling was how to interpret the same data, since it was represented in different ways. You're right that the sunburst is more difficult (to me), whereas the treemap makes a bit more sense.

But as you said, "people" are fascinated with circles, and someone asked me to do a sunburst, which I don't believe is currently possible with Vega.

[iain.di...@gmail.com]

I've not tried to create a sunburst with Vega, but would you not facet the data (to create the hierarchy) then use the arc mark type? You would set the innerRadius and outerRadius according to a new scale, which would accord with the level in the hierarchy.

If I get a moment, I'll try to create one -- I can't promise, though!

Stephen Few said people are fascinated with circles. I'm not sure how much empirical evidence there is for the claim!

Iain

[Randy Zwitch]

That's a nice thought, I'll give it a try. I had assumed that I needed a radial axis to do it, but maybe not.

[iain.di...@gmail.com]

I take that back: I'm not sure it's possible, because inner levels would need access to outer levels. This is where I got to before I drew a blank:

{
  "width": 800,
  "height": 800,

  "data": [
    {
      "name": "tree",
      "format": {
        "type": "treejson"
      },
      "values": {
        "name": "root",
        "value": 9,
        "children": [
          {
            "name": "level_1",
            "value": 3,
            "children": [
              {"name" : "level_1_1", "value": 1},
              {"name" : "level_1_2", "value": 1},
              {"name" : "level_1_4", "value": 1}
            ]
          },
          {
            "name": "level_2",
            "value": 3,
            "children": [
              {"name" : "level_2_1", "value": 1},
              {"name" : "level_2_2", "value": 1},
              {"name" : "level_2_4", "value": 1}
            ]
          },
          {
            "name": "level_3",
            "value": 3,
            "children": [
              {"name" : "level_3_1", "value": 1},
              {"name" : "level_3_2", "value": 1},
              {"name" : "level_3_4", "value": 1}
            ]
          }
        ]
      }
    }
  ],

  "marks": [
    {
      "type": "group",
      "from": {"data": "tree"},

      "marks": [
        {
          "type": "arc",

          // And now? We could use a scale for each level, but inner levels
          // would need access to outer levels to determine the range. We could
          // use a pie transform, but we would encounter the same problem.

        }
      ]
    }
  ]

}

[Lenny T]

I came across this thread while trying to find out the same thing: when would I use a Sunburst vs. a Treemap, and thought I'd share what else I'd found:

TLDR: in a sunburst it's easier to compare the sizes of things at the same level, but at the price of wasted space around the circle.

Microsoft offers a pretty good answer:

"After getting acquainted with the concept of hierarchical data and the Treemap and Sunburst charts, you might wonder, “Why use one over the other?” The answers lie in what information you want to convey in the chart. Treemaps, by their rectangular nature, are better suited for comparison among hierarchical levels. Just in the way our minds differentiate size and shape, rectangles and straight lines are easier to compare than slices and angles. Treemaps are optimized to show lots of data, because it stretches to within its bounding box, whereas plotting a Sunburst is fitting a circular chart into any rectangular window. Space that could be used to tell a story with your data is lost in the corners." 

Also from Fusioncharts: "In a treemap, as we go down the hierarchical levels, the space available to plot decrease dramatically. This sets a limitation to the number of hierarchical levels that can be displayed at once. As the categories delve deeper, they become harder to read. This is good for comparing macro-level data and giving viewers a sense of how many sub-categories there are. But it isn’t really effective when you want to drill down into those sub categories."

Cheers,

LT