Google Data Studio

Google Data Studio – Treemap as horizontal filter menu

Last week, Google Analytics team has launched a new chart type for Google Data Studio : Treemap.



As usual, it is an opportunity for Google Data Studio lovers to explore a new feature and find other purposes of uses, besides common visualisation needs: A quick view of data distribution on several levels.


Let’s create an horizontal navigation menu (like on a website) to use it as a dimension filter 🙂


Treemap as horizontal filter menu

Treemap configuration

Draw your treemap using the full width of your report

  • In the data tab
    • Select your dimension
      (Default channel grouping in the example)
    • Create a chart calculated metric, name it “One” and use the formula: 1+0
    • Check “apply filter” option
  • In the style tab
    • In the treemap section, define the wished background color for the menu items through mid color value selection
    • Turn off branch header and scale bar
    • Adapt the text size and color
    • “Do not show” the chart header

Treemap as horizontal filter menu - Chart configuration

Explanations

Here some explanations about the configuration above

  • Inside Google Data Studio and except for tables, treemap chart is the only way to get dynamic clickable areas displaying dimension values as label (and not metric value)
  • Using 1 static metric value for all dimension values is a way to get equal treemap areas for our menu
    (and we need to create a fake formula because Google Data Studio doesn’t allow to fill a static value as calculated field)
  • Sizing the treemap with a small height will draw all the equal areas on the same line
  • Because all dimension values get 1 as metric value, mid color value will be used for all equal areas
    (so no need to define max and min color value)

Additional tip

For all chart filters, you can select several values or combinations of values using crtl+click (mac cmd+click).


Matelot navigue sur les flots