Dash.NET interactive notebook example

iris-sample.dib

#!fsharp

#r "nuget:Dash.NET.Interactive,0.2.0-alpha.3"

#!fsharp

open System.Net

// Download Iris dataset
let webClient = new WebClient()
let irisDataSet = webClient.DownloadString("https://raw.githubusercontent.com/dotnet/machinelearning/main/test/data/iris.data")

// Parse it into workable parts
let parts = irisDataSet.Split("\n",StringSplitOptions.RemoveEmptyEntries)

let parseLine(x:string) = 
  let xxx = x.Split(",") in (xxx.[0],xxx.[1],xxx.[2],xxx.[3],xxx.[4])

let parsed = Seq.map parseLine parts
let scale = 5
let points = Seq.map (fun (a,b,_,_,_) -> a,b) parsed
let spec = Seq.map (fun (a,b,_,_,x) -> x) parsed
let petal_length = Seq.map (fun (a,b,c:string,_,x) -> scale*int(Convert.ToDecimal c)) parsed

// map species to different colors
let colorMap = function | "Iris-setosa" -> "#4287f5" | "Iris-versicolor" -> "#cb23fa" | "Iris-virginica" -> "#23fabd" 

#!fsharp

// Learn more about Dash.NET at https://plotly.github.io/Dash.NET/

open Dash.NET.Suave
open Dash.NET.Html
open Dash.NET.DCC
open Dash.NET
open Plotly.NET


let markers = TraceObjects.Marker.init(MultiSize=petal_length)
markers?color <- Seq.map colorMap spec

// Use plotly charts
let scatterPlot = 
  Chart.Scatter(points,StyleParam.Mode.Markers)
  |> Chart.withMarker markers
  |> Chart.withTitle("Iris Dataset")
  |> Chart.withXAxisStyle("Sepal Length")
  |> Chart.withYAxisStyle("Sepal Width")

// Layout for our dash app
let myLayout = 
  Html.div [
    Attr.children [
      Graph.graph "my-ghraph-id" [Graph.Attr.figure(GenericChart.toFigure scatterPlot)];
    ]
  ]

let dashApp =
  DashApp.initDefault()
  |> DashApp.withLayout myLayout

// display the application inside the notebook
dashApp