Images

Binder  Notebook

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

There are multiple ways of generating image charts:

  • From three-dimensional color collections, where the inner arrays contain 3 (color dimensions without alpha channel) or 4 (color dimensions and alpha channel) values. The color model can be set separately as shown below.
  • From a two-dimensional collection Plotly.NETs ARGB type that represents rgba values
  • From a base64 encoded image data source

Creating Image charts from raw color arrays

// 3d collection containing color values
open Plotly.NET

let colors =
    [ [ [ 0; 0; 255 ]; [ 255; 255; 0 ]; [ 0; 0; 255 ] ]
      [ [ 255; 0; 0 ]; [ 255; 0; 255 ]; [ 255; 0; 255 ] ]
      [ [ 0; 255; 0 ]; [ 0; 255; 255 ]; [ 255; 0; 0 ] ] ]

let imageRaw =
    Chart.Image(Z = colors)
    |> Chart.withTitle "Image chart from raw color component arrays"

To change the color model to HSL, for example, add the ColorModel argument:

let imageRawHSL =
    Chart.Image(Z = colors, ColorModel = StyleParam.ColorModel.HSL)
    |> Chart.withTitle "HSL color model"

Creating Image charts from ARGB arrays

Note that this way of creating image charts uses the RGBA color model.

let argbs =
    [ [ ColorKeyword.AliceBlue; ColorKeyword.CornSilk; ColorKeyword.LavenderBlush ]
      |> List.map ARGB.fromKeyword
      [ ColorKeyword.DarkGray; ColorKeyword.Snow; ColorKeyword.MidnightBlue ]
      |> List.map ARGB.fromKeyword
      [ ColorKeyword.LightSteelBlue
        ColorKeyword.DarkKhaki
        ColorKeyword.LightAkyBlue ]
      |> List.map ARGB.fromKeyword ]

let imageARGB = Chart.Image(z = argbs) |> Chart.withTitle "ARGB image chart"

Creating Image charts from base64 encoded images

open System
open System.IO

let imageSource = __SOURCE_DIRECTORY__}/../img/logo.png"

let base64String = imageSource |> File.ReadAllBytes |> System.Convert.ToBase64String

let logoImage =
    Chart.Image(Source = ($"data:image/jpg;base64,{base64String}"))
    |> Chart.withTitle "This is Plotly.NET:"
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 colors: int list list list
val imageRaw: GenericChart.GenericChart
type Chart = static member AnnotatedHeatmap: zData: seq<#seq<'a1>> * annotationText: seq<#seq<string>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<'a3> * ?MultiX: seq<seq<'a3>> * ?XGap: int * ?Y: seq<'a4> * ?MultiY: seq<seq<'a4>> * ?YGap: int * ?Text: 'a5 * ?MultiText: seq<'a5> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a3 :> IConvertible and 'a4 :> IConvertible and 'a5 :> 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<'a1>> * ?X: seq<'a2> * ?MultiX: seq<seq<'a2>> * ?Y: seq<'a3> * ?MultiY: seq<seq<'a3>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?XGap: int * ?YGap: int * ?Text: 'a4 * ?MultiText: seq<'a4> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a2 :> IConvertible and 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload ...
static member Chart.Image: z: seq<#seq<ARGB>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Ids: seq<#System.IConvertible> * ?ZMax: StyleParam.ColorComponentBound * ?ZMin: StyleParam.ColorComponentBound * ?ZSmooth: StyleParam.SmoothAlg * ?UseDefaults: bool -> GenericChart.GenericChart
static member Chart.Image: ?Z: seq<#seq<'b>> * ?Source: string * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Ids: seq<#System.IConvertible> * ?ColorModel: StyleParam.ColorModel * ?ZMax: StyleParam.ColorComponentBound * ?ZMin: StyleParam.ColorComponentBound * ?ZSmooth: StyleParam.SmoothAlg * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'b :> seq<int>)
argument Z: seq<int list list> option
<summary> Display an image, i.e. data on a 2D regular raster. By default, when an image is displayed in a subplot, its y axis will be reversed (ie. `autorange: 'reversed'`), constrained to the domain (ie. `constrain: 'domain'`) and it will have the same scale as its x axis (ie. `scaleanchor: 'x,`) in order for pixels to be rendered as squares. </summary>
<param name="Z">A 2-dimensional array in which each element is an array of 3 or 4 numbers representing a color.</param>
<param name="Source">Specifies the data URI of the image to be visualized. The URI consists of "data:image/[&lt;media subtype&gt;][;base64],&lt;data&gt;"</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="Ids">Assigns id labels to each datum. These ids for object constancy of data points during animation. Should be an array of strings, not numbers or any other type.</param>
<param name="ColorModel">Color model used to map the numerical color components described in `z` into colors. If `source` is specified, this attribute will be set to `rgba256` otherwise it defaults to `rgb`.</param>
<param name="ZMax">Sets the upper bound of the color domain. Value should have the same units as in `z` and if set, `zmin` must be set as well.</param>
<param name="ZMin">Sets the lower bound of the color domain. Value should have the same units as in `z` and if set, `zmax` must be set as well.</param>
<param name="ZSmooth">Picks a smoothing algorithm use to smooth `z` data.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>
static member Chart.withTitle: title: Title -> (GenericChart.GenericChart -> GenericChart.GenericChart)
static member Chart.withTitle: title: string * ?TitleFont: Font -> (GenericChart.GenericChart -> GenericChart.GenericChart)
module GenericChart from Plotly.NET
<summary> Module to represent a GenericChart </summary>
val toChartHTML: gChart: GenericChart.GenericChart -> string
val imageRawHSL: GenericChart.GenericChart
module StyleParam from Plotly.NET
type ColorModel = | RGB | RGBA | RGBA256 | HSL | HSLA member Convert: unit -> obj override ToString: unit -> string static member convert: (ColorModel -> obj) static member toString: (ColorModel -> string)
union case StyleParam.ColorModel.HSL: StyleParam.ColorModel
val argbs: ARGB list list
type ColorKeyword = | AliceBlue | AntiqueWhite | Aqua | Aquamarine | Azure | Beige | Bisque | Black | BlanchedAlmond | Blue ... static member ofKeyWord: (string -> ColorKeyword) static member toRGB: (ColorKeyword -> int * int * int)
<summary> https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#ColorKeywords W3C Recognized color keyword names </summary>
union case ColorKeyword.AliceBlue: ColorKeyword
union case ColorKeyword.CornSilk: ColorKeyword
union case ColorKeyword.LavenderBlush: ColorKeyword
Multiple items
module List from Microsoft.FSharp.Collections
<summary>Contains operations for working with values of type <see cref="T:Microsoft.FSharp.Collections.list`1" />.</summary>
<namespacedoc><summary>Operations for collections such as lists, arrays, sets, maps and sequences. See also <a href="https://docs.microsoft.com/dotnet/fsharp/language-reference/fsharp-collection-types">F# Collection Types</a> in the F# Language Guide. </summary></namespacedoc>

--------------------
type List<'T> = | op_Nil | op_ColonColon of Head: 'T * Tail: 'T list interface IReadOnlyList<'T> interface IReadOnlyCollection<'T> interface IEnumerable interface IEnumerable<'T> member GetReverseIndex: rank: int * offset: int -> int member GetSlice: startIndex: int option * endIndex: int option -> 'T list static member Cons: head: 'T * tail: 'T list -> 'T list member Head: 'T member IsEmpty: bool member Item: index: int -> 'T with get ...
<summary>The type of immutable singly-linked lists.</summary>
<remarks>Use the constructors <c>[]</c> and <c>::</c> (infix) to create values of this type, or the notation <c>[1;2;3]</c>. Use the values in the <c>List</c> module to manipulate values of this type, or pattern match against the values directly. </remarks>
<exclude />
val map: mapping: ('T -> 'U) -> list: 'T list -> 'U list
<summary>Builds a new collection whose elements are the results of applying the given function to each of the elements of the collection.</summary>
<param name="mapping">The function to transform elements from the input list.</param>
<param name="list">The input list.</param>
<returns>The list of transformed elements.</returns>
<example id="map-1"><code lang="fsharp"> let inputs = [ "a"; "bbb"; "cc" ] inputs |&gt; List.map (fun x -&gt; x.Length) </code> Evaluates to <c>[ 1; 3; 2 ]</c></example>
type ARGB = { A: byte R: byte G: byte B: byte } static member create: a: int -> r: int -> g: int -> b: int -> ARGB static member fromHex: s: string -> ARGB static member fromKeyword: c: ColorKeyword -> ARGB static member fromRGB: r: int -> g: int -> b: int -> ARGB static member fromWebHex: s: string -> ARGB static member toHex: prefix: bool -> c: ARGB -> string static member toString: c: ARGB -> string static member toWebHex: c: ARGB -> string
<summary> Represents an ARGB (alpha, red, green, blue) color </summary>
static member ARGB.fromKeyword: c: ColorKeyword -> ARGB
union case ColorKeyword.DarkGray: ColorKeyword
union case ColorKeyword.Snow: ColorKeyword
union case ColorKeyword.MidnightBlue: ColorKeyword
union case ColorKeyword.LightSteelBlue: ColorKeyword
union case ColorKeyword.DarkKhaki: ColorKeyword
union case ColorKeyword.LightAkyBlue: ColorKeyword
val imageARGB: GenericChart.GenericChart
argument z: seq<ARGB list>
<summary> Display an image, i.e. data on a 2D regular raster. By default, when an image is displayed in a subplot, its y axis will be reversed (ie. `autorange: 'reversed'`), constrained to the domain (ie. `constrain: 'domain'`) and it will have the same scale as its x axis (ie. `scaleanchor: 'x,`) in order for pixels to be rendered as squares. </summary>
<param name="z">A 2-dimensional array containing Plotly.NETs ARGB color object.</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="Ids">Assigns id labels to each datum. These ids for object constancy of data points during animation. Should be an array of strings, not numbers or any other type.</param>
<param name="ZMax">Sets the upper bound of the color domain. Value should have the same units as in `z` and if set, `zmin` must be set as well.</param>
<param name="ZMin">Sets the lower bound of the color domain. Value should have the same units as in `z` and if set, `zmax` must be set as well.</param>
<param name="ZSmooth">Picks a smoothing algorithm use to smooth `z` data.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>
namespace System
namespace System.IO
val imageSource: string
val base64String: string
type File = static member AppendAllLines: path: string * contents: IEnumerable<string> -> unit + 1 overload static member AppendAllLinesAsync: path: string * contents: IEnumerable<string> * encoding: Encoding * ?cancellationToken: CancellationToken -> Task + 1 overload static member AppendAllText: path: string * contents: string -> unit + 1 overload static member AppendAllTextAsync: path: string * contents: string * encoding: Encoding * ?cancellationToken: CancellationToken -> Task + 1 overload static member AppendText: path: string -> StreamWriter static member Copy: sourceFileName: string * destFileName: string -> unit + 1 overload static member Create: path: string -> FileStream + 2 overloads static member CreateSymbolicLink: path: string * pathToTarget: string -> FileSystemInfo static member CreateText: path: string -> StreamWriter static member Decrypt: path: string -> unit ...
<summary>Provides static methods for the creation, copying, deletion, moving, and opening of a single file, and aids in the creation of <see cref="T:System.IO.FileStream" /> objects.</summary>
File.ReadAllBytes(path: string) : byte[]
type Convert = static member ChangeType: value: obj * conversionType: Type -> obj + 3 overloads static member FromBase64CharArray: inArray: char[] * offset: int * length: int -> byte[] static member FromBase64String: s: string -> byte[] static member FromHexString: s: string -> byte[] + 1 overload static member GetTypeCode: value: obj -> TypeCode static member IsDBNull: value: obj -> bool static member ToBase64CharArray: inArray: byte[] * offsetIn: int * length: int * outArray: char[] * offsetOut: int -> int + 1 overload static member ToBase64String: inArray: byte[] -> string + 4 overloads static member ToBoolean: value: bool -> bool + 17 overloads static member ToByte: value: bool -> byte + 18 overloads ...
<summary>Converts a base data type to another base data type.</summary>
Convert.ToBase64String(inArray: byte[]) : string
Convert.ToBase64String(bytes: ReadOnlySpan<byte>, ?options: Base64FormattingOptions) : string
Convert.ToBase64String(inArray: byte[], options: Base64FormattingOptions) : string
Convert.ToBase64String(inArray: byte[], offset: int, length: int) : string
Convert.ToBase64String(inArray: byte[], offset: int, length: int, options: Base64FormattingOptions) : string
val logoImage: GenericChart.GenericChart
static member Chart.Image: z: seq<#seq<ARGB>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Ids: seq<#IConvertible> * ?ZMax: StyleParam.ColorComponentBound * ?ZMin: StyleParam.ColorComponentBound * ?ZSmooth: StyleParam.SmoothAlg * ?UseDefaults: bool -> GenericChart.GenericChart
static member Chart.Image: ?Z: seq<#seq<'b>> * ?Source: string * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Ids: seq<#IConvertible> * ?ColorModel: StyleParam.ColorModel * ?ZMax: StyleParam.ColorComponentBound * ?ZMin: StyleParam.ColorComponentBound * ?ZSmooth: StyleParam.SmoothAlg * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'b :> seq<int>)