Fsharp > Fundamentals > Continuous Color Scales and Color Bars
Suggest an edit to this page

Continuous Color Scales and Color Bars in Fsharp

How to set, create and control continuous color scales and color bars in scatter, bar, map and heatmap figures.


MATLAB®

ggplot2

Python

Fsharp

In [1]:
// #r "nuget: Plotly.NET, *-*"
// #r "nuget: Plotly.NET.Interactive, *-*"
#r "nuget: Plotly.NET, 2.0.0-preview.6"
#r "nuget: Plotly.NET.Interactive, 2.0.0-preview.6"
#r "nuget: Deedle"
#r "nuget: FSharp.Data"
open Plotly.NET
Installed Packages
  • Deedle, 2.4.3
  • FSharp.Data, 4.2.3
  • Plotly.NET, 2.0.0-preview.6
  • Plotly.NET.Interactive, 2.0.0-preview.6

Loading extensions from Plotly.NET.Interactive.dll

Added Kernel Extension including formatters for Plotly.NET charts.

Custom Discretized Heatmap Color scale with Graph Objects

In [2]:
let  z=[[0;1;2;3;4;5;6;7;8;9]]
let customColorscale = StyleParam.Colorscale.Custom [(0.0,"#000000");(1.0,"#B4B4B4")]
In [3]:
Chart.Heatmap(z,Colorscale=customColorscale)
|> Chart.withSize(800.,600.)
Out[3]:

Color scale for Scatter Plots with Graph Objects

In [4]:
let N = 40
let rnd = System.Random()
let values = Array.init N (fun _ -> rnd.Next(0, 40))
let marker = Marker.init(Size= 16,Colorscale=StyleParam.Colorscale.Viridis, Showscale=true);
marker?color <-values;
In [5]:
let scatter =
  Chart.Scatter(values,values,StyleParam.Mode.Markers)
  |> Chart.withMarker(marker)
In [6]:
scatter
Out[6]:

Color scale for Contour Plot with Graph Objects

In [7]:
let z=[| [|10.0; 10.625; 12.5; 15.625; 20.0;|];
        [|5.625; 6.25; 8.125; 11.25; 15.625;|];
        [|2.5; 3.125; 5.0; 8.125; 12.5;|];
        [|0.625; 1.25; 3.125; 6.25; 10.625;|];
        [|0.0; 0.625; 2.5; 5.625; 10.0|]|]


let contour =
    z
    |> Chart.Contour
    |> Chart.withSize(600.,600.)
In [8]:
contour
Out[8]:

Custom Heatmap Color scale with Graph Objects

In [9]:
open FSharp.Data

type jsondata = JsonProvider<"https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json">
let data = jsondata.Load("https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json")
In [10]:
let z = data.Z
//let customColorscale = StyleParam.Colorscale.Custom [(0.0,"#A6CEE3");(1.0,"#E31A1C")]
let customColorscale = StyleParam.Colorscale.Custom [(0.0,"rgb(165,0,38)");(0.11,"rgb(215,48,39)");(0.22,"rgb(244,109,67)");
                                                     (0.33,"rgb(253,174,97)");(0.44,"rgb(254,224,144)");(0.55,"rgb(224,243,248)");
                                                     (0.66,"rgb(171,217,233)");(0.77,"rgb(116,173,209)");(0.88,"rgb(69,117,180)");
                                                      (1.0,"rgb(49,54,149)");]
In [11]:
Chart.Heatmap(z,Colorscale=customColorscale,Showscale=true)
Out[11]:

Setting the Midpoint of a Diverging Color scale with Graph Objects

In [12]:
let N = 20
let rnd = System.Random()
let values = Array.init N (fun _ -> rnd.Next(-5, 15))
let marker = Marker.init(Size= 25,Colorscale=StyleParam.Colorscale.Viridis, Showscale=true);
marker?color <-values;
marker?cmid<-0;
In [13]:
let scatter =
  Chart.Scatter(values,values,StyleParam.Mode.Markers)
  |> Chart.withMarker(marker)
In [14]:
scatter
Out[14]:

Custom Contour Plot Color scale with Graph Objects

In [15]:
let z=[| [|10.0; 10.625; 12.5; 15.625; 20.0;|];
        [|5.625; 6.25; 8.125; 11.25; 15.625;|];
        [|2.5; 3.125; 5.0; 8.125; 12.5;|];
        [|0.625; 1.25; 3.125; 6.25; 10.625;|];
        [|0.0; 0.625; 2.5; 5.625; 10.0|]|]

