Heatmaps

BinderNotebook

Summary: This example shows how to create heatmap charts in F#.

Let's first create some data for the purpose of creating example charts:

open Plotly.NET

let matrix =
    [ [ 1.; 1.5; 0.7; 2.7 ]; [ 2.; 0.5; 1.2; 1.4 ]; [ 0.1; 2.6; 2.4; 3.0 ] ]

let rownames = [ "p3"; "p2"; "p1" ]
let colnames = [ "Tp0"; "Tp30"; "Tp60"; "Tp160" ]

A heatmap chart can be created using the Chart.Heatmap functions.

When creating heatmap charts, it is usually desirable to provide the values in matrix form, rownames and colnames.

A heatmap needs at least two-dimensional data that represents the z dimension. The X and Y dimension sizes can be inferred from the z data:

// Generating the Heatmap with only z Data
let heat1 = Chart.Heatmap(zData = matrix)

Inverting the Y Axis

By default, the y axis starts at the origin of the X/Y plane. If it is however desired to represent a 2D matrix exactly how it is notated, invert the YAxis by setting ReverseYAxis.

// Addning row/column names and inverting the Y axis:
let heat2 =
    Chart.Heatmap(zData = matrix, colNames = colnames, rowNames = rownames, ReverseYAxis = true)

Styling Colorbars and using custom color scales

The colorscale can be set via the ColorScale argument. All charts that contain colorbars can be styled by the Chart.withColorBarStyle function. Here is an example that adds a title to the colorbar:

let heat3 =
    Chart.Heatmap(zData = matrix, ColorScale = StyleParam.Colorscale.Viridis)
    |> Chart.withColorBarStyle (TitleText = "Im the ColorBar")

Annotated Heatmaps

Use Chart.AnnotatedHeatmap to add an annotation text to each z value:

let heat4 =
    Chart.AnnotatedHeatmap(
        zData = [ [ 1..5 ]; [ 6..10 ]; [ 11..15 ] ],
        annotationText = [ [ "1,1"; "1,2"; "1,3" ]; [ "2,1"; "2,2"; "2,3" ]; [ "3,1"; "3,2"; "3,3" ] ],
        X = [ "C1"; "C2"; "C3" ],
        Y = [ "R1"; "R2"; "R3" ],
        ReverseYAxis = true
    )
namespace Plotly
namespace Plotly.NET
module Defaults from Plotly.NET
<summary> Contains mutable global default values. Changing these values will apply the default values to all consecutive Chart generations. </summary>
val mutable DefaultDisplayOptions: DisplayOptions
Multiple items
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member combine: first: DisplayOptions -> second: DisplayOptions -> DisplayOptions static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getDescription: displayOpts: DisplayOptions -> XmlNode list static member getPlotlyReference: displayOpts: DisplayOptions -> PlotlyJSReference static member init: ?AdditionalHeadTags: XmlNode list * ?Description: XmlNode list * ?PlotlyJSReference: PlotlyJSReference -> DisplayOptions static member initCDNOnly: unit -> DisplayOptions ...

