Treemap

Treemap Chart reusable API module that shows how a total divides into its parts: each entry is a rectangle with an area proportional to its value.

Example

import { treemap } from '@britecharts/core';

// dataset: [{ name, value }]
treemap()
    .width(500)
    .height(300)
    .render('.css-selector', dataset);

• Treemap
  • treemap(_selection)
    • static
      • .a11yTitle(_x) ⇒ String | null | module
      • .a11yDescription(_x) ⇒ String | null | module
      • .a11yDataTable(_x) ⇒ Boolean | module
      • .a11yKeyboardNavigation(_x) ⇒ Boolean | module
      • .animationDuration(_x) ⇒ duration | module
      • .colorSchema(_x) ⇒ Array.<String> | module
      • .hasLabels(_x) ⇒ Boolean | module
      • .exportChart(filename, title)
      • .height(_x) ⇒ Number | module
      • .isAnimated(_x) ⇒ Boolean | module
      • .isLoading(_flag) ⇒ boolean | module
      • .labelsNumberFormat(_x) ⇒ String | module
      • .margin(_x) ⇒ margin | module
      • .on() ⇒ module
      • .tooltip(_x) ⇒ module | null
      • .render(target, [data]) ⇒ module
      • .valueLocale(_x) ⇒ LocaleObject | null | module
      • .width(_x) ⇒ Number | module
    • inner
      • ~TreemapData : Array.<Object>

treemap(_selection)

This function creates the graph using the selection as container

Kind: Exported function

Param	Type	Description
_selection	D3Selection	A d3 selection that represents the container(s) where the chart(s) will be rendered

a11yTitle(_x) ⇒ String | null | module

Gets or Sets the name screen readers announce for the chart. It is set as the svg's aria-label. Unset, the chart is announced as "Treemap".

Kind: method of treemap
Returns: String | null | module - Current a11yTitle or Chart module to chain calls
Access: public

Param	Type	Description
_x	String | null	Desired accessible title for the chart

a11yDescription(_x) ⇒ String | null | module

Gets or Sets a longer description screen readers announce after the chart's name, such as what the data shows. It is rendered as the svg's <desc>. Unset, the chart has no description.

Kind: method of treemap
Returns: String | null | module - Current a11yDescription or Chart module to chain calls
Access: public

Param	Type	Description
_x	String | null	Desired accessible description for the chart

a11yDataTable(_x) ⇒ Boolean | module

Gets or Sets whether the chart renders its data as a visually hidden table after its svg, which screen readers can read cell by cell. On by default; set it to false when the app gives the data its own accessible form.

Kind: method of treemap
Returns: Boolean | module - Current a11yDataTable or Chart module to chain calls
Access: public

Param	Type	Description
_x	Boolean	Whether to render the data table

a11yKeyboardNavigation(_x) ⇒ Boolean | module

Gets or Sets whether a keyboard can move through the chart's data points: the chart takes one tab stop, the arrow keys move between points, Home and End go to the first and last, and Escape lets go. The tooltip and highlights follow focus as they follow the pointer. On by default.

Kind: method of treemap
Returns: Boolean | module - Current a11yKeyboardNavigation or Chart module to chain calls
Access: public

Param	Type	Description
_x	Boolean	Whether the keyboard can move through the data

animationDuration(_x) ⇒ duration | module

Gets or Sets the duration of the animation

Kind: method of treemap
Returns: duration | module - Current animation duration or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	Number	1200	Desired animation duration for the graph

colorSchema(_x) ⇒ Array.<String> | module

Gets or Sets the colorSchema of the chart. Each name takes a colour.

Kind: method of treemap
Returns: Array.<String> | module - Current colorSchema or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	Array.<String>	britecharts	Desired colorSchema for the cells

hasLabels(_x) ⇒ Boolean | module

Gets or Sets whether the chart labels its cells. A label shows only where it fits: a small cell has no name, and a slightly bigger one no value.

Kind: method of treemap
Returns: Boolean | module - Current hasLabels or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	Boolean	true	Whether to draw the labels

exportChart(filename, title)

