add value dependent cell coloring

add table sequence representation

Author: bvenn

docsrc/content/table.fsx

@@ -13,7 +13,7 @@ This example shows how to create tables in F#.
 open FSharp.Plotly 
 open FSharp.Plotly.StyleParam
 
-let header = ["RowIndex";"A";"simple";"table"]
+let header = ["<b>RowIndex</b>";"A";"simple";"table"]
 let rows = 
     [
      ["0";"I";"am";"a"]        
@@ -40,16 +40,19 @@ let table2 =
         rows,
         //sets global header alignment
         AlignHeader= [HorizontalAlign.Center],
-        //sets alignment for each column separately (The last alignment is applied to all potential following columns)
+        //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 single header color to each header column
+        //sets specific header color to each header column
         //ColorHeader=["#45546a";"#deebf7";"#45546a";"#deebf7"],    
         //sets global cell color
         //ColorRows="#deebf7",
-        //sets single header color to each header column
+        //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
@@ -67,10 +70,114 @@ table2 |> Chart.Show
 (*** include-value:table2 ***)
 
 (**
-FastA Representation
+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 percentage = (value - min) / (max - min)
+    Colors.fromRgb 255 (255 - (int (255. * percentage)))  (int (255. * percentage))
+    |> 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)
+
+(***do-not-eval***)
+table3 |> Chart.Show
+
+
+(*** include-value:table3 ***)
+
+
+(**
+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 nucleotid -> 
+            match nucleotid 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"
+
+
+(***do-not-eval***)
+table4 |> Chart.Show
+
 
+(*** include-value:table4 ***)