//let customColorscale = StyleParam.Colorscale.Custom [(0.0,"#A6CEE3");(1.0,"#E31A1C")]


let customColorscale = StyleParam.Colorscale.Custom [(0.0,"rgb(166,206,227)");(0.25,"rgb(31,120,180)");(0.45,"rgb(178,223,138)");
                                                     (0.65,"rgb(51,160,44)");(0.85,"rgb(251,154,153)");
                                                      (1.0,"rgb(227,26,28)");]
let contour =
 Chart.Contour(z,Colorscale=customColorscale)
    |> Chart.withSize(600.,600.)
In [16]:
contour
Out[16]:

Custom Color bar Title, Labels, and Ticks with Graph Objects

(Work well on scatter and othe plots but issue on heat map)

In [17]:
open FSharp.Data
type jsondata = JsonProvider<"https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json">
let data = jsondata.Load("https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json")
In [18]:
let z = data.Z
//let customColorscale = StyleParam.Colorscale.Custom [(0.0,"#A6CEE3");(1.0,"#E31A1C")]

let customColorscale = StyleParam.Colorscale.Custom [(0.0,"rgb(165,0,38)");
                                                     (0.11,"rgb(215,48,39)");
                                                     (0.22,"rgb(244,109,67)");
                                                     (0.33,"rgb(253,174,97)");
                                                     (0.44,"rgb(254,224,144)");
                                                     (0.55,"rgb(224,243,248)");
                                                     (0.66,"rgb(171,217,233)");
                                                     (0.77,"rgb(116,173,209)");
                                                     (0.88,"rgb(69,117,180)");
                                                      (1.0,"rgb(49,54,149)");]
In [19]:
Chart.Heatmap(z,
             Colorscale=customColorscale,
             Colorbar= Colorbar.init(Title="Surface Heat",Titleside=StyleParam.Side.Top,
             Tickmode=StyleParam.TickMode.Array, Tickvals=[|2;50;100|],Ticktext=[|"Cool";"Mild";"Hot"|]))

input.fsx (4,14)-(4,22) parse warning Possible incorrect indentation: this token is offside of context started at position (3:14). Try indenting this token further or using standard formatting conventions.

input.fsx (4,14)-(4,22) parse warning Possible incorrect indentation: this token is offside of context started at position (3:14). Try indenting this token further or using standard formatting conventions.
Out[19]:

Sharing a Color Axis with Graph Objects

In [20]:
let z0=[|1; 2; 3; 4;4;-3;-1;1;|];
let z1=[|10; 2; 1; 0;4;3;5;6;|];
let seq1 = [1 ..4 ] |> Seq.map(fun _-> z0) |> Seq.toArray
let seq2 = [1 ..4 ] |> Seq.map(fun _-> z1) |> Seq.toArray
let marker = Marker.init(Size= 25,Colorscale=StyleParam.Colorscale.Viridis, Showscale=false);
let layout =
    let temp = Layout()
    temp?coloraxis  <- "coloraxis"
    temp
In [21]:
let headmap1=
           Chart.Heatmap(data=seq1)
           |>Chart.withMarker(marker)
           |>Chart.withLayout(layout)

headmap1
Out[21]:
In [22]:
let headmap2=
           Chart.Heatmap(seq2)
           |>Chart.withMarker(marker)
           |>Chart.withLayout(layout)

headmap2
Out[22]:

Logarithmic Color scale with Graph Objects

In [23]:
let z=[| [|10.; 100.625; 1200.5; 150.625; 2000.;|];
        [|5000.625; 60.25; 8.125; 100000.0; 150.625|];
        [|2000.5; 300.125; 50.; 8.125; 12.5|];
        [|10.625; 1.25; 3.125; 6000.25; 100.625|];
        [|0.; 0.625; 2.5; 50000.625; 10.;|]|]
//let customColorscale = StyleParam.Colorscale.Custom [(0.0,"#FAFAFA");(1.0,"#1C1C1C")]

let customColorscale = StyleParam.Colorscale.Custom [(0.,"rgb(250, 250, 250)");
                                                     (1./10000.,"rgb(200, 200, 200)");
                                                     (1./1000.,"rgb(150, 150, 150)");
                                                     (1./100.,"rgb(100, 100, 100)");
                                                     (1./10.,"rgb(50, 50, 50");
                                                     (1.,"rgb(0, 0, 0)");
                                                     ]
In [24]:
Chart.Heatmap(z,Colorscale=customColorscale)
|> Chart.withSize(800.,600.)
// |>Chart.withMarker(marker)
Out[24]: