Documentation
Tutorials
Getting started Advanced Widgets
Github Example Application

Module

Voronoi

This widget represents grouped data as variables, displayed as a tessellation of polygons whose proportions depend on the number of events represented. These polygons are subdivided into smaller polygons and constitute a hierarchical structure with as many levels as those into which the data is divided (there is a legend above the chart explaining that hierarchy).

This widget is based on FoamTree library.

Tutorials:
See:

View Source widgets/voronoi.js, line 10

Methods

# on(str, func)

Attach an event handler function for one event to the widget.

The list of events allowed is:

  • displayHelp
  • voroSearchChange
  • onKeyUp
  • onGroupSelectionChanged
  • onGroupClick
  • onGroupDoubleClick
  • onGroupHover
  • onModelChanging
  • onRolloutComplete
  • onRedraw
  • onModelChanged
  • onRolloutStart
  • onRolloutComplete
  • onRelaxationStep
  • onRedraw
  • onViewReset
  • onGroupSelectionChanging
  • onGroupExposureChanging
  • onGroupExposureChanged
  • onGroupOpenOrCloseChanging
  • onGroupOpenOrCloseChanged
  • onGroupHold
  • onGroupMouseMove
  • onGroupMouseWheel
  • onGroupMouseDown
  • onGroupMouseUp
  • onGroupDragStart
  • onGroupDrag
  • onGroupDragEnd
  • onGroupTransformStart
  • onGroupTransform
  • onGroupTransformEnd
Parameters:
Name Type Description
str string

Name of the event to listen.
func function

Function to execute when the event is triggered.

View Source widgets/voronoi.js, line 440

# setAnimation(enabled)

Display animation effects.

Parameters:
Name Type Description
enabled boolean

Indicates if it's enabled.

View Source widgets/voronoi.js, line 112

The image to display in the attribution group. The image can be specified as a relative or absolute HTTP URL or a data URI.

Parameters:
Name Type Description
path string

Path or url of an image.

View Source widgets/voronoi.js, line 123

# setColorScale(colorScale)

Set the key color for gradient:

The following values are supported:

  • Default
  • Artic
  • Boreal
  • Bruise
  • Sunset
  • Antartic
  • Sky Burst
  • Rioja Lightning
  • Kamehameha
  • Alien
  • Rainbow
Parameters:
Name Type Description
colorScale String

Color scale name.

View Source widgets/voronoi.js, line 235

# setColorScaleRelativeTo(relation)

When color scale is enabled, select how color should be calculated. It can be according to all nodes, by siblings or by all elements within the same depth.

The following values are supported:

  • all: All nodes.
  • siblings: Siblings nodes.
  • level: Per level.
Parameters:
Name Type Description
relation string

Scale type.
Default Value:
  • 'all'

View Source widgets/voronoi.js, line 213

# setColorSelection(indexopt)

Index for the dataLabels value that it's used to calculate the node color when color scale is enabled.

It is related to the setting setDataLabels.

Parameters:
Name Type Attributes Default Description
index number <optional>
 0

Index number of datalabel.
See:
  • setEnableColorScale
  • setDataLabels

View Source widgets/voronoi.js, line 382

# setCustomProperty(key, val)

Set a custom property to the widget.

Parameters:
Name Type Description
key string

Key to set, using dot notation.
val *

Value to set

View Source widgets/voronoi.js, line 451

# setDarkenFlatParents(boolopt)

Set the darken flat parents.

Parameters:
Name Type Attributes Default Description
bool boolean <optional>
 true

Enable darken flat parents.

View Source widgets/voronoi.js, line 350

# setDarkenFlatParentsColor(arropt)

Set the darken flat parents colors when it's enabled.

Parameters:
Name Type Attributes Default Description
arr Array.<string> <optional>
 ['#595959', '#080808']

Array of colors.

View Source widgets/voronoi.js, line 359

# setDarkenFlatParentsHoveredColor(coloropt)

Set the hover effect color when use darken flat parents is enabled.

Parameters:
Name Type Attributes Default Description
color string <optional>
 '#797878'

Color for the hover effect.

View Source widgets/voronoi.js, line 368

# setDataLabels(dataLabels)

Set the name of the values.

Parameters:
Name Type Description
dataLabels Array.<string>

Array of labels.
Default Value:
  • ['count']

View Source widgets/voronoi.js, line 257

# setEnableColorScale(boolopt)

Set enabled color scale selector.

Parameters:
Name Type Attributes Default Description
bool boolean <optional>
 true

Enable color scale.

View Source widgets/voronoi.js, line 314

# setEnableDetailView(boolopt)

Enable detailed view for comparations.

Parameters:
Name Type Attributes Default Description
bool boolean <optional>
 true

Enable detailed view.

View Source widgets/voronoi.js, line 305

# setEnablePartitioning(boolopt)

Enable the partitioning functionality.

Parameters:
Name Type Attributes Default Description
bool boolean <optional>
 true

Enable partitioning

View Source widgets/voronoi.js, line 332

# setEnableSizeSelect(boolopt)

