Improve splom docs, fix parcat/parcoord docs

Author: kMutagene

docs/04_5_splom.fsx

@@ -33,26 +33,62 @@ let's first create some data for the purpose of creating example charts:
 
 *)
 
-open Plotly.NET 
+
+#r "nuget: FSharp.Data"
+#r "nuget: Deedle"
+
+open FSharp.Data
+open Deedle
+open Plotly.NET
 
 let data = 
-    [
-        "A",[|1.;4.;3.4;0.7;|]
-        "B",[|3.;1.5;1.7;2.3;|]
-        "C",[|2.;4.;3.1;5.|]
-        "D",[|4.;2.;2.;4.;|]
-    ]
+    Http.RequestString @"https://raw.githubusercontent.com/plotly/datasets/master/iris-data.csv"
+    |> fun csv -> Frame.ReadCsvString(csv,true,separators=",")
+
+let sepalLengthData = data.["sepal length"] |> Series.values
+let sepalWidthData = data.["sepal width"]  |> Series.values
+let petalLengthData = data.["petal length"] |> Series.values
+let petalWidthData = data.["petal width"]  |> Series.values
+
+let colors = 
+    data
+    |> Frame.getCol "class"
+    |> Series.values
+    |> Seq.cast<string>
+    |> Seq.map (fun x ->
+        match x with
+        | "Iris-setosa" -> 0.
+        | "Iris-versicolor" -> 0.5
+        | _ -> 1
+    )
+    |> Color.fromColorScaleValues
+
 
 (**
 Using a scatterplot matrix of several different variables can help to determine whether there are any
 relationships among the variables in the dataset.
 
-**Attention**: this function is not very well tested and does not use the `Chart.Grid` functionality. 
-Until that is fixed, consider creating splom plot programatically using `Chart.Grid` for more control.
+## Splom of the iris dataset
 *)
 
-let splom1 =
-    Chart.Splom(data,Color=Color.fromString "blue")
+let splom1 = 
+    Chart.Splom(
+        [
+            "sepal length" , sepalLengthData
+            "sepal width"  , sepalWidthData
+            "petal length" , petalLengthData
+            "petal width"  , petalWidthData
+        ],
+        MarkerColor = colors
+    )
+    |> Chart.withLayout(
+        Layout.init(
+            HoverMode = StyleParam.HoverMode.Closest,
+            DragMode = StyleParam.DragMode.Select
+        )
+    )
+    |> Chart.withSize (1000,1000)
+
 
 (*** condition: ipynb ***)
 #if IPYNB
@@ -63,7 +99,50 @@ splom1
 splom1 |> GenericChart.toChartHTML
 (***include-it-raw***)
 
+(**
+## Showing different parts of the plot matrix
 
+Use `ShowDiagonal`, `ShowUpperHalf` or `ShowLowerHalf` to customize the cells shown in the scatter plot matrix. 
 
+Here are some examples:
+*)
 
+let noDiagonal = 
+    Chart.Splom(
+        [
+            "sepal length" , sepalLengthData
+            "sepal width"  , sepalWidthData
+            "petal length" , petalLengthData
+            "petal width"  , petalWidthData
+        ],
+        MarkerColor = colors,
+        ShowDiagonal = false
+    )
+    |> Chart.withLayout(
+        Layout.init(
+            HoverMode = StyleParam.HoverMode.Closest,
+            DragMode = StyleParam.DragMode.Select
+        )
+    )
+    |> Chart.withSize (1000,1000)
+
+
+let noLowerHalf =
+    Chart.Splom(
+        [
+            "sepal length" , sepalLengthData
+            "sepal width"  , sepalWidthData
+            "petal length" , petalLengthData
+            "petal width"  , petalWidthData
+        ],
+        MarkerColor = colors,
+        ShowLowerHalf = false
+    )
+    |> Chart.withLayout(
+        Layout.init(
+            HoverMode = StyleParam.HoverMode.Closest,
+            DragMode = StyleParam.DragMode.Select
+        )
+    )
+    |> Chart.withSize (1000,1000)
 

docs/09_0_parallel-categories.fsx

@@ -38,8 +38,8 @@ open Plotly.NET.TraceObjects
 
 let dims =
     [
-        Dimensions.init(["Cat1";"Cat1";"Cat1";"Cat1";"Cat2";"Cat2";"Cat3"],Label="A")
-        Dimensions.init([0;1;0;1;0;0;0],Label="B",TickText=["YES";"NO"])
+        Dimension.initParallel(Values = ["Cat1";"Cat1";"Cat1";"Cat1";"Cat2";"Cat2";"Cat3"],Label="A")
+        Dimension.initParallel(Values = [0;1;0;1;0;0;0],Label="B",TickText=["YES";"NO"])
     ]
 
 let parcats =

docs/09_1_parallel-coords.fsx

@@ -53,7 +53,7 @@ the position of the vertex on the i-th axis corresponds to the i-th coordinate o
 *)
 
 let parcoords1 =
-    Chart.ParallelCoord(data,Color=Color.fromString "blue")
+    Chart.ParallelCoord(data,Color=Color.fromString "blue", UseDefaults = false)
 
 (*** condition: ipynb ***)
 #if IPYNB
@@ -67,26 +67,38 @@ parcoords1 |> GenericChart.toChartHTML
 open Plotly.NET.TraceObjects
 
 // Dynamic object version
+
 let parcoords = 
     let v = [|
-        Dimensions.init([|1.;4.;|],  
-            StyleParam.Range.MinMax (1.,5.),StyleParam.Range.MinMax (1.,2.),Label="A");
-        Dimensions.init([|3.;1.5;|], 
-            StyleParam.Range.MinMax (1.,5.),Label="B",Tickvals=[|1.5;3.;4.;5.;|]);
-        Dimensions.init([|2.;4.;|],  
-            StyleParam.Range.MinMax (1.,5.),Label="C",Tickvals=[|1.;2.;4.;5.;|],
-                TickText=[|"txt 1";"txt 2";"txt 4";"txt 5";|]);
-        Dimensions.init([|4.;2.;|],  
-            StyleParam.Range.MinMax (1.,5.),Label="D");
+        Dimension.initParallel(
+            Values = [|1.;4.;|],  
+            Range = StyleParam.Range.MinMax (1.,5.),
+            ConstraintRange = StyleParam.Range.MinMax (1.,2.),
+            Label="A");
+        Dimension.initParallel(
+            Values = [|3.;1.5;|], 
+            Range = StyleParam.Range.MinMax (1.,5.),
+            Label="B",
+            Tickvals=[|1.5;3.;4.;5.;|]);
+        Dimension.initParallel(
+            Values = [|2.;4.;|],  
+            Range = StyleParam.Range.MinMax (1.,5.),
+            Label= "C",
+            Tickvals=[|1.;2.;4.;5.;|],
+            TickText=[|"txt 1";"txt 2";"txt 4";"txt 5";|]);
+        Dimension.initParallel(
+            Values = [|4.;2.;|],  
+            Range = StyleParam.Range.MinMax (1.,5.),
+            Label="D");
     |]
 
     let dyn = Trace("parcoords")
 
     dyn?dimensions <- v
-    dyn?line <- Line.init(Color=Color.fromString "blue")
+    dyn?line <- Line.init(Color =Color.fromString "blue")
 
     dyn
-    |> GenericChart.ofTraceObject true
+    |> GenericChart.ofTraceObject false
 
 (*** condition: ipynb ***)
 #if IPYNB