Methods
# funkyheatmap(data, columnInfo, rowInfo, columnGroups, rowGroups, palettes, legends, positionArgs, options, scaleColumn) → {SVGElement}
The main entry point for the library. Takes data and various configuration options and returns an SVG element with the heatmap. Internally uses FunkyHeatmap. Creates a new SVG element and adds it to the DOM immediately, and renders the heatmap offscreen, to be able to calculate the dimensions of text and other elements.
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
data |
ColumnData
|
RowData
|
data to plot, usually d3-fetch output |
|
columnInfo |
ColumnData
|
Array.<module:columns~ColumnInfo>
|
information about how the columns
should be displayed. If not specified, all columns from |
|
rowInfo |
ColumnData
|
Array.<RowInfo>
|
information about how the rows should be grouped, see RowInfo |
|
columnGroups |
ColumnData
|
Array.<module:columns~ColumnGroup>
|
information about how to group columns. See ColumnGroup |
|
rowGroups |
ColumnData
|
Array.<RowGroup>
|
information about how to display row groups, see RowGroup |
|
palettes |
module:palettes~PaletteMapping
|
mapping of names to palette colors, see PaletteMapping |
|
legends |
ColumnData
|
Array.<module:legends~LegendInfo>
|
a list of legends to add or configure for the plot. See LegendInfo |
|
positionArgs |
PositionOptions
|
positioning options, see PositionArgs |
|
options |
HeatmapOptions
|
options for the heatmap |
|
scaleColumn |
boolean
|
true | whether to apply min-max scaling to numerical columns |
- the SVG element containing the heatmap
SVGElement
Type Definitions
Object
# ColumnData
A dataframe in column-based format. Each property is a column, represented as an array. All columns are of the same length.
Example
{
'model': ['Toyota Corolla', 'Fiat 128', 'Honda Civic'],
'mpg': [33.9, 32.4, 30.4],
'weight': [1.835, 2.2, 1.615]
}Object
# HeatmapOptions
Properties:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
colorByRank |
boolean
|
<optional> |
false | whether to color elements by rank, default for all numeric columns |
legendFontSize |
number
|
<optional> |
12 | font size for legend labels |
labelGroupsAbc |
boolean
|
<optional> |
false | whether to add alphabetical index to column groups labels |
tooltipPrecision |
number
|
<optional> |
4 | number of decimal places for floats in the tooltip |
theme |
Object
|
<optional> |
theme options |
|
oddRowBackground |
string
|
<optional> |
'white' | background color for odd rows |
evenRowBackground |
string
|
<optional> |
'#eee' | background color for even rows |
textColor |
string
|
<optional> |
'black' | color for text |
strokeColor |
string
|
<optional> |
'#555' | edge color for geoms and guides |
headerColorL1 |
string
|
<optional> |
'white' | color for column groups of the first level |
headerColorRest |
string
|
<optional> |
'black' | color for column groups if the other levels |
hoverColor |
string
|
<optional> |
'#1385cb' | color for hovered text |
Object
# PositionOptions
Properties:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
rowHeight |
number
|
<optional> |
24 | height of a heatmap row, in pixels |
rowSpace |
number
|
<optional> |
0.1 | space between rows, as a fraction of rowHeight. Twice the padding |
rowBigspace |
number
|
<optional> |
1 | space between groups of rows, as a fraction of rowHeight |
colWidth |
number
|
<optional> |
24 | width of a heatmap column, in pixels. Deprecated, has no effect |
colSpace |
number
|
<optional> |
0.1 | space between columns, as a fraction of rowHeight. Twice the padding |
colBigspace |
number
|
<optional> |
1 | space between groups of columns, as a fraction of rowHeight |
colAnnotOffset |
number
|
<optional> |
10 | offset of column groups from column labels, in pixels |
colAnnotAngle |
number
|
<optional> |
30 | angle of column labels, in degrees |
padding |
number
|
<optional> |
5 | padding for various uses |
minGeomSize |
number
|
<optional> |
0.25 | minimum size of a heatmap element, in pixels |
funkyMidpoint |
number
|
<optional> |
0.8 | midpoint for funkyrect geom, see funkyrect |
Array.<Object>
# RowData
A dataframe in row-based format. Each element is an object with properties. All objects have the same properties.
Example
[
{model: 'Toyota Corolla', mpg: 33.9, weight: 1.835},
{model: 'Fiat 128', mpg: 32.4, weight: 2.2},
{model: 'Honda Civic', mpg: 30.4, weight: 1.615}
]Object
# RowGroup
ID and title for a row group for display. Rows within a group are visually apart and are sorted together.
Properties:
| Name | Type | Description |
|---|---|---|
group |
string
|
group id, must match the |
Group |
string
|
group title for display. Required to enable row grouping |
Object
# RowInfo
Minimal metadata for each row in the heatmap. Used to group rows.
Properties:
| Name | Type | Description |
|---|---|---|
group |
string
|
group id for the row |