In [1]:

#r "nuget: Plotly.NET,  2.0.0-preview.8"
#r "nuget: newtonsoft.json"
#r "nuget: Plotly.NET.Interactive,  2.0.0-preview.8"
open Plotly.NET

Installed Packages

newtonsoft.json, 13.0.1
Plotly.NET, 2.0.0-preview.8
Plotly.NET.Interactive, 2.0.0-preview.8

Loading extensions from Plotly.NET.Interactive.dll

Added Kernel Extension including formatters for Plotly.NET charts.

Simple Bubble Chart¶

In [2]:

open Plotly.NET

Chart.Bubble([1;2;3;4], [10;11;12;13], [40;60;80;100])

Out[2]:

Setting Marker Size and Color¶

In [3]:

open Plotly.NET
open Plotly.NET.TraceObjects

let colors = 
    [|"#4287f5";"#cb23fa";"#23fabd";"#ff7b00"|] 
    |> Seq.map Color.fromString
    |> Color.fromColors

Chart.Bubble(x=[1;2;3;4], y=[10;11;12;13], sizes=[40;60;80;100],Color=colors)

Out[3]:

Scaling the size of bubble charts¶

To scale the bubble size, use the attribute Marker Sizeref property. We recommend using the following formula to calculate a sizeref value: sizeref = 2. * max(array of size values) / (desired maximum marker size ** 2)

Note that setting 'Sizeref' to a value greater than 1, decreases the rendered marker sizes, while setting 'Sizeref' to less than 1, increases the rendered marker sizes. See https://plotly.com/fsharp/reference/scatter/#scatter-marker-sizeref for more information. Additionally, we recommend setting the sizemode attribute: https://plotly.com/fsharp/reference/scatter/#scatter-marker-sizemode to area.

In [4]:

open Plotly.NET

let sizes = [20.; 40.; 60.; 80.; 100.; 80.; 60.; 40.; 20.; 40.]
let x = [1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.]
let y = [11.; 12.; 10.; 11.; 12.; 11.; 12.; 13.; 12.; 11.]

Chart.Bubble(x, y, sizes)

|> Chart.withMarker(Marker.init(//Opacity = [1.; 0.8; 0.6; 0.4],
                                MultiSizes = sizes,
                                Sizeref = 2. * (Seq.max sizes) / System.Math.Pow(40., 2.),
                                Sizemode = StyleParam.MarkerSizeMode.Area,
                                Sizemin = 4.0
                                ))

Out[4]:

Hover Text with Bubble Charts¶

In [5]:

open Plotly.NET.TraceObjects

let x=[1; 2; 3; 4]
let y=[10; 11; 12; 13]

let colors = 
    ["rgb(160, 164, 214)"; "rgb(255, 144, 14)";  "rgb(44, 160, 101)"; "rgb(255, 65, 54)"]
    |> Seq.map (fun c -> Color.fromString(c))
    |> Color.fromColors

let marker = Marker.init(MultiSizes=[40; 60; 80; 100],Color=colors)

let labels = ["A<br>size: 40"; "B<br>size: 60"; "C<br>size: 80"; "D<br>size: 100"];

Chart.Scatter(x,y,StyleParam.Mode.Markers, Labels=labels)
    |> Chart.withMarker(marker)

Out[5]:

Bubble Charts with Colorscale¶

In [6]:

open Plotly.NET.TraceObjects

let x=[1.; 3.2; 5.4; 7.6; 9.8; 12.5;]
let y=[1.; 3.2; 5.4; 7.6; 9.8; 12.5;]

let colors=
    [120; 125; 130; 135; 140; 145] 
    |> Seq.cast<IConvertible>
    |> Color.fromColorScaleValues
    

let marker = Marker.init(MultiSizes=[15; 30; 55; 70; 90; 110],Showscale=true,Color=colors)


Chart.Scatter(x,y,StyleParam.Mode.Markers)
    |> Chart.withMarker(marker)

Out[6]: