Heatmaps

BinderScriptNotebook

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 2 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(
        matrix
    )

Inverting the Y Axis

Per 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(
        matrix,
        colnames,
        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(
        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
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<#IConvertible> * ?XGap: int * ?Y: seq<#IConvertible> * ?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 '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 * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?FillColor: Color * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Bar: values: seq<#IConvertible> * ?Keys: seq<#IConvertible> * ?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 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot: ?X: seq<#IConvertible> * ?Y: seq<#IConvertible> * ?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 '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 * ?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<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Text: 'a5 * ?MultiText: seq<'a5> * ?Line: Line * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?WhiskerWidth: float * ?UseDefaults: bool -> GenericChart (requires 'a5 :> IConvertible) + 1 overload static member Column: values: seq<#IConvertible> * ?Keys: seq<#IConvertible> * ?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 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour: zData: seq<#seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?Y: seq<#IConvertible> * ?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 '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>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?XGap: int * ?Y: seq<#IConvertible> * ?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 '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>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#System.IConvertible> * ?XGap: int * ?Y: seq<#System.IConvertible> * ?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 'e :> System.IConvertible)
module GenericChart from Plotly.NET
<summary> Module to represent a GenericChart </summary>
val toChartHTML: gChart: GenericChart.GenericChart -> string
<summary> Converts a GenericChart to it HTML representation. The div layer has a default size of 600 if not specified otherwise. </summary>
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<#System.IConvertible> * ?XGap: int * ?Y: seq<#System.IConvertible> * ?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 'a4 :> System.IConvertible)
static member Chart.AnnotatedHeatmap: zData: seq<#seq<'b>> * annotationText: seq<#seq<string>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#System.IConvertible> * ?XGap: int * ?Y: seq<#System.IConvertible> * ?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 '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="XGap">Sets the horizontal gap (in pixels) between bricks.</param>
<param name="Y">Sets the y coordinates.</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">Wether 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">Wether or not to use WebGL to render this trace</param>
<param name="ReverseYAxis">Wether 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="XGap">Sets the horizontal gap (in pixels) between bricks.</param>
<param name="Y">Sets the y coordinates.</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">Wether 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">Wether or not to use WebGL to render this trace</param>
<param name="ReverseYAxis">Wether 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>