Skip to content

Treemap

Jump to bottom
Pieter Verschaffelt edited this page Apr 30, 2021 · 5 revisions

The treemap is a visualization for hierarchical quantitative data that renders a collection of nested rectangles that visually depict the parent-child relationships of the provided hierarchy.

Treemap showcase A live example of this visualization can be found on Observable.

Internals

The treemap visualization is rendered using plain HTML (div-tags). This means that the visualization cannot easily be exported as an SVG file. You can, however, convert the image to a PNG of an arbitrary size and export that, if required.

API

Treemap

constructor

The constructor of the Treemap class automatically starts rendering the treemap upon invocation and has the following signature

  • element: HTMLElement: The HTMLElement in which the treemap should be rendered.
  • data: DataNodeLike: The root node of the hierarchical data that should be rendered by this treemap. See DataNode for how to construct these objects properly.
  • options: TreemapSettings (optional): Can be used to configure the treemap before rendering. See below for all the options that are currently supported.

TreemapSettings

A TreemapSettings object can be used to fully configure the treemap and specifies a variety of different properties:

Values

  • width: number (optional, default = 800): Maximum width of the visualization in pixels.
  • height: number (optional, default = 800): Maximum height of the visualization in pixels.
  • enableTooltips: boolean (optional, default = true): Are tooltips shown when hovering over a node in the treemap?
  • levels: number | undefined (optional, default = undefined): Maximum depth of the data object. By default the actual depth of the given data is used.
  • labelHeight: number (optional, default = 10): Height (in pixels) of the breadcrumb bar.
  • colorRoot: string (optional, default = "#104B7D"): Color of the root rectangle. Should be a valid HTML color string.
  • colorLeaf: string (optional, default = "#FDFFCC"): Color of the leaves. Should be a valid HTML color string.
  • colorBreadcrumbs: string (optional, default = "#FF8F00"): Color of the breadcrumb bar.

Functions

  • rerootCallback (optional, default = identity function): Function that's called whenever the user clicks on a node. This function should not return anything and is called with 1 parameter:
    • d: DataNode: The node that has been clicked by the user and which will become the new root of the visualization.
  • getBreadcrumbTooltip: (optional, default = function that returns name of a node): Function that returns a string to use as tooltip for the breadcrumbs. This function should return a string and is called with 1 parameter:
    • d: DataNode: The node for which a breadcrumb title needs to be retrieved.
  • getToolTip (optional, default = generic tooltip function) Returns the html to use as tooltip for a node. Is called with a node that represents the current node that's being hovered by the user. The result of getTooltipTitle is used for the header and getTooltipText is used for the body of the tooltip by default. This function needs to return a string representing HTML-code that will be executed and receives 1 parameter:
    • d: DataNode: Node for which the tooltip should be returned. NOTE: Be very cautious in passing user input directly as a result of this function. Please always sanitize the user's input before returning it, as this might lead to reflected XSS-attacks.
  • getToolTipTitle (optional, default = generic title function) Returns text that's being used for the title of a tooltip. This tooltip provides information to the user about the node that's currently hovered by the mouse cursor. This function needs to return a string representing HTML-code that will be executed and receives 1 parameter:
    • d: DataNode: Node for which the title should be returned. NOTE: Be very cautious in passing user input directly as a result of this function. Please always sanitize the user's input before returning it, as this might lead to reflected XSS-attacks.
  • getToolTipText (optional, default = generic body function) Returns text that's being used for the body of a tooltip. This tooltip provides information to the user about the node that's currently hovered by the mouse cursor. This function needs to return a string representing HTML-code that will be executed and receives 1 parameter:
    • d: DataNode: Node for which the tooltip body text should be returned. NOTE: Be very cautious in passing user input directly as a result of this function. Please always sanitize the user's input before returning it, as this might lead to reflected XSS-attacks.
  • getLevel (optional, default = generic level function) Returns the level that's associated with the given node. This function should return an integer and receives one parameter:
    • x: d3.HierarchyRectangularNode<DataNode>: The node for which the level should be returned. Please note that this is not a regular DataNode, but instead a d3.HierarchyRectangularNode<DataNode>.
Clone this wiki locally