Skip to content

Commit f2f6339

Browse files
chethankambichethankambi
authored
Add files via upload
1 parent a41915c commit f2f6339

File tree

2 files changed

+280
-0
lines changed

2 files changed

+280
-0
lines changed

‎colorScheme/d3_colorScheme.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Color Scheme</title>
8+
</head>
9+
10+
<body>
11+
12+
<h1>Color Scheme</h1>
13+
14+
<svg width='600' height='200'>
15+
16+
</svg>
17+
18+
<script src="/d3minlib/d3.min_v6.31.js"></script>
19+
<script src="d3_colorScheme.js"></script>
20+
</body>
21+
22+
</html>

‎colorScheme/d3_colorScheme.js

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
// This module provides sequential, diverging and categorical color schemes
2+
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
3+
4+
const allRect1 = d3.select('svg')
5+
.append('g')
6+
.attr('id', 'rect1')
7+
.selectAll('rect')
8+
.data(data)
9+
.join('rect')
10+
.attr('x', (d, i) => (i * 30))
11+
.attr('y', '0')
12+
.attr('width', '29')
13+
.attr('height', '90');
14+
15+
const allRect2 = d3.select('svg')
16+
.append('g')
17+
.attr('id', 'rect2')
18+
.selectAll('rect')
19+
.data(data)
20+
.join('rect')
21+
.attr('x', (d, i) => (i * 30))
22+
.attr('y', '100')
23+
.attr('width', '29')
24+
.attr('height', '90');
25+
26+
// Categorical
27+
allRect1.style('fill', (d, i) => d3.schemeCategory10[i]);
28+
29+
allRect1.style('fill', (d, i) => d3.schemeAccent[i]);
30+
31+
allRect1.style('fill', (d, i) => d3.schemeDark2[i]);
32+
33+
allRect1.style('fill', (d, i) => d3.schemePaired[i]);
34+
35+
allRect1.style('fill', (d, i) => d3.schemePastel1[i]);
36+
37+
allRect1.style('fill', (d, i) => d3.schemePastel2[i]);
38+
39+
allRect1.style('fill', (d, i) => d3.schemeSet1[i]);
40+
41+
allRect1.style('fill', (d, i) => d3.schemeSet2[i]);
42+
43+
allRect1.style('fill', (d, i) => d3.schemeSet3[i]);
44+
45+
allRect1.style('fill', (d, i) => d3.schemeTableau10[i]);
46+
47+
// Diverging
48+
// Colors are available as continuous interpolators (often used with d3.scaleSequential) and as discrete schemes (often used with d3.scaleOrdinal).
49+
allRect1.style('fill', (d, i) => d3.interpolateBrBG((i + 1) / 20));
50+
// t = 0 to 1
51+
allRect2.style('fill', (d, i) => d3.schemeBrBG[3][(i % 3)]);
52+
// k = 3 to 11
53+
allRect2.style('fill', (d, i) => d3.schemeBrBG[7][(i % 7)]);
54+
// k = 3 to 11
55+
allRect2.style('fill', (d, i) => d3.schemeBrBG[11][(i % 11)]);
56+
// k = 3 to 11
57+
58+
allRect1.style('fill', (d, i) => d3.interpolatePRGn((i + 1) / 20));
59+
// t = 0 to 1
60+
allRect2.style('fill', (d, i) => d3.schemePRGn[3][(i % 3)]);
61+
// k = 3 to 11
62+
allRect2.style('fill', (d, i) => d3.schemePRGn[7][(i % 7)]);
63+
// k = 3 to 11
64+
allRect2.style('fill', (d, i) => d3.schemePRGn[11][(i % 11)]);
65+
// k = 3 to 11
66+
67+
/* Other 2-Tone-Combos
68+
69+
d3.interpolatePiYG(t)
70+
d3.schemePiYG[k]
71+
---
72+
d3.interpolatePuOr(t)
73+
d3.schemePuOr[k]
74+
---
75+
d3.interpolateRdBu(t)
76+
d3.schemeRdBu[k]
77+
---
78+
d3.interpolateRdGy(t)
79+
d3.schemeRdGy[k]
80+
---
81+
d3.interpolatePuOr(t)
82+
d3.schemePuOr[k]
83+
---
84+
*/
85+
86+
allRect1.style('fill', (d, i) => d3.interpolateRdYlBu((i + 1) / 20));
87+
// t = 0 to 1
88+
allRect2.style('fill', (d, i) => d3.schemeRdYlBu[3][(i % 3)]);
89+
// k = 3 to 11
90+
allRect2.style('fill', (d, i) => d3.schemeRdYlBu[7][(i % 7)]);
91+
// k = 3 to 11
92+
allRect2.style('fill', (d, i) => d3.schemeRdYlBu[11][(i % 11)]);
93+
// k = 3 to 11
94+
95+
allRect1.style('fill', (d, i) => d3.interpolateRdYlGn((i + 1) / 20));
96+
// t = 0 to 1
97+
allRect2.style('fill', (d, i) => d3.schemeRdYlGn[3][(i % 3)]);
98+
// k = 3 to 11
99+
allRect2.style('fill', (d, i) => d3.schemeRdYlGn[7][(i % 7)]);
100+
// k = 3 to 11
101+
allRect2.style('fill', (d, i) => d3.schemeRdYlGn[11][(i % 11)]);
102+
// k = 3 to 11
103+
104+
allRect1.style('fill', (d, i) => d3.interpolateSpectral((i + 1) / 20));
105+
// t = 0 to 1
106+
allRect2.style('fill', (d, i) => d3.schemeSpectral[3][(i % 3)]);
107+
// k = 3 to 11
108+
allRect2.style('fill', (d, i) => d3.schemeSpectral[7][(i % 7)]);
109+
// k = 3 to 11
110+
allRect2.style('fill', (d, i) => d3.schemeSpectral[11][(i % 11)]);
111+
// k = 3 to 11
112+
113+
// Sequential(Single Hue)
114+
// Colors are available as continuous interpolators (often used with d3.scaleSequential) and as discrete schemes (often used with d3.scaleOrdinal).
115+
allRect1.style('fill', (d, i) => d3.interpolateBlues((i + 1) / 20));
116+
// t = 0 to 1
117+
allRect2.style('fill', (d, i) => d3.schemeBlues[3][(i % 3)]);
118+
// k = 3 to 9
119+
allRect2.style('fill', (d, i) => d3.schemeBlues[6][(i % 6)]);
120+
// k = 3 to 9
121+
allRect2.style('fill', (d, i) => d3.schemeBlues[9][(i % 9)]);
122+
// k = 3 to 9
123+
124+
/* Other Single Hue
125+
126+
d3.interpolateGreens(t)
127+
d3.schemeGreens[k]
128+
129+
d3.interpolateGreys(t)
130+
d3.schemeGreys[k]
131+
132+
d3.interpolateOranges(t)
133+
d3.schemeOranges[k]
134+
135+
d3.interpolatePurples(t)
136+
d3.schemePurples[k]
137+
138+
d3.interpolateReds(t)
139+
d3.schemeReds[k]
140+
141+
// Other 2 tone with t = 0 to 1 and k = 3 to 9
142+
d3.interpolateBuGn(t)
143+
d3.schemeBuGn[k]
144+
145+
d3.interpolateBuPu(t)
146+
d3.schemeBuPu[k]
147+
148+
d3.interpolateGnBu(t)
149+
d3.schemeGnBu[k]
150+
151+
d3.interpolateOrRd(t)
152+
d3.schemeOrRd[k]
153+
154+
d3.interpolatePuBu(t)
155+
d3.schemePuBu[k]
156+
157+
d3.interpolatePuRd(t)
158+
d3.schemePuRd[k]
159+
160+
d3.interpolateRdPu(t)
161+
d3.schemeRdPu[k]
162+
163+
d3.interpolateYlGn
164+
d3.schemeYlGn[k]
165+
166+
// Other 3 tone with t = 0 to 1 and k = 3 to 9
167+
168+
d3.interpolatePuBuGn(t)
169+
d3.schemePuBuGn[k]
170+
171+
d3.interpolateYlGnBu(t)
172+
d3.schemeYlGnBu[k]
173+
174+
d3.interpolateYlOrBr(t)
175+
d3.schemeYlOrBr[k]
176+
177+
d3.interpolateYlOrRd(t)
178+
d3.schemeYlOrRd[k]
179+
180+
*/
181+
182+
// Sequential(Multi Hue)
183+
// Colors are available as continuous interpolators (often used with d3.scaleSequential) and as discrete schemes (often used with d3.scaleOrdinal).
184+
allRect1.style('fill', (d, i) => d3.interpolateTurbo((i + 1) / 20));
185+
// t = 0 to 1
186+
allRect2.style('fill', (d, i) => d3.interpolateViridis((i + 1) / 20));
187+
// t = 0 to 1
188+
189+
/* Others
190+
191+
d3.interpolateInferno(t)
192+
d3.interpolateMagma(t)
193+
d3.interpolatePlasma(t)
194+
d3.interpolateCividis(t)
195+
d3.interpolateWarm(t)
196+
d3.interpolateCool(t)
197+
d3.interpolateCubehelixDefault(t)
198+
199+
*/
200+
201+
// Cyclical
202+
allRect1.style('fill', (d, i) => d3.interpolateRainbow((i + 1) / 20));
203+
// t = 0 to 1
204+
allRect2.style('fill', (d, i) => d3.interpolateSinebow((i + 1) / 20));
205+
// t = 0 to 1
206+
207+
// -----
208+
// Use of Color Schemes on Scales
209+
// Continuous - Linear Scale
210+
let color = d3.scaleLinear()
211+
.domain([1, 20])
212+
.range([d3.interpolateOrRd(0), d3.interpolateOrRd(1)]);
213+
allRect1.style('fill', d => color(d));
214+
215+
// Sequential
216+
color = d3.scaleSequential()
217+
.domain([1, 20])
218+
.range([d3.interpolatePlasma(0), d3.interpolatePlasma(1)]);
219+
allRect1.style('fill', d => color(d));
220+
221+
// Diverging
222+
color = d3.scaleDiverging()
223+
.domain([1, 10, 20])
224+
.range([d3.interpolateCool(0), d3.interpolateCool(0.5), d3.interpolateCool(1)]);
225+
allRect2.style('fill', d => color(d));
226+
227+
// Quantize
228+
color = d3.scaleQuantize()
229+
.domain([1, 20])
230+
.range([d3.interpolateWarm(0), d3.interpolateWarm(0.5), d3.interpolateWarm(1)]);
231+
allRect2.style('fill', d => color(d));
232+
233+
// Quantile
234+
color = d3.scaleQuantile()
235+
.domain([1, 5, 10, 15, 20])
236+
.range([d3.interpolatePlasma(0),
237+
d3.interpolatePlasma(0.25),
238+
d3.interpolatePlasma(0.5),
239+
d3.interpolatePlasma(0.75),
240+
d3.interpolatePlasma(1)]);
241+
allRect1.style('fill', d => color(d));
242+
243+
// Threshold
244+
color = d3.scaleThreshold()
245+
.domain([...data])
246+
.range([...d3.schemeCategory10, ...d3.schemeTableau10]);
247+
allRect2.style('fill', d => color(d));
248+
249+
// Ordinal
250+
color = d3.scaleOrdinal()
251+
.domain([1, 20])
252+
.range(d3.schemeDark2)
253+
allRect1.style('fill', d => color(d));
254+
255+
color = d3.scaleOrdinal()
256+
.domain([1, 20])
257+
.range(d3.schemePastel2)
258+
allRect2.style('fill', d => color(d));

0 commit comments

Comments
 (0)