Images

BinderScriptNotebook

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

There are multiple ways of generating image charts: - From 3 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 2 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(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
val colors : int list list list
val imageRaw : GenericChart.GenericChart
type Chart = static member Area : x:seq<#IConvertible> * y:seq<#IConvertible> * ?Name:string * ?ShowMarkers:bool * ?ShowLegend:bool * ?MarkerSymbol:MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Dash:DrawingStyle * ?Width:float -> GenericChart + 1 overload static member Bar : values:seq<#IConvertible> * ?Keys:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?PatternShape:PatternShape * ?MultiPatternShape:seq<PatternShape> * ?Pattern:Pattern * ?Base:#IConvertible * ?Width:'a3 * ?MultiWidth:seq<'a3> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Text:'a4 * ?MultiText:seq<'a4> * ?TextPosition:TextPosition * ?MultiTextPosition:seq<TextPosition> * ?TextFont:Font * ?Marker:Marker -> GenericChart (requires 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot : ?x:'a0 * ?y:'a1 * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?Fillcolor:Color * ?Opacity:float * ?Whiskerwidth:'a2 * ?Boxpoints:Boxpoints * ?Boxmean:BoxMean * ?Jitter:'a3 * ?Pointpos:'a4 * ?Orientation:Orientation * ?Marker:Marker * ?Line:Line * ?Alignmentgroup:'a5 * ?Offsetgroup:'a6 * ?Notched:bool * ?NotchWidth:float * ?QuartileMethod:QuartileMethod -> GenericChart + 1 overload static member Bubble : x:seq<#IConvertible> * y:seq<#IConvertible> * sizes:seq<int> * ?Name:string * ?ShowLegend:bool * ?MarkerSymbol:MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?StackGroup:string * ?Orientation:Orientation * ?GroupNorm:GroupNorm * ?UseWebGL:bool -> GenericChart + 1 overload static member Candlestick : open:seq<#IConvertible> * high:seq<#IConvertible> * low:seq<#IConvertible> * close:seq<#IConvertible> * x:seq<#IConvertible> * ?Increasing:Line * ?Decreasing:Line * ?WhiskerWidth:float * ?Line:Line * ?XCalendar:Calendar -> GenericChart + 1 overload static member Column : values:seq<#IConvertible> * ?Keys:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?Pattern:Pattern * ?PatternShape:PatternShape * ?MultiPatternShape:seq<PatternShape> * ?Base:#IConvertible * ?Width:'a3 * ?MultiWidth:seq<'a3> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Text:'a4 * ?MultiText:seq<'a4> * ?TextPosition:TextPosition * ?MultiTextPosition:seq<TextPosition> * ?TextFont:Font * ?Marker:Marker -> GenericChart (requires 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour : data:seq<#seq<'a1>> * ?X:seq<#IConvertible> * ?Y:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Colorscale:Colorscale * ?Showscale:'a4 * ?zSmooth:SmoothAlg * ?ColorBar:'a5 -> GenericChart (requires 'a1 :> IConvertible) static member Funnel : x:seq<#IConvertible> * y:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Color:Color * ?Line:Line * ?x0:'a3 * ?dX:float * ?y0:'a4 * ?dY:float * ?Width:float * ?Offset:float * ?Orientation:Orientation * ?Alignmentgroup:string * ?Offsetgroup:string * ?Cliponaxis:bool * ?Connector:FunnelConnector * ?Insidetextfont:Font * ?Outsidetextfont:Font -> GenericChart static member Heatmap : data:seq<#seq<'a1>> * ?ColNames:seq<#IConvertible> * ?RowNames:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Colorscale:Colorscale * ?Showscale:'a4 * ?Xgap:'a5 * ?Ygap:'a6 * ?zSmooth:SmoothAlg * ?ColorBar:'a7 * ?UseWebGL:bool -> GenericChart (requires 'a1 :> IConvertible) static member Histogram : data:seq<#IConvertible> * ?Orientation:Orientation * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Color:Color * ?HistNorm:HistNorm * ?HistFunc:HistFunc * ?nBinsx:int * ?nBinsy:int * ?Xbins:Bins * ?Ybins:Bins * ?xError:'a1 * ?yError:'a2 -> GenericChart ...
static member Chart.Image : z:seq<#seq<ARGB>> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Ids:seq<#System.IConvertible> * ?X:seq<#System.IConvertible> * ?Y:seq<#System.IConvertible> * ?ZMax:StyleParam.ColorComponentBound * ?ZMin:StyleParam.ColorComponentBound * ?ZSmooth:StyleParam.SmoothAlg -> GenericChart.GenericChart
static member Chart.Image : ?Z:seq<#seq<'b>> * ?Source:string * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Ids:seq<#System.IConvertible> * ?X:seq<#System.IConvertible> * ?Y:seq<#System.IConvertible> * ?ColorModel:StyleParam.ColorModel * ?ZMax:StyleParam.ColorComponentBound * ?ZMin:StyleParam.ColorComponentBound * ?ZSmooth:StyleParam.SmoothAlg -> GenericChart.GenericChart (requires 'b :> seq<int>)
argument Z: seq<int list list> option
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
<summary> Converts a GenericChart to it HTML representation. The div layer has a default size of 600 if not specified otherwise. </summary>
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 private ofRGB : r:int -> g:int -> b:int -> ColorKeyword 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> = | ( [] ) | ( :: ) 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>
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
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 CreateText : path: string -> StreamWriter static member Decrypt : path: string -> unit static member Delete : 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> * ?X:seq<#IConvertible> * ?Y:seq<#IConvertible> * ?ZMax:StyleParam.ColorComponentBound * ?ZMin:StyleParam.ColorComponentBound * ?ZSmooth:StyleParam.SmoothAlg -> GenericChart.GenericChart
static member Chart.Image : ?Z:seq<#seq<'b>> * ?Source:string * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Ids:seq<#IConvertible> * ?X:seq<#IConvertible> * ?Y:seq<#IConvertible> * ?ColorModel:StyleParam.ColorModel * ?ZMax:StyleParam.ColorComponentBound * ?ZMin:StyleParam.ColorComponentBound * ?ZSmooth:StyleParam.SmoothAlg -> GenericChart.GenericChart (requires 'b :> seq<int>)