-
Notifications
You must be signed in to change notification settings - Fork 81
/
00_7_working-with-colors.fsx
155 lines (119 loc) · 4.55 KB
/
00_7_working-with-colors.fsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
(**
---
title: Working with colors
category: General
categoryindex: 1
index: 8
---
*)
(*** hide ***)
(*** condition: prepare ***)
#r "nuget: Newtonsoft.JSON, 13.0.1"
#r "nuget: DynamicObj, 2.0.0"
#r "../src/Plotly.NET/bin/Release/netstandard2.0/Plotly.NET.dll"
(*** condition: ipynb ***)
#if IPYNB
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
#endif // IPYNB
(**
# Working with colors
[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
#### Table of contents
- [The Color type](#The-Color-type)
- [Setting single colors](#Setting-single-colors)
- [Setting individual colors](#Setting-individual-colors)
- [Mapping values to a color scale](#Mapping-values-to-a-color-scale)
## The Color type
There are many ways how plotly.js handles colors. In general, individual colors can be set the same way as in general html/css - so for example string representations of (a)rgb, hsl, or keywords such as "red"
Additionally to that, there are several ways of controlling color attributes of plotly objects:
- Setting a single color which will be used for all elements in a collection, for example all markers: `"rgb(r,g,b)"` or `"red"`
- Setting an array of colors to assign single colors for each individual item in a collection, for example each individual marker: `["red","blue"]`
- Mapping values to a color scale, for example coloring markers by intensity of the datum: `[6.9, 4.2]`
- These can also be mixed in collections.
To do this justice in Plotly.NET in a type-safe way, we provide the dedicated `Color` type that has methods to create all of these variants.
The `Color` type provides methods to initialize all of the above mentioned ways to control color attributes of plotly charts.
Color Keywords and ARGB are also wrapped in a typesafe way:
*)
open Plotly.NET
// single colors
let singleColor1 = Color.fromKeyword Red // using html color keywords
let singleColor2 = Color.fromARGB 255 42 13 1 // using type-safe argb
let singleColor3 = Color.fromHex "#FFFFFF" // parsing hex strings
let singleColor4 = Color.fromString "red" // you can also set any string value if you really need to
(**
The `Color` type is basically a container for boxed values that gets converted to correct plotly attributes internally:
*)
singleColor1.Value
(***include-it***)
open Newtonsoft.Json
singleColor3 |> JsonConvert.SerializeObject
(***include-it***)
(**
## Setting single colors
Here is an example on how to set a single color for a plotly color attribute:
*)
let colorChart1 =
Chart.Bubble(
[1,2,15; 3,4,15; 5,6,15],
MarkerColor = Color.fromKeyword Red // will make ALL markers red.
)
(*** condition: ipynb ***)
#if IPYNB
colorChart1
#endif // IPYNB
(***hide***)
colorChart1 |> GenericChart.toChartHTML
(***include-it-raw***)
(**
The `Color` type is basically a container for boxed values that gets converted to correct plotly attributes internally:
*)
singleColor1.Value
(***include-it***)
open Newtonsoft.Json
singleColor3 |> JsonConvert.SerializeObject
(***include-it***)
(**
## Setting individual colors
`Color.fromColors` takes a collection of colors and wraps them as a new `Color` object.
Here is an example on how to set individual colors in a collection for a plotly color attribute.
*)
let colorChart2 =
Chart.Bubble(
[1,2,15; 3,4,15; 5,6,15],
MarkerColor = Color.fromColors [
Color.fromKeyword Red
Color.fromKeyword Green
Color.fromKeyword Blue
]
)
(*** condition: ipynb ***)
#if IPYNB
colorChart2
#endif // IPYNB
(***hide***)
colorChart2 |> GenericChart.toChartHTML
(***include-it-raw***)
(**
## Mapping values to a color scale
`Color.fromColorScaleValues` takes a collection of values that will be mapped onto a color scale (normalized between min and max value)
Here is an example on how to set up color scale mapping:
*)
let x = [1; 2; 3]
let y = [2; 3; 4] // we want to color the markers depending on their y value.
let sizes = [15; 15; 15]
let colorChart3 =
Chart.Bubble(
x,y,sizes,
MarkerColor = Color.fromColorScaleValues y
)
|> Chart.withMarkerStyle(ShowScale = true) // we want to see the color scale we are mapping to
(*** condition: ipynb ***)
#if IPYNB
colorChart3
#endif // IPYNB
(***hide***)
colorChart3 |> GenericChart.toChartHTML
(***include-it-raw***)