Exports the chart and fires a download: an svg file when the filename ends in .svg, and a png otherwise

Kind: method of treemap
Access: public

Param	Type	Description
filename	String	Name of the downloaded file, whose extension picks the format
title	String	Title to add at the top of the exported picture

height(_x) ⇒ Number | module

Gets or Sets the height of the chart

Kind: method of treemap
Returns: Number | module - Current height or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	Number	400	Desired height for the chart

isAnimated(_x) ⇒ Boolean | module

Gets or Sets the isAnimated value of the chart. New cells fade in and existing ones move to their new place. The chart draws without animation when the reader's system asks for reduced motion (prefers-reduced-motion), whatever this is set to.

Kind: method of treemap
Returns: Boolean | module - Current isAnimated value or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	Boolean	false	Decide whether to show chart animation

isLoading(_flag) ⇒ boolean | module

Gets or Sets the loading state of the chart

Kind: method of treemap
Returns: boolean | module - Current loading state flag or Chart module to chain calls
Access: public

Param	Type	Description
_flag	boolean	Desired value for the loading state

Example

chart.isLoading(true)

labelsNumberFormat(_x) ⇒ String | module

Gets or Sets the d3-format string of the values on the cells

Kind: method of treemap
Returns: String | module - Current labelsNumberFormat or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	String	','	Desired format

Example

treemapChart.labelsNumberFormat('$,.0f')

margin(_x) ⇒ margin | module

Gets or Sets the margin of the chart

Kind: method of treemap
Returns: margin | module - Current margin or Chart module to chain calls
Access: public

Param	Type	Description
_x	Object	Margin object to get/set

on() ⇒ module

Exposes an 'on' method that acts as a bridge with the event dispatcher We are going to expose this events: customMouseOver, customMouseMove, customMouseOut, and customClick. Each sends the entry, the pointer's position and the chart's size.

Kind: method of treemap
Returns: module - Treemap Chart
Access: public

tooltip(_x) ⇒ module | null

Gets or Sets the tooltip the chart shows: a tooltip(), set on this chart only. The chart connects it to its pointer and keyboard events, draws it in place, and sets the labels its data points need, unless they were set on the tooltip; it does so now if the chart has drawn, and again on every draw. Its event handlers go under the britechartsTooltip namespace. Null, or another tooltip, removes the one it had.

Kind: method of treemap
Returns: module | null - Current tooltip or Chart module to chain calls
Throws:

• Error When the tooltip is already set on another chart

Access: public

Param	Type	Description
_x	module | null	The tooltip to show

Example

treemap().tooltip(tooltip()).render('#chart', data);

render(target, [data]) ⇒ module

Draws the chart into a target: a CSS selector, an element or a d3 selection, as select(target).datum(data).call(chart) does. A selector draws into the first element it matches. Without data, the chart redraws with the data it last drew there.

Kind: method of treemap
Returns: module - The chart module, to chain calls
Throws:

• Error When the target matches no element

Access: public

Param	Type	Description
target	String | Element | D3Selection	Where to draw the chart
[data]	Object	The data to draw

Example

treemap().width(600).render('#chart', data);

valueLocale(_x) ⇒ LocaleObject | null | module

Gets or Sets the locale the values on the cells are formatted with. Check the d3-format docs for the required values.

Kind: method of treemap
Returns: LocaleObject | null | module - Current locale or Chart module to chain calls
Access: public

Param	Type	Description
_x	LocaleObject | null	Desired locale

width(_x) ⇒ Number | module

Gets or Sets the width of the chart

Kind: method of treemap
Returns: Number | module - Current width or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	Number	780	Desired width for the chart

exports~TreemapData : Array.<Object>

The data a treemap takes: one entry per cell. Entries with a value of zero or less have no area, so they are not drawn, but they stay in the data table.

Kind: inner typedef of treemap
Properties

Name	Type	Description
name	String	The cell's name
value	Number	The cell's size

Example

[
    {
        name: 'Rent',
        value: 1200
    },
    {
        name: 'Groceries',
        value: 480
    }
]