Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Example

Spreadsheet Format

Tree data structures are hierarchical. Each node has a parent nodes.  In the example below, "Pet" is the parent of "Cat," "Dog," and "Rabbit". "Cat" is the parent of "Domestic Shorthair" and "Siamese." "Pet" is also the root note, since it has no parent.

Example of tree data structure.

 

 

 

 

 

 

 

 

 

 

Each row in the Tree Map data spreadsheet represents a node on the tree. 

 

Anchor
data-sheet
data-sheet

 Column 1Column 2Column 3Column 4
Data Typeplain textplain textnumbernumber
Contents

The name of the node.

The name of the node's parent.

Note:

  • If this is the first node on the tree (called the root), leave this cell blank
  • This name must match the entry in the first column of the row that defines the parent node

A value for the node.

Note:

  • This determines the size of the node relative to the other nodes.

A second value for the node.

Note:

  • This determines the color of the node relative to the other nodes.
Optional   x

...

NodeParent
Pet 
CatPet
DogPet
RabbitPet
Domestic ShorthairCat
SiameseCat
CorgiDog
Great DaneDog
LabradorDog

Customization Options

Table of Contents
minLevel5

Go to Common Customization Options for more settings.

Font family

sets the font style for the text in on your chart

  • Type in a font style nameNote that it's best to use a standard font, such as Ariel or Times New Roman, to ensure that the font will appear the same way across different devicesthe name of the font family in the field
  • Use web-safe fonts: these fonts are installed on most browsers
  • Web-safe fonts include Arial, Arial Black, Courier New, Tahoma, Times New Roman, Verdana, and others 
Header color

sets the color of the header text for each node

  • Click the colored square to show the ColorPicker toolEither choose a color or choose to have no colorchoose your color
  • Learn more about choosing colors
Header height

sets the height of the header section for each node

  • Type in a numberNote that this number can be zero
  • "0" makes the header invisible
Header highlight color

sets the color a of text header will be when a user hovers over itheaders when you hover over them

  • Click the colored square to show the ColorPicker tool will appearEither choose a color or choose to have no choose your color
  • Learn more about choosing colors
Anchor
maximum-color
maximum-color
Maximum color

this is the color represented by the number in the fourth column of your spreadsheet. If you did not choose a value in this column of the spreadsheet, you can choose a color here to set the scale by the which the rest of the colors are generated.

  • Click the colored square to show the ColorPicker toolChoose a colorchoose your color
  • Learn more about choosing colors
Maximum color value

determines sets the value for the brightest color in your charthighest values for your chart's color scale

  • Type in a value (numeric) 
  • Nodes with values greater or equal to this number have In your spreadsheet, rows with 4th column values greater than or equal to your maximum color will display the maximum color
  • Type in a numberSet node values in column 4 of the data spreadsheet
Max levels

sets the number of node levels you want your chart to show at the same time

...

  • Click the colored square to show the ColorPicker toolChoose a colorchoose your color
  • Learn more about choosing colors
Middle color

sets the color for the node halfway between the largest and the smallest

  • Click the colored square to show the ColorPicker toolChoose a colorchoose your color
  • Learn more about choosing colors
Middle color value

determines the section of nodes that appear in the middle color

...

  • Click the colored square to show the ColorPicker toolEither choose a color or choose to have no colorchoose your color
  • Learn more about choosing colors
Minimum color

sets the color of the node(s) representing the smallest column 4 values

  • Click the colored square to show the ColorPicker toolEither choose a color or choose to have no color choose your color
  • Learn more about choosing colors
Minimum color value

determines the least intense color that appears in your chart

  • Click the colored square to choose your color
  • Learn more about choosing colors
  • Type in a number
  • Note that rows in your spreadsheet with values less than or equal to the minimum color value will appear in minimum color on your chart
Minimum highlight color

sets the highlighting color for the node with a column 3 value that is nearest the minimum color value

  • Click the colored square to show the ColorPicker toolEither choose a color or choose to have no colorchoose your color
  • Learn more about choosing colors
No value color

sets the color of nodes without a value in the third column of the spreadsheet.

  • Click the colored square to show the ColorPicker toolChoose a colorchoose your color
  • Learn more about choosing colors
No value color value

sets the color of nodes that were not given a specific color in the third column of the spreadsheet. Sets the value to use for a rectangle of 'no' color when highlighted.

  • All values greater than this will be trimmed to this value
  •  If set to null or "auto," the value will be set to the max value in the column
No value highlight color

highlights areas of the chart without values 

choose to have sections of the chart with no color be highlighted in a color when you hover the mouse over them

  • Click the colored square to show the ColorPicker toolChoose a colorchoose your color
  • Learn more about choosing colors
Show tooltips?

choose whether you want to show tooltips- the text that appears displays a text tooltip when you hover over a node

...