
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)
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)
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")
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>