Enable the size selector.

Parameters:
Name Type Attributes Default Description
bool boolean <optional>
 true

Enable size selector.

View Source widgets/voronoi.js, line 323

# setExposeCurrentNode(exposeCurrentNode)

Set the exposed groups.

For more info vistit this info.

Parameters:
Name Type Description
exposeCurrentNode Array.<string>

Array of groups to expose.

View Source widgets/voronoi.js, line 247

# setFlatSignals(bool)

Determines how FoamTree will display nested groups. When it's set true, produces a flattened view of the hierarchy.

Parameters:
Name Type Description
bool boolean

Boolean value.

View Source widgets/voronoi.js, line 296

# setKeys(keys)

Set the keys to display.

Parameters:
Name Type Description
keys Array.<string>

Array of keys.

View Source widgets/voronoi.js, line 266

# setKeysOrder(keysOrder)

Set the order of keys.

Parameters:
Name Type Description
keysOrder Array.<string>

Array of keys ordered.

View Source widgets/voronoi.js, line 275

# setLayout(layout)

Determines the general type of layout to generate. Depending on this option, FoamTree will produce polygon-based organic-looking visualization or the traditional rectangular tree map.

The following values are supported:

  • relaxed: produces polygonal organic-looking arrangements based on Voronoi diagrams.
  • ordered: produces the traditional rectangular treemap using the strip algorithm.
  • squarified: produces the traditional treemap using the squarified algorithm.
Parameters:
Name Type Description
layout string

Layout type.

View Source widgets/voronoi.js, line 61

# setLegendPercentage(enabled)

Enable legend percentage display.

Parameters:
Name Type Description
enabled boolean

Indicates if it's enabled.

View Source widgets/voronoi.js, line 103

# setLegendVal(enabled)

Enable legend display.

Parameters:
Name Type Description
enabled boolean

Indicates if it's enabled.

View Source widgets/voronoi.js, line 94

# setMaxItems(numopt)

Set maximum total nodes.

Parameters:
Name Type Attributes Default Description
num number <optional>
 1000

Number of nodes to show.

View Source widgets/voronoi.js, line 196

# setMaxLevelItems(numopt)

Set maximum total nodes per level.

Parameters:
Name Type Attributes Default Description
num number <optional>
 1000

Number of nodes to show.

View Source widgets/voronoi.js, line 187

# setOperation(operation)

Set the operation used to scale data.

The following values are supported:

  • none: No operation.
  • log: Logarithmic operation.
  • atan: Arctangent operation.
  • pow.75: Power 0.75 operation.
  • pow.33: Power 0.33 operation.
  • pow.25: Power 0.25 operation.
  • sqrt: Square root operation.
Parameters:
Name Type Description
operation string

Operation name.
Default Value:
  • 'none'

View Source widgets/voronoi.js, line 155

# setPartitioningBorder(numopt)

Set the border width on partitioning.

Parameters:
Name Type Attributes Default Description
num number <optional>
 2

Number of width border.

View Source widgets/voronoi.js, line 341

# setRelaxationInitializer(relaxationopt)

Determines the initial layout of groups' polygons.

The following values are supported:

  • fisheye: puts large groups in the center of the visualization area and the smaller groups towards the corners.
  • blackhole: puts small groups in the center of the visualization and the larger groups towards the corners.
  • ordered: lays out the groups in a left-to-right lines, in the order the groups were specified in the data object.
  • squarified: puts large groups close to the top-left corner of the visualization and the small groups close to the bottom-right corner.
  • random: puts groups at random positions.

Note: Applicable only when setLayout is set to relaxed.

Parameters:
Name Type Attributes Default Description
relaxation string <optional>
 'fisheye'

Layout relaxation.

View Source widgets/voronoi.js, line 84

# setScrollZoom(enable)

Set scroll or zoom to enabled.

Parameters:
Name Type Description
enable boolean

Indicates if it's enabled.
Default Value:
  • false

View Source widgets/voronoi.js, line 178

# setShowZero(showzero)

Set groups whose weight is zero as visible.

For more info vistit this info.

Parameters:
Name Type Description
showzero boolean

Indicates if it's enabled.

View Source widgets/voronoi.js, line 136

# setSizeSelection(indexopt)

Set the index for the dataLabels value that it's used to calculate the node size.

It's related to the setting setDataLabels.

Parameters:
Name Type Attributes Default Description
index Number <optional>
 0

Index number of datalabel.
See:
  • setEnableSizeSelect
  • setDataLabels

View Source widgets/voronoi.js, line 396

# setValue(value)

Set the value to display.

Parameters:
Name Type Description
value Object
value string

Value to show.

View Source widgets/voronoi.js, line 286

Example
{ value: 'count'}

# setValueFormat(valueFormat)

Set the data representation.

The following values are supported:

  • ['toBytes']: Byte representation.
  • ['secondsToHMS']: Time representation
Parameters:
Name Type Description
valueFormat Array.<string>

Array with the string name of the format.

View Source widgets/voronoi.js, line 168