--------------------
new: unit -> DisplayOptions
static member DisplayOptions.init: ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?Description: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?PlotlyJSReference: PlotlyJSReference -> DisplayOptions
type PlotlyJSReference = | CDN of string | Full | Require of string | NoReference
<summary> Sets how plotly is referenced in the head of html docs. </summary>
union case PlotlyJSReference.NoReference: PlotlyJSReference
val matrix: float list list
val rownames: string list
val colnames: string list
val heat1: GenericChart.GenericChart
type Chart = static member AnnotatedHeatmap: zData: seq<#seq<'b>> * annotationText: seq<#seq<string>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<'d> * ?MultiX: seq<seq<'d>> * ?XGap: int * ?Y: seq<'e> * ?MultiY: seq<seq<'e>> * ?YGap: int * ?Text: 'f * ?MultiText: seq<'f> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'b :> IConvertible and 'd :> IConvertible and 'e :> IConvertible and 'f :> IConvertible) + 1 overload static member Area: x: seq<#IConvertible> * y: seq<#IConvertible> * ?ShowMarkers: bool * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: seq<MarkerSymbol> * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?FillColor: Color * ?FillPatternShape: PatternShape * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Bar: values: seq<#IConvertible> * ?Keys: seq<'a1> * ?MultiKeys: seq<seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: PatternShape * ?MultiMarkerPatternShape: seq<PatternShape> * ?MarkerPattern: Pattern * ?Marker: Marker * ?Base: #IConvertible * ?Width: 'a4 * ?MultiWidth: seq<'a4> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot: ?X: seq<'a0> * ?MultiX: seq<seq<'a0>> * ?Y: seq<'a1> * ?MultiY: seq<seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Text: 'a2 * ?MultiText: seq<'a2> * ?FillColor: Color * ?MarkerColor: Color * ?Marker: Marker * ?Opacity: float * ?WhiskerWidth: float * ?BoxPoints: BoxPoints * ?BoxMean: BoxMean * ?Jitter: float * ?PointPos: float * ?Orientation: Orientation * ?OutlineColor: Color * ?OutlineWidth: float * ?Outline: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?Notched: bool * ?NotchWidth: float * ?QuartileMethod: QuartileMethod * ?UseDefaults: bool -> GenericChart (requires 'a0 :> IConvertible and 'a1 :> IConvertible and 'a2 :> IConvertible) + 2 overloads static member Bubble: x: seq<#IConvertible> * y: seq<#IConvertible> * sizes: seq<int> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: seq<MarkerSymbol> * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Candlestick: ``open`` : seq<#IConvertible> * high: seq<#IConvertible> * low: seq<#IConvertible> * close: seq<#IConvertible> * ?X: seq<'a4> * ?MultiX: seq<seq<'a4>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Text: 'a5 * ?MultiText: seq<'a5> * ?Line: Line * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?WhiskerWidth: float * ?ShowXAxisRangeSlider: bool * ?UseDefaults: bool -> GenericChart (requires 'a4 :> IConvertible and 'a5 :> IConvertible) + 2 overloads static member Column: values: seq<#IConvertible> * ?Keys: seq<'a1> * ?MultiKeys: seq<seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: PatternShape * ?MultiMarkerPatternShape: seq<PatternShape> * ?MarkerPattern: Pattern * ?Marker: Marker * ?Base: #IConvertible * ?Width: 'a4 * ?MultiWidth: seq<'a4> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour: zData: seq<#seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<'a2> * ?MultiX: seq<seq<'a2>> * ?Y: seq<'a3> * ?MultiY: seq<seq<'a3>> * ?Text: 'a4 * ?MultiText: seq<'a4> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?Transpose: bool * ?ContourLineColor: Color * ?ContourLineDash: DrawingStyle * ?ContourLineSmoothing: float * ?ContourLine: Line * ?ContoursColoring: ContourColoring * ?ContoursOperation: ConstraintOperation * ?ContoursType: ContourType * ?ShowContourLabels: bool * ?ContourLabelFont: Font * ?Contours: Contours * ?FillColor: Color * ?NContours: int * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a2 :> IConvertible and 'a3 :> IConvertible and 'a4 :> IConvertible) static member Funnel: x: seq<#IConvertible> * y: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Width: float * ?Offset: float * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?Orientation: Orientation * ?AlignmentGroup: string * ?OffsetGroup: string * ?MarkerColor: Color * ?MarkerOutline: Line * ?Marker: Marker * ?TextInfo: TextInfo * ?ConnectorLineColor: Color * ?ConnectorLineStyle: DrawingStyle * ?ConnectorFillColor: Color * ?ConnectorLine: Line * ?Connector: FunnelConnector * ?InsideTextFont: Font * ?OutsideTextFont: Font * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) static member Heatmap: zData: seq<#seq<'b>> * ?X: seq<'c> * ?MultiX: seq<seq<'c>> * ?Y: seq<'d> * ?MultiY: seq<seq<'d>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?XGap: int * ?YGap: int * ?Text: 'e * ?MultiText: seq<'e> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'b :> IConvertible and 'c :> IConvertible and 'd :> IConvertible and 'e :> IConvertible) + 1 overload ...
static member Chart.Heatmap: zData: seq<#seq<'b>> * colNames: seq<string> * rowNames: seq<string> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?XGap: int * ?YGap: int * ?Text: 'c * ?MultiText: seq<'c> * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: StyleParam.SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'b :> System.IConvertible and 'c :> System.IConvertible)
static member Chart.Heatmap: zData: seq<#seq<'b>> * ?X: seq<'c> * ?MultiX: seq<seq<'c>> * ?Y: seq<'d> * ?MultiY: seq<seq<'d>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?XGap: int * ?YGap: int * ?Text: 'e * ?MultiText: seq<'e> * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: StyleParam.SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'b :> System.IConvertible and 'c :> System.IConvertible and 'd :> System.IConvertible and 'e :> System.IConvertible)
module GenericChart from Plotly.NET
<summary> Module to represent a GenericChart </summary>
val toChartHTML: gChart: GenericChart.GenericChart -> string
val heat2: GenericChart.GenericChart
val heat3: GenericChart.GenericChart
module StyleParam from Plotly.NET
type Colorscale = | Custom of seq<float * Color> | RdBu | Earth | Blackbody | YIOrRd | YIGnBu | Bluered | Portland | Electric | Jet ... member Convert: unit -> obj static member convert: (Colorscale -> obj)
<summary> The colorscale must be a collection containing a mapping of a normalized value (between 0.0 and 1.0) to it's color. At minimum, a mapping for the lowest (0.0) and highest (1.0) values are required. </summary>
union case StyleParam.Colorscale.Viridis: StyleParam.Colorscale
static member Chart.withColorBarStyle: ?TitleText: string * ?TitleFont: Font * ?TitleStandoff: int * ?Title: Title * ?Len: float * ?LenMode: StyleParam.UnitMode * ?BGColor: Color * ?BorderColor: Color * ?OutlineColor: Color * ?X: float * ?XAnchor: StyleParam.HorizontalAlign * ?XPad: float * ?Y: float * ?YAnchor: StyleParam.VerticalAlign * ?YPad: float -> (GenericChart.GenericChart -> GenericChart.GenericChart)
val heat4: GenericChart.GenericChart
static member Chart.AnnotatedHeatmap: dataAnnotations: seq<#seq<'a1 * string>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<'a2> * ?MultiX: seq<seq<'a2>> * ?XGap: int * ?Y: seq<'a3> * ?MultiY: seq<seq<'a3>> * ?YGap: int * ?Text: 'a4 * ?MultiText: seq<'a4> * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: StyleParam.SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'a1 :> System.IConvertible and 'a2 :> System.IConvertible and 'a3 :> System.IConvertible and 'a4 :> System.IConvertible)
static member Chart.AnnotatedHeatmap: zData: seq<#seq<'b>> * annotationText: seq<#seq<string>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<'d> * ?MultiX: seq<seq<'d>> * ?XGap: int * ?Y: seq<'e> * ?MultiY: seq<seq<'e>> * ?YGap: int * ?Text: 'f * ?MultiText: seq<'f> * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: StyleParam.SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'b :> System.IConvertible and 'd :> System.IConvertible and 'e :> System.IConvertible and 'f :> System.IConvertible)
argument X: seq<string> option
<summary> Creates a annotated heatmap. A heatmap is a data visualization technique that shows magnitude of a phenomenon as color in two dimensions. The annotated heatmap additionally contains annotation text on each datum. </summary>
<param name="zData">Sets the 2-dimensional z data, which will be visualized with the color scale.</param>
<param name="annotationText">Sets the text to display as annotation for each datum.</param>
<param name="Name">Sets the trace name. The trace name appear as the legend item and on hover.</param>
<param name="ShowLegend">Determines whether or not an item corresponding to this trace is shown in the legend.</param>
<param name="Opacity">Sets the Opacity otf the trace.</param>
<param name="X">Sets the x coordinates.</param>
<param name="MultiX">Sets the x coordinates. Use two inner arrays here to plot multicategorial data</param>
<param name="XGap">Sets the horizontal gap (in pixels) between bricks.</param>
<param name="Y">Sets the y coordinates.</param>
<param name="MultiY">Sets the y coordinates. Use two inner arrays here to plot multicategorial data</param>
<param name="YGap">Sets the vertical gap (in pixels) between bricks.</param>
<param name="Text">Sets a text associated with each datum</param>
<param name="MultiText">Sets individual text for each datum</param>
<param name="ColorBar">Sets the styles of the colorbar for this trace.</param>
<param name="ColorScale">Sets the colorscale for this trace.</param>
<param name="ShowScale">Whether or not to show the colorscale/colorbar</param>
<param name="ReverseScale">Reverses the color mapping if true. If true, `zmin` will correspond to the last color in the array and `zmax` will correspond to the first color.</param>
<param name="ZSmooth">Picks a smoothing algorithm use to smooth `z` data.</param>
<param name="Transpose">Transposes the z data.</param>
<param name="UseWebGL">Whether or not to use WebGL to render this trace</param>
<param name="ReverseYAxis">Whether or not to reverse the y axis. If true, (0,0) will lie on the top left and increase downwards.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>
argument Y: seq<string> option
<summary> Creates a annotated heatmap. A heatmap is a data visualization technique that shows magnitude of a phenomenon as color in two dimensions. The annotated heatmap additionally contains annotation text on each datum. </summary>
<param name="zData">Sets the 2-dimensional z data, which will be visualized with the color scale.</param>
<param name="annotationText">Sets the text to display as annotation for each datum.</param>
<param name="Name">Sets the trace name. The trace name appear as the legend item and on hover.</param>
<param name="ShowLegend">Determines whether or not an item corresponding to this trace is shown in the legend.</param>
<param name="Opacity">Sets the Opacity otf the trace.</param>
<param name="X">Sets the x coordinates.</param>
<param name="MultiX">Sets the x coordinates. Use two inner arrays here to plot multicategorial data</param>
<param name="XGap">Sets the horizontal gap (in pixels) between bricks.</param>
<param name="Y">Sets the y coordinates.</param>
<param name="MultiY">Sets the y coordinates. Use two inner arrays here to plot multicategorial data</param>
<param name="YGap">Sets the vertical gap (in pixels) between bricks.</param>
<param name="Text">Sets a text associated with each datum</param>
<param name="MultiText">Sets individual text for each datum</param>
<param name="ColorBar">Sets the styles of the colorbar for this trace.</param>
<param name="ColorScale">Sets the colorscale for this trace.</param>
<param name="ShowScale">Whether or not to show the colorscale/colorbar</param>
<param name="ReverseScale">Reverses the color mapping if true. If true, `zmin` will correspond to the last color in the array and `zmax` will correspond to the first color.</param>
<param name="ZSmooth">Picks a smoothing algorithm use to smooth `z` data.</param>
<param name="Transpose">Transposes the z data.</param>
<param name="UseWebGL">Whether or not to use WebGL to render this trace</param>
<param name="ReverseYAxis">Whether or not to reverse the y axis. If true, (0,0) will lie on the top left and increase downwards.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>