Tables

BinderScriptNotebook

This example shows how to create tables in F#.

let's first create some data for the purpose of creating example charts:

open Plotly.NET 
open Plotly.NET.StyleParam
  
let header = ["<b>RowIndex</b>";"A";"simple";"table"]
let rows = 
    [
     ["0";"I"     ;"am"     ;"a"]        
     ["1";"little";"example";"!"]       
    ]


let table1 = Chart.Table(header, rows)

A little bit of styling:

let table2 =
    Chart.Table(
        header,
        rows,
        //sets global header alignment
        AlignHeader = [HorizontalAlign.Center],
        //sets alignment for each column separately 
        //(The last alignment is applied to all potential following columns)
        AlignCells  = [HorizontalAlign.Left;HorizontalAlign.Center;HorizontalAlign.Right],
        //sets global header color
        ColorHeader = "#45546a",    
        //sets specific color to each header column
        //ColorHeader=["#45546a";"#deebf7";"#45546a";"#deebf7"],    
        //sets global cell color
        //ColorRows = "#deebf7",
        //sets cell column colors
        ColorCells  = ["#deebf7";"lightgrey";"#deebf7";"lightgrey"],
        //sets cell row colors
        //ColorCells=[["#deebf7";"lightgrey"]],
        //sets font of header
        FontHeader  = Font.init(FontFamily.Courier_New, Size=12., Color="white"),      
        //sets the height of the header
        HeightHeader= 30.,
        //sets lines of header
        LineHeader  = Line.init(2.,"black"),                     
        ColumnWidth = [70;50;100;70],      
        //defines order of columns
        ColumnOrder = [1;2;3;4]                                  
        )

Value dependent cell coloring:

let header2 = ["Identifier";"T0";"T1";"T2";"T3"]
let rowvalues = 
    [
     [10001.;0.2;2.0;4.0;5.0]
     [10002.;2.1;2.0;1.8;2.1]
     [10003.;4.5;3.0;2.0;2.5]
     [10004.;0.0;0.1;0.3;0.2]
     [10005.;1.0;1.6;1.8;2.2]
     [10006.;1.0;0.8;1.5;0.7]
     [10007.;2.0;2.0;2.1;1.9]
    ]
    |> Seq.sortBy (fun x -> x.[1])

//map color from value to hex representation
let mapColor min max value = 
    let proportion = 
        (255. * (value - min) / (max - min))
        |> int
    Colors.fromRgb 255 (255 - proportion) proportion
    |> Colors.toWebColor
    
//Assign a color to every cell seperately. Matrix must be transposed for correct orientation.
let cellcolor = 
     rowvalues
     |> Seq.map (fun row ->
        row 
        |> Seq.mapi (fun index value -> 
            if index = 0 then "white"
            else mapColor 0. 5. value
            )
        )
    |> Seq.transpose

let table3 = Chart.Table(header2,rowvalues,ColorCells=cellcolor)

Sequence representation:

let sequence =
        [
        "ATGAGACGTCGAGACTGATAGACGTCGATAGACGTCGATAGACCG"
        "ATAGACTCGTGATAGACGTCGATAGACGTCGATAGAGTATAGACC"
        "GTGATAGACGTCGAGAAGACGTCGATAGACGTCGATAGACGTCGA"
        "TAGAGATAGACGTCGATAGACCGTATAGAAGACGTCGATAGATAG"
        "ACGTCGATAGACCGTAGACGTCGATAGACGTCGATAGACCGT"
        ]
        |> String.concat ""

let elementsPerRow = 60

let headers = 
    [0..elementsPerRow] 
    |> Seq.map (fun x -> 
        if x%10=0 && x <> 0 then "|" 
        else ""
        )

let cells = 
    sequence
    |> Seq.chunkBySize elementsPerRow
    |> Seq.mapi (fun i x -> Seq.append [string (i * elementsPerRow)] (Seq.map string x))

let cellcolors =
    cells
    |> Seq.map (fun row -> 
        row 
        |> Seq.map (fun element -> 
            match element with
            //colors taken from DRuMS 
            //(http://biomodel.uah.es/en/model4/dna/atgc.htm)
            | "A" -> "#5050FF" 
            | "T" -> "#E6E600"
            | "G" -> "#00C000"
            | "C" -> "#E00000"
            | "U" -> "#B48100"
            | _   -> "white"
            )
        )
    |> Seq.transpose
    |> Seq.map (fun x -> Seq.append x (seq ["white"]))

