Heatmaps

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: Plotly.NET.DisplayOptions

Multiple items
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addChartDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member combine: first: DisplayOptions -> second: DisplayOptions -> DisplayOptions static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getChartDescription: displayOpts: DisplayOptions -> XmlNode list static member getDocumentCharset: displayOpts: DisplayOptions -> string static member getDocumentDescription: displayOpts: DisplayOptions -> string static member getDocumentFavicon: displayOpts: DisplayOptions -> XmlNode ...

--------------------
new: unit -> Plotly.NET.DisplayOptions

static member Plotly.NET.DisplayOptions.init: ?DocumentTitle: string * ?DocumentCharset: string * ?DocumentDescription: string * ?DocumentFavicon: Giraffe.ViewEngine.HtmlElements.XmlNode * ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?ChartDescription: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?PlotlyJSReference: Plotly.NET.PlotlyJSReference -> Plotly.NET.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 Plotly.NET.PlotlyJSReference.NoReference: Plotly.NET.PlotlyJSReference

val matrix: float list list

val rownames: string list

val colnames: string list

val heat1: GenericChart

type Chart = static member Bubble: x: #IConvertible seq * y: #IConvertible seq * sizes: int seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?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 'c :> IConvertible) + 2 overloads static member Line: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Point: x: #IConvertible seq * y: #IConvertible seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Range: x: #IConvertible seq * y: #IConvertible seq * upper: #IConvertible seq * lower: #IConvertible seq * mode: Mode * ?Name: string * ?GroupName: string * ?ShowMarkers: bool * ?ShowLegend: bool * ?Text: 'e * ?MultiText: 'e seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?UpperMarker: Marker * ?LowerMarker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?UpperLine: Line * ?LowerLine: Line * ?RangeColor: Color * ?RangePattern: Pattern * ?UpperText: 'f * ?MultiUpperText: 'f seq * ?LowerText: 'g * ?MultiLowerText: 'g seq * ?TextFont: Font * ?LowerName: string * ?UpperName: string * ?UseDefaults: bool -> GenericChart (requires 'e :> IConvertible and 'f :> IConvertible and 'g :> IConvertible) + 2 overloads static member Scatter: ?X: 'a seq * ?XEncoded: EncodedTypedArray * ?MultiX: 'a seq seq * ?Y: 'b seq * ?YEncoded: EncodedTypedArray * ?MultiY: 'b seq seq * ?Mode: Mode * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a :> IConvertible and 'b :> IConvertible and 'c :> IConvertible) + 3 overloads static member Spline: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Smoothing: float * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads

static member Chart.Heatmap: zData: #seq<'b> seq * colNames: string seq * rowNames: string seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?XGap: int * ?YGap: int * ?Text: 'c * ?MultiText: 'c seq * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: StyleParam.SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible and 'c :> System.IConvertible)
static member Chart.Heatmap: zEncoded: EncodedTypedArray * ?xEncoded: EncodedTypedArray * ?yEncoded: EncodedTypedArray * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?XGap: int * ?YGap: int * ?Text: 'a * ?MultiText: 'a seq * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: StyleParam.SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible)
static member Chart.Heatmap: zData: #seq<'b> seq * ?X: 'c seq * ?MultiX: 'c seq seq * ?Y: 'd seq * ?MultiY: 'd seq seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?XGap: int * ?YGap: int * ?Text: 'e * ?MultiText: 'e seq * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: StyleParam.SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible and 'c :> System.IConvertible and 'd :> System.IConvertible and 'e :> System.IConvertible)

type GenericChart = | Chart of data: Trace * layout: Layout * config: Config * displayOpts: DisplayOptions | MultiChart of data: Trace list * layout: Layout * config: Config * displayOpts: DisplayOptions static member addConfig: config: Config -> gChart: GenericChart -> GenericChart static member addDisplayOptions: displayOpts: DisplayOptions -> gChart: GenericChart -> GenericChart static member addLayout: layout: Layout -> gChart: GenericChart -> GenericChart static member combine: gCharts: GenericChart seq -> GenericChart static member countTrace: gChart: GenericChart -> int static member existsTrace: predicate: (Trace -> bool) -> gChart: GenericChart -> bool static member fromChartDTO: dto: ChartDTO -> GenericChart static member fromFigure: fig: Figure -> GenericChart static member getConfig: gChart: GenericChart -> Config static member getDisplayOptions: gChart: GenericChart -> DisplayOptions ...
<summary> The central type that gets created by all Chart constructors is GenericChart, which itself represents either a single chart or a multi chart (as a Discriminate Union type). A GenericChart consists of four top level objects: Trace (multiple of those in the case of a MultiChart), Layout, Config, and DisplayOptions. - `Trace` is in principle the representation of a dataset on a chart, including for example the data itself, color and shape of the visualization, etc. - `Layout` is everything of the chart that is not dataset specific - e.g. the shape and style of axes, the chart title, etc. - `Config` is an object that configures high level properties of the chart like making all chart elements editable or the tool bar on top - `DisplayOptions` is an object that contains meta information about how the html document that contains the chart. </summary>

static member GenericChart.toChartHTML: gChart: GenericChart -> string

val heat2: GenericChart

val heat3: GenericChart

module StyleParam from Plotly.NET

union case StyleParam.Colorscale.Viridis: StyleParam.Colorscale

static member Chart.withColorBarStyle: ?TitleText: string * ?TitleFont: Font * ?TitleStandoff: int * ?Title: Title * ?BGColor: Color * ?BorderColor: Color * ?BorderWidth: float * ?DTick: System.IConvertible * ?ExponentFormat: StyleParam.ExponentFormat * ?LabelAlias: DynamicObj.DynamicObj * ?Len: float * ?LenMode: StyleParam.UnitMode * ?MinExponent: float * ?NTicks: int * ?Orientation: StyleParam.Orientation * ?OutlineColor: Color * ?OutlineWidth: float * ?SeparateThousands: bool * ?ShowExponent: StyleParam.ShowExponent * ?ShowTickLabels: bool * ?ShowTickPrefix: StyleParam.ShowTickOption * ?ShowTickSuffix: StyleParam.ShowTickOption * ?Thickness: float * ?ThicknessMode: StyleParam.UnitMode * ?Tick0: System.IConvertible * ?TickAngle: int * ?TickColor: Color * ?TickFont: Font * ?TickFormat: string * ?TickFormatStops: TickFormatStop seq * ?TickLabelOverflow: StyleParam.TickLabelOverflow * ?TickLabelPosition: StyleParam.TickLabelPosition * ?TickLabelStep: int * ?TickLen: float * ?TickMode: StyleParam.TickMode * ?TickPrefix: string * ?Ticks: StyleParam.TickOptions * ?TickSuffix: string * ?TickText: #System.IConvertible seq * ?TickVals: #System.IConvertible seq * ?TickWidth: float * ?X: float * ?XAnchor: StyleParam.HorizontalAlign * ?XPad: float * ?XRef: string * ?Y: float * ?YAnchor: StyleParam.VerticalAlign * ?YPad: float * ?YRef: string -> (GenericChart -> GenericChart)

val heat4: GenericChart

static member Chart.AnnotatedHeatmap: dataAnnotations: #seq<'b * string> seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: 'c seq * ?MultiX: 'c seq seq * ?XGap: int * ?Y: 'd seq * ?MultiY: 'd seq seq * ?YGap: int * ?Text: 'e * ?MultiText: 'e seq * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: StyleParam.SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible and 'c :> System.IConvertible and 'd :> System.IConvertible and 'e :> System.IConvertible)
static member Chart.AnnotatedHeatmap: zData: #seq<'b> seq * annotationText: #seq<string> seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: 'd seq * ?MultiX: 'd seq seq * ?XGap: int * ?Y: 'e seq * ?MultiY: 'e seq seq * ?YGap: int * ?Text: 'f * ?MultiText: 'f seq * ?ColorBar: ColorBar * ?ColorScale: StyleParam.Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: StyleParam.SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible and 'd :> System.IConvertible and 'e :> System.IConvertible and 'f :> System.IConvertible)

argument X: string seq 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: string seq 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>