Skip to content

Commit 466efdc

Browse files
kMutagenekMutagene
committed
#260: add docs on how to use the Color type, remove old color tables
1 parent 13f8eed commit 466efdc

File tree

3 files changed

+156
-64
lines changed

3 files changed

+156
-64
lines changed

‎Plotly.NET.sln

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
4949
docs\00_4_templates.fsx = docs\00_4_templates.fsx
5050
docs\00_5_defaults.fsx = docs\00_5_defaults.fsx
5151
docs\00_6_multi-arguments.fsx = docs\00_6_multi-arguments.fsx
52+
docs\00_7_working-with-colors.fsx = docs\00_7_working-with-colors.fsx
5253
docs\01_0_axis-styling.fsx = docs\01_0_axis-styling.fsx
5354
docs\01_1_errorbars.fsx = docs\01_1_errorbars.fsx
5455
docs\01_2_multiple-charts.fsx = docs\01_2_multiple-charts.fsx

‎docs/00_7_working-with-colors.fsx

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

‎src/Plotly.NET/CommonAbstractions/Colors.fs

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -201,67 +201,3 @@ and ColorConverter() =
201201
let c = value :?> Color
202202
let jc = JsonConvert.SerializeObject(c.Value)
203203
writer.WriteRawValue(jc)
204-
205-
206-
// http://graphicdesign.stackexchange.com/questions/3682/where-can-i-find-a-large-palette-set-of-contrasting-colors-for-coloring-many-d
207-
module Color =
208-
module Table =
209-
210-
let black = Color.fromRGB 0 0 0
211-
let blackLite = Color.fromRGB 89 89 89 // 35% lighter
212-
let white = Color.fromRGB 255 255 255
213-
214-
/// Color palette from Microsoft office 2016
215-
module Office =
216-
217-
// blue
218-
let blue = Color.fromRGB 65 113 156
219-
let lightBlue = Color.fromRGB 189 215 238
220-
let darkBlue = Color.fromRGB 68 114 196
221-
222-
// red
223-
let red = Color.fromRGB 241 90 96
224-
let lightRed = Color.fromRGB 252 212 214
225-
226-
// orange
227-
let orange = Color.fromRGB 237 125 49
228-
let lightOrange = Color.fromRGB 248 203 173
229-
230-
// yellow
231-
let yellow = Color.fromRGB 255 217 102
232-
let lightYellow = Color.fromRGB 255 230 153
233-
let darkYellow = Color.fromRGB 255 192 0
234-
235-
// green
236-
let green = Color.fromRGB 122 195 106
237-
let lightGreen = Color.fromRGB 197 224 180
238-
let darkGreen = Color.fromRGB 112 173 71
239-
240-
// grey
241-
let grey = Color.fromRGB 165 165 165
242-
let lightGrey = Color.fromRGB 217 217 217
243-
244-
// From publication: Escaping RGBland: Selecting Colors for Statistical Graphics
245-
// http://epub.wu.ac.at/1692/1/document.pdf
246-
module StatisticalGraphics24 =
247-
let a = 1
248-
//
249-
//{2,63,165},{125,135,185},{190,193,212},{214,188,192},{187,119,132},{142,6,59},{74,111,227},{133,149,225},{181,187,227},{230,175,185},{224,123,145},{211,63,106},{17,198,56},{141,213,147},{198,222,199},{234,211,198},{240,185,141},{239,151,8},{15,207,192},{156,222,214},{213,234,231},{243,225,235},{246,196,225},{247,156,212}
250-
251-
252-
253-
254-
//
255-
//BrightPastel: 418CF0,FCB441,DF3A02,056492,BFBFBF,1A3B69,FFE382,129CDD,CA6B4B,005CDB,F3D288,506381,F1B9A8,E0830A,7893BE
256-
//Berry: 8A2BE2,BA55D3,4169E1,C71585,0000FF,8019E0,DA70D6,7B68EE,C000C0,0000CD,800080
257-
//Bright: 008000,0000FF,800080,800080,FF00FF,008080,FFFF00,808080,00FFFF,000080,800000,FF3939,7F7F00,C0C0C0,FF6347,FFE4B5
258-
//BrightPastel: 418CF0,FCB441,DF3A02,056492,BFBFBF,1A3B69,FFE382,129CDD,CA6B4B,005CDB,F3D288,506381,F1B9A8,E0830A,7893BE
259-
//Chocolate: A0522D,D2691E,8B0000,CD853F,A52A2A,F4A460,8B4513,C04000,B22222,B65C3A
260-
//EarthTones: 33023,B8860B,C04000,6B8E23,CD853F,C0C000,228B22,D2691E,808000,20B2AA,F4A460,00C000,8FBC8B,B22222,843A05,C00000
261-
//Excel: 9999FF,993366,FFFFCC,CCFFFF,660066,FF8080,0063CB,CCCCFF,000080,FF00FF,FFFF00,00FFFF,800080,800000,007F7F,0000FF
262-
//Fire: FFD700,FF0000,FF1493,DC143C,FF8C00,FF00FF,FFFF00,FF4500,C71585,DDE221
263-
//GrayScale: C8C8C8,BDBDBD,B2B2B2,A7A7A7,9C9C9C,919191,868686,7A7A7A,707070,656565,565656,4F4F4F,424242,393939,2E2E2E,232323
264-
//Light: E6E6FA,FFF0F5,FFDAB9,,FFFACD,,FFE4E1,F0FFF0,F0F8FF,F5F5F5,FAEBD7,E0FFFF
265-
//Pastel: 87CEEB,32CD32,BA55D3,F08080,4682B4,9ACD32,40E0D0,FF69B4,F0E68C,D2B48C,8FBC8B,6495ED,DDA0DD,5F9EA0,FFDAB9,FFA07A
266-
//SeaGreen: 2E8B57,66CDAA,4682B4,008B8B,5F9EA0,38B16E,48D1CC,B0C4DE,8FBC8B,87CEEB
267-
//SemiTransparent: FF6969,69FF69,6969FF,FFFF5D,69FFFF,FF69FF,CDB075,FFAFAF,AFFFAF,AFAFFF,FFFFAF,AFFFFF,FFAFFF,E4D5B5,A4B086,819EC1

0 commit comments

Comments
 (0)