let font = Font.init(FontFamily.Consolas,Size=14.)
let line = Line.init(0.,"white")
let chartwidth = 50. + 10. * float elementsPerRow

let table4 =
    Chart.Table(
        headers,
        cells,
        LineCells   = line,
        LineHeader  = line,
        HeightCells = 20.,
        FontHeader  = font,
        FontCells   = font,
        ColumnWidth = [50;10],
        AlignCells  = [HorizontalAlign.Right;HorizontalAlign.Center],
        ColorCells  = cellcolors
        )
    |> Chart.withSize(chartwidth,nan)
    |> Chart.withTitle "Sequence A"
namespace Plotly
namespace Plotly.NET
module StyleParam

from Plotly.NET
val header : string list
val rows : string list list
val table1 : GenericChart.GenericChart
type Chart =
  static member Area : x:seq<#IConvertible> * y:seq<#IConvertible> * ?Name:string * ?ShowMarkers:bool * ?Showlegend:bool * ?MarkerSymbol:Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Dash:DrawingStyle * ?Width:float -> GenericChart + 1 overload
  static member Bar : keys:seq<#IConvertible> * values:seq<#IConvertible> * ?Name:string * ?Showlegend:bool * ?Color:string * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Marker:Marker -> GenericChart + 1 overload
  static member BoxPlot : ?x:'a0 * ?y:'a1 * ?Name:string * ?Showlegend:bool * ?Color:string * ?Fillcolor:'a2 * ?Opacity:float * ?Whiskerwidth:'a3 * ?Boxpoints:Boxpoints * ?Boxmean:BoxMean * ?Jitter:'a4 * ?Pointpos:'a5 * ?Orientation:Orientation * ?Marker:Marker * ?Line:Line * ?Alignmentgroup:'a6 * ?Offsetgroup:'a7 * ?Notched:bool * ?NotchWidth:float * ?QuartileMethod:QuartileMethod -> GenericChart + 1 overload
  static member Bubble : x:seq<#IConvertible> * y:seq<#IConvertible> * sizes:seq<#IConvertible> * ?Name:string * ?Showlegend:bool * ?MarkerSymbol:Symbol * ?Color:string * ?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 ChoroplethMap : locations:seq<string> * z:seq<#IConvertible> * ?Text:seq<#IConvertible> * ?Locationmode:LocationFormat * ?Autocolorscale:bool * ?Colorscale:Colorscale * ?Colorbar:Colorbar * ?Marker:Marker * ?GeoJson:'a2 * ?FeatureIdKey:string * ?Zmin:float * ?Zmax:float -> GenericChart
  static member ChoroplethMapbox : locations:seq<#IConvertible> * z:seq<#IConvertible> * geoJson:'a2 * ?FeatureIdKey:string * ?Text:seq<#IConvertible> * ?Below:string * ?Colorscale:Colorscale * ?Colorbar:Colorbar * ?ZAuto:bool * ?ZMin:float * ?ZMid:float * ?ZMax:float -> GenericChart
  static member Column : keys:seq<#IConvertible> * values:seq<#IConvertible> * ?Name:string * ?Showlegend:bool * ?Color:string * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Marker:Marker -> GenericChart + 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 DensityMapbox : lon:seq<#IConvertible> * lat:seq<#IConvertible> * ?Z:seq<#IConvertible> * ?Radius:float * ?Opacity:float * ?Text:seq<#IConvertible> * ?Below:string * ?Colorscale:Colorscale * ?Colorbar:Colorbar * ?Showscale:bool * ?ZAuto:bool * ?ZMin:float * ?ZMid:float * ?ZMax:float -> GenericChart + 1 overload
  ...
static member Chart.Table : headerValues:seq<#seq<'b>> * cellValues:seq<#seq<'d>> * ?AlignHeader:seq<HorizontalAlign> * ?AlignCells:seq<HorizontalAlign> * ?ColumnWidth:seq<int> * ?ColumnOrder:seq<int> * ?ColorHeader:'e * ?ColorCells:'f * ?FontHeader:Font * ?FontCells:Font * ?HeightHeader:float * ?HeightCells:float * ?LineHeader:Line * ?LineCells:Line -> GenericChart.GenericChart (requires 'b :> System.IConvertible and 'd :> System.IConvertible)
module GenericChart

from Plotly.NET
val toChartHTML : gChart:GenericChart.GenericChart -> string
val table2 : GenericChart.GenericChart
type HorizontalAlign =
  | Left
  | Center
  | Right
    static member convert : (HorizontalAlign -> obj)
    static member toString : (HorizontalAlign -> string)
union case HorizontalAlign.Center: HorizontalAlign
union case HorizontalAlign.Left: HorizontalAlign
union case HorizontalAlign.Right: HorizontalAlign
Multiple items
type Font =
  inherit DynamicObj
  new : unit -> Font
  static member init : ?Family:FontFamily * ?Size:float * ?Color:string -> Font
  static member style : ?Family:FontFamily * ?Size:float * ?Color:string -> (Font -> Font)

--------------------
new : unit -> Font
static member Font.init : ?Family:FontFamily * ?Size:float * ?Color:string -> Font
type FontFamily =
  | Arial
  | Balto
  | Courier_New
  | Consolas
  | Droid_Sans
  | Droid_Serif
  | Droid_Sans_Mono
  | Gravitas_One
  | Old_Standard_TT
  | Open_Sans
  ...
    static member convert : (FontFamily -> obj)
    static member toString : (FontFamily -> string)
union case FontFamily.Courier_New: FontFamily
Multiple items
type Line =
  inherit DynamicObj
  new : unit -> Line
  static member init : ?Width:float * ?Color:string * ?Shape:Shape * ?Dash:DrawingStyle * ?Smoothing:float * ?Colorscale:Colorscale * ?OutlierColor:string * ?OutlierWidth:float -> Line
  static member style : ?Width:float * ?Color:string * ?Shape:Shape * ?Dash:DrawingStyle * ?Smoothing:float * ?Colorscale:Colorscale * ?OutlierColor:string * ?OutlierWidth:float -> (Line -> Line)

--------------------
new : unit -> Line
static member Line.init : ?Width:float * ?Color:string * ?Shape:Shape * ?Dash:DrawingStyle * ?Smoothing:float * ?Colorscale:Colorscale * ?OutlierColor:string * ?OutlierWidth:float -> Line
val header2 : string list
val rowvalues : seq<float list>
Multiple items
module Seq

from Plotly.NET

--------------------
module Seq

from Microsoft.FSharp.Collections
val sortBy : projection:('T -> 'Key) -> source:seq<'T> -> seq<'T> (requires comparison)
val x : float list
val mapColor : min:float -> max:float -> value:float -> string
val min : float
val max : float
val value : float
val proportion : int
Multiple items
val int : value:'T -> int (requires member op_Explicit)

--------------------
[<Struct>]
type int = int32

--------------------
type int<'Measure> =
  int
module Colors

from Plotly.NET
val fromRgb : r:int -> g:int -> b:int -> Colors.Color
val toWebColor : c:Colors.Color -> string
val cellcolor : seq<seq<string>>
val map : mapping:('T -> 'U) -> source:seq<'T> -> seq<'U>
val row : float list
val mapi : mapping:(int -> 'T -> 'U) -> source:seq<'T> -> seq<'U>
val index : int
val transpose : source:seq<#seq<'T>> -> seq<seq<'T>>
val table3 : GenericChart.GenericChart
val sequence : string
module String

from Microsoft.FSharp.Core
val concat : sep:string -> strings:seq<string> -> string
val elementsPerRow : int
val headers : seq<string>
val x : int
val cells : seq<seq<string>>
val chunkBySize : chunkSize:int -> source:seq<'T> -> seq<'T []>
val i : int
val x : char []
val append : source1:seq<'T> -> source2:seq<'T> -> seq<'T>
Multiple items
val string : value:'T -> string

--------------------
type string = System.String
val cellcolors : seq<seq<string>>
val row : seq<string>
val element : string
val x : seq<string>
Multiple items
val seq : sequence:seq<'T> -> seq<'T>

--------------------
type seq<'T> = System.Collections.Generic.IEnumerable<'T>
val font : Font
union case FontFamily.Consolas: FontFamily
val line : Line
val chartwidth : float
Multiple items
val float : value:'T -> float (requires member op_Explicit)

--------------------
[<Struct>]
type float = System.Double

--------------------
type float<'Measure> =
  float
val table4 : GenericChart.GenericChart
static member Chart.withSize : width:float * height:float -> (GenericChart.GenericChart -> GenericChart.GenericChart)
val nan : float
static member Chart.withTitle : title:string * ?Titlefont:Font -> (GenericChart.GenericChart -> GenericChart.GenericChart)