├── img
├── 3. Solar system.png
├── 1. Area Chart Gradient.png
├── 3. Solar system - Simple.png
├── 2. Multi Color Legend - Simple.png
├── 2. Multi Color Legend - Weather.png
├── 1. Area Chart Gradient - Multiple Colors.png
└── 4. Position and Data Based Gradient - Avengers Collaborations.png
├── 3. Data based gradients
├── galaxy.jpg
├── Solar System Gradient - Simple.html
└── Solar System Gradient - Sun and orbits.html
├── README.md
├── 4. Orientation based gradients
├── d3.layout.chord.sort.js
├── Avenger collaborations - Position based gradients- Simple.html
└── Avenger collaborations - Position based gradients.html
├── 2. Multi color legend
├── Multi Color Legends - Rectangle only.html
├── Two colors
│ ├── Weather radial - Two Color Legend.html
│ └── weatherNY2015.csv
└── Nine colors
│ ├── Weather radial - Multi Color Legend.html
│ └── weatherBejing2015.csv
└── 1. Area chart gradient
├── Area Chart Gradient - One Color.html
└── Area Chart Gradient - Multiple Colors.html
/img/3. Solar system.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nbremer/svggradienttutorial/HEAD/img/3. Solar system.png
--------------------------------------------------------------------------------
/img/1. Area Chart Gradient.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nbremer/svggradienttutorial/HEAD/img/1. Area Chart Gradient.png
--------------------------------------------------------------------------------
/img/3. Solar system - Simple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nbremer/svggradienttutorial/HEAD/img/3. Solar system - Simple.png
--------------------------------------------------------------------------------
/3. Data based gradients/galaxy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nbremer/svggradienttutorial/HEAD/3. Data based gradients/galaxy.jpg
--------------------------------------------------------------------------------
/img/2. Multi Color Legend - Simple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nbremer/svggradienttutorial/HEAD/img/2. Multi Color Legend - Simple.png
--------------------------------------------------------------------------------
/img/2. Multi Color Legend - Weather.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nbremer/svggradienttutorial/HEAD/img/2. Multi Color Legend - Weather.png
--------------------------------------------------------------------------------
/img/1. Area Chart Gradient - Multiple Colors.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nbremer/svggradienttutorial/HEAD/img/1. Area Chart Gradient - Multiple Colors.png
--------------------------------------------------------------------------------
/img/4. Position and Data Based Gradient - Avengers Collaborations.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nbremer/svggradienttutorial/HEAD/img/4. Position and Data Based Gradient - Avengers Collaborations.png
--------------------------------------------------------------------------------
/3. Data based gradients/Solar System Gradient - Simple.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #Boost D3.js Charts with SVG Gradients
2 | ##### The GitHub repo containing the code for the NET magazine tutorial
3 |
4 | In this repo you can find all of the code that I discuss in my article for NET magazine, and a bit more. You'll find the code that created the images. In some cases I've also added a simpler version that strips it down to the basics of adding an SVG gradient without the extra's I added to create a visually more interesting data visualization. The NET tutorial contained 4 sections and the folders in this repo are ordered in the same way
5 |
6 | ###Part 1: Linear Gradients
7 | In this folder you can find the first and simplest example, found in the "Linear Gradients" section in which I explain how to add an SVG gradient to a line chart to make it more noticeable.
8 |
9 | 
10 |
11 | I've added one extra example that uses more than two colors.
12 |
13 | 
14 |
15 | ###Part 2: A Smooth Legend
16 | These are the examples from the section "A Smooth Legend" explaining how you can create a simple legend by filling an SVG rectangle with a gradient. In the original example I added two small data visualizations about the min, max and average temperature in New York and Beijing (recreated after the wonderful work of [weather-radials.com](http://www.weather-radials.com)) to serve as the chart that the SVG gradient legend refers to.
17 |
18 | 
19 |
20 | But in essence it all came down to the two rectangles, so there is also a code version showing how to create only the two rectangles with D3.
21 |
22 | 
23 |
24 | ### Part 3: Data-Based Gradients
25 | Taken from the section "Data-Based gradients" in which we recreated part of my Exoplanets data visualization [nbremer.github.io/exoplanets](nbremer.github.io/exoplanets), but using our own Solar system planets to see how you can use values from a dataset to create a unique gradient for each data point.
26 |
27 | 
28 |
29 | And a stripped down version with only the circles on a row, made to look more like spheres by applying a radial gradient, where the subtleties come from the color per planet as defined in the dataset.
30 |
31 | 
32 |
33 | ### Part 4: Playing with Orientations
34 | The last section "Playing with the Orientations" expands on the 3rd section, but in this case the orientations of the linear gradients are based on the data as well. Only one version in this folder, the Chord diagram that shows how often the Avengers have collaborated in the MCU movies (up until Thor: Ragnarok).
35 |
36 | 
--------------------------------------------------------------------------------
/4. Orientation based gradients/d3.layout.chord.sort.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////////////////
2 | //////////// Custom Chord Layout Function //////////////////
3 | /////// Places the Chords in the visually best order ///////
4 | ///////////////// to reduce overlap ////////////////////////
5 | ////////////////////////////////////////////////////////////
6 | //////// Slightly adjusted by Nadieh Bremer ////////////////
7 | //////////////// VisualCinnamon.com ////////////////////////
8 | ////////////////////////////////////////////////////////////
9 | ////// Original from the d3.layout.chord() function ////////
10 | ///////////////// from the d3.js library ///////////////////
11 | //////////////// Created by Mike Bostock ///////////////////
12 | ////////////////////////////////////////////////////////////
13 |
14 | customChordLayout = function() {
15 | var ε = 1e-6, ε2 = ε * ε, π = Math.PI, τ = 2 * π, τε = τ - ε, halfπ = π / 2, d3_radians = π / 180, d3_degrees = 180 / π;
16 | var chord = {}, chords, groups, matrix, n, padding = 0, sortGroups, sortSubgroups, sortChords;
17 | function relayout() {
18 | var subgroups = {}, groupSums = [], groupIndex = d3.range(n), subgroupIndex = [], k, x, x0, i, j;
19 | var numSeq;
20 | chords = [];
21 | groups = [];
22 | k = 0, i = -1;
23 |
24 | while (++i < n) {
25 | x = 0, j = -1, numSeq = [];
26 | while (++j < n) {
27 | x += matrix[i][j];
28 | }
29 | groupSums.push(x);
30 | //////////////////////////////////////
31 | ////////////// New part //////////////
32 | //////////////////////////////////////
33 | for(var m = 0; m < n; m++) {
34 | numSeq[m] = (n+(i-1)-m)%6;
35 | }
36 | subgroupIndex.push(numSeq);
37 | //////////////////////////////////////
38 | ////////// End new part /////////////
39 | //////////////////////////////////////
40 | k += x;
41 | }//while
42 |
43 | k = (τ - padding * n) / k;
44 | x = 0, i = -1;
45 | while (++i < n) {
46 | x0 = x, j = -1;
47 | while (++j < n) {
48 | var di = groupIndex[i], dj = subgroupIndex[di][j], v = matrix[di][dj], a0 = x, a1 = x += v * k;
49 | subgroups[di + "-" + dj] = {
50 | index: di,
51 | subindex: dj,
52 | startAngle: a0,
53 | endAngle: a1,
54 | value: v
55 | };
56 | }//while
57 |
58 | groups[di] = {
59 | index: di,
60 | startAngle: x0,
61 | endAngle: x,
62 | value: (x - x0) / k
63 | };
64 | x += padding;
65 | }//while
66 |
67 | i = -1;
68 | while (++i < n) {
69 | j = i - 1;
70 | while (++j < n) {
71 | var source = subgroups[i + "-" + j], target = subgroups[j + "-" + i];
72 | if (source.value || target.value) {
73 | chords.push(source.value < target.value ? {
74 | source: target,
75 | target: source
76 | } : {
77 | source: source,
78 | target: target
79 | });
80 | }//if
81 | }//while
82 | }//while
83 | if (sortChords) resort();
84 | }//function relayout
85 |
86 | function resort() {
87 | chords.sort(function(a, b) {
88 | return sortChords((a.source.value + a.target.value) / 2, (b.source.value + b.target.value) / 2);
89 | });
90 | }
91 | chord.matrix = function(x) {
92 | if (!arguments.length) return matrix;
93 | n = (matrix = x) && matrix.length;
94 | chords = groups = null;
95 | return chord;
96 | };
97 | chord.padding = function(x) {
98 | if (!arguments.length) return padding;
99 | padding = x;
100 | chords = groups = null;
101 | return chord;
102 | };
103 | chord.sortGroups = function(x) {
104 | if (!arguments.length) return sortGroups;
105 | sortGroups = x;
106 | chords = groups = null;
107 | return chord;
108 | };
109 | chord.sortSubgroups = function(x) {
110 | if (!arguments.length) return sortSubgroups;
111 | sortSubgroups = x;
112 | chords = null;
113 | return chord;
114 | };
115 | chord.sortChords = function(x) {
116 | if (!arguments.length) return sortChords;
117 | sortChords = x;
118 | if (chords) resort();
119 | return chord;
120 | };
121 | chord.chords = function() {
122 | if (!chords) relayout();
123 | return chords;
124 | };
125 | chord.groups = function() {
126 | if (!groups) relayout();
127 | return groups;
128 | };
129 | return chord;
130 | };
--------------------------------------------------------------------------------
/2. Multi color legend/Multi Color Legends - Rectangle only.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
172 |
173 |
174 |
--------------------------------------------------------------------------------
/1. Area chart gradient/Area Chart Gradient - One Color.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
199 |
200 |
201 |
--------------------------------------------------------------------------------
/1. Area chart gradient/Area Chart Gradient - Multiple Colors.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
202 |
203 |
204 |
--------------------------------------------------------------------------------
/3. Data based gradients/Solar System Gradient - Sun and orbits.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
176 |
177 |
178 |
--------------------------------------------------------------------------------
/4. Orientation based gradients/Avenger collaborations - Position based gradients- Simple.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Collaborations between MCU Avengers
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
21 |
22 |
23 |
24 |
25 |
26 |
189 |
190 |
191 |
--------------------------------------------------------------------------------
/2. Multi color legend/Two colors/Weather radial - Two Color Legend.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
269 |
270 |
271 |
--------------------------------------------------------------------------------
/2. Multi color legend/Nine colors/Weather radial - Multi Color Legend.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
277 |
278 |
279 |
--------------------------------------------------------------------------------
/2. Multi color legend/Nine colors/weatherBejing2015.csv:
--------------------------------------------------------------------------------
1 | "date","max_temp","mean_temp","min_temp"
2 | "2015-1-1",2,-3,-10
3 | "2015-1-2",5,-1,-7
4 | "2015-1-3",3,-3,-8
5 | "2015-1-4",8,0,-8
6 | "2015-1-5",11,4,-4
7 | "2015-1-6",6,0,-6
8 | "2015-1-7",3,-2,-8
9 | "2015-1-8",5,-3,-11
10 | "2015-1-9",7,0,-7
11 | "2015-1-10",13,1,-10
12 | "2015-1-11",6,1,-3
13 | "2015-1-12",4,-2,-7
14 | "2015-1-13",3,-2,-7
15 | "2015-1-14",1,-3,-7
16 | "2015-1-15",0,-4,-8
17 | "2015-1-16",4,-2,-7
18 | "2015-1-17",3,-2,-7
19 | "2015-1-18",7,2,-3
20 | "2015-1-19",6,-2,-10
21 | "2015-1-20",5,-2,-9
22 | "2015-1-21",7,0,-7
23 | "2015-1-22",6,-3,-11
24 | "2015-1-23",7,-1,-9
25 | "2015-1-24",4,0,-4
26 | "2015-1-25",5,1,-2
27 | "2015-1-26",5,-1,-7
28 | "2015-1-27",1,-6,-11
29 | "2015-1-28",1,-4,-9
30 | "2015-1-29",5,1,-4
31 | "2015-1-30",2,-3,-9
32 | "2015-1-31",4,-2,-8
33 | "2015-2-1",3,-3,-10
34 | "2015-2-2",3,-3,-9
35 | "2015-2-3",8,1,-5
36 | "2015-2-4",7,2,-2
37 | "2015-2-5",9,1,-6
38 | "2015-2-6",11,2,-7
39 | "2015-2-7",6,1,-5
40 | "2015-2-8",1,-6,-12
41 | "2015-2-9",6,-3,-11
42 | "2015-2-10",13,2,-8
43 | "2015-2-11",10,2,-5
44 | "2015-2-12",7,0,-6
45 | "2015-2-13",9,0,-8
46 | "2015-2-14",11,2,-6
47 | "2015-2-15",8,2,-4
48 | "2015-2-16",13,3,-6
49 | "2015-2-17",11,6,1
50 | "2015-2-18",11,4,-2
51 | "2015-2-19",6,1,-3
52 | "2015-2-20",2,1,0
53 | "2015-2-21",5,2,-2
54 | "2015-2-22",4,0,-4
55 | "2015-2-23",6,-1,-7
56 | "2015-2-24",6,0,-5
57 | "2015-2-25",7,2,-2
58 | "2015-2-26",6,0,-6
59 | "2015-2-27",2,-1,-3
60 | "2015-2-28",4,1,-3
61 | "2015-3-1",12,3,-6
62 | "2015-3-2",15,5,-5
63 | "2015-3-3",7,3,-1
64 | "2015-3-4",7,0,-7
65 | "2015-3-5",8,0,-7
66 | "2015-3-6",10,2,-5
67 | "2015-3-7",12,3,-4
68 | "2015-3-8",14,6,-2
69 | "2015-3-9",5,0,-5
70 | "2015-3-10",9,0,-8
71 | "2015-3-11",12,3,-6
72 | "2015-3-12",13,4,-4
73 | "2015-3-13",13,4,-5
74 | "2015-3-14",11,6,1
75 | "2015-3-15",17,7,-3
76 | "2015-3-16",14,10,6
77 | "2015-3-17",17,10,3
78 | "2015-3-18",14,9,4
79 | "2015-3-19",20,10,1
80 | "2015-3-20",21,12,4
81 | "2015-3-21",20,15,10
82 | "2015-3-22",14,10,6
83 | "2015-3-23",19,8,-2
84 | "2015-3-24",16,9,3
85 | "2015-3-25",18,10,2
86 | "2015-3-26",21,12,3
87 | "2015-3-27",21,13,6
88 | "2015-3-28",25,17,9
89 | "2015-3-29",24,14,6
90 | "2015-3-30",23,17,12
91 | "2015-3-31",17,12,7
92 | "2015-4-1",14,9,5
93 | "2015-4-2",14,9,4
94 | "2015-4-3",16,11,6
95 | "2015-4-4",17,12,8
96 | "2015-4-5",18,13,7
97 | "2015-4-6",12,8,4
98 | "2015-4-7",14,7,0
99 | "2015-4-8",15,8,2
100 | "2015-4-9",18,10,2
101 | "2015-4-10",21,13,5
102 | "2015-4-11",19,14,8
103 | "2015-4-12",11,8,5
104 | "2015-4-13",19,12,5
105 | "2015-4-14",26,14,4
106 | "2015-4-15",25,17,8
107 | "2015-4-16",22,16,11
108 | "2015-4-17",26,16,6
109 | "2015-4-18",22,18,14
110 | "2015-4-19",22,16,11
111 | "2015-4-20",23,14,5
112 | "2015-4-21",27,17,8
113 | "2015-4-22",26,16,7
114 | "2015-4-23",30,20,11
115 | "2015-4-24",27,17,7
116 | "2015-4-25",32,20,9
117 | "2015-4-26",31,21,12
118 | "2015-4-27",28,22,17
119 | "2015-4-28",26,21,16
120 | "2015-4-29",27,20,14
121 | "2015-4-30",30,23,16
122 | "2015-5-1",26,20,14
123 | "2015-5-2",24,18,13
124 | "2015-5-3",25,19,13
125 | "2015-5-4",24,16,8
126 | "2015-5-5",29,19,10
127 | "2015-5-6",22,18,14
128 | "2015-5-7",27,18,9
129 | "2015-5-8",25,18,11
130 | "2015-5-9",16,13,11
131 | "2015-5-10",12,11,9
132 | "2015-5-11",20,14,9
133 | "2015-5-12",28,19,11
134 | "2015-5-13",32,21,10
135 | "2015-5-14",27,22,17
136 | "2015-5-15",26,21,16
137 | "2015-5-16",30,20,11
138 | "2015-5-17",27,22,18
139 | "2015-5-18",28,23,18
140 | "2015-5-19",27,19,12
141 | "2015-5-20",30,21,12
142 | "2015-5-21",30,21,13
143 | "2015-5-22",30,21,12
144 | "2015-5-23",32,23,15
145 | "2015-5-24",33,26,18
146 | "2015-5-25",34,27,19
147 | "2015-5-26",35,28,21
148 | "2015-5-27",32,26,20
149 | "2015-5-28",31,26,20
150 | "2015-5-29",31,26,20
151 | "2015-5-30",31,23,15
152 | "2015-5-31",34,26,17
153 | "2015-6-1",33,28,23
154 | "2015-6-2",35,28,21
155 | "2015-6-3",33,24,16
156 | "2015-6-4",27,22,18
157 | "2015-6-5",32,23,15
158 | "2015-6-6",31,24,17
159 | "2015-6-7",30,22,15
160 | "2015-6-8",33,23,14
161 | "2015-6-9",30,24,19
162 | "2015-6-10",24,21,16
163 | "2015-6-11",30,23,16
164 | "2015-6-12",29,23,18
165 | "2015-6-13",29,23,18
166 | "2015-6-14",33,24,17
167 | "2015-6-15",32,26,21
168 | "2015-6-16",34,27,21
169 | "2015-6-17",33,27,20
170 | "2015-6-18",33,26,19
171 | "2015-6-19",27,22,17
172 | "2015-6-20",32,23,16
173 | "2015-6-21",32,26,19
174 | "2015-6-22",32,26,21
175 | "2015-6-23",31,27,22
176 | "2015-6-24",27,24,22
177 | "2015-6-25",27,24,22
178 | "2015-6-26",29,24,21
179 | "2015-6-27",29,25,21
180 | "2015-6-28",32,28,23
181 | "2015-6-29",28,23,19
182 | "2015-6-30",28,23,18
183 | "2015-7-1",33,24,16
184 | "2015-7-2",34,24,16
185 | "2015-7-3",31,24,17
186 | "2015-7-4",27,23,19
187 | "2015-7-5",31,23,17
188 | "2015-7-6",31,24,19
189 | "2015-7-7",33,27,20
190 | "2015-7-8",34,28,22
191 | "2015-7-9",34,28,23
192 | "2015-7-10",33,28,23
193 | "2015-7-11",35,29,23
194 | "2015-7-12",39,31,23
195 | "2015-7-13",40,32,24
196 | "2015-7-14",36,30,24
197 | "2015-7-15",30,27,24
198 | "2015-7-16",28,24,21
199 | "2015-7-17",28,24,21
200 | "2015-7-18",28,24,20
201 | "2015-7-19",28,24,21
202 | "2015-7-20",29,26,22
203 | "2015-7-21",30,26,22
204 | "2015-7-22",31,26,21
205 | "2015-7-23",31,27,22
206 | "2015-7-24",34,28,23
207 | "2015-7-25",34,28,22
208 | "2015-7-26",35,29,24
209 | "2015-7-27",34,28,23
210 | "2015-7-28",31,27,23
211 | "2015-7-29",32,28,24
212 | "2015-7-30",28,24,21
213 | "2015-7-31",30,26,21
214 | "2015-8-1",27,24,23
215 | "2015-8-2",30,27,23
216 | "2015-8-3",29,24,21
217 | "2015-8-4",33,24,17
218 | "2015-8-5",32,26,20
219 | "2015-8-6",31,26,20
220 | "2015-8-7",31,26,20
221 | "2015-8-8",31,24,19
222 | "2015-8-9",35,28,21
223 | "2015-8-10",35,29,23
224 | "2015-8-11",35,30,25
225 | "2015-8-12",36,29,23
226 | "2015-8-13",35,29,23
227 | "2015-8-14",32,28,23
228 | "2015-8-15",35,28,20
229 | "2015-8-16",35,27,19
230 | "2015-8-17",33,28,23
231 | "2015-8-18",31,27,23
232 | "2015-8-19",29,24,21
233 | "2015-8-20",34,27,19
234 | "2015-8-21",33,26,18
235 | "2015-8-22",33,27,21
236 | "2015-8-23",28,24,20
237 | "2015-8-24",29,24,19
238 | "2015-8-25",31,26,20
239 | "2015-8-26",33,27,20
240 | "2015-8-27",32,26,21
241 | "2015-8-28",34,27,19
242 | "2015-8-29",31,24,19
243 | "2015-8-30",24,22,20
244 | "2015-8-31",23,21,19
245 | "2015-9-1",24,21,18
246 | "2015-9-2",32,26,19
247 | "2015-9-3",32,26,19
248 | "2015-9-4",24,21,19
249 | "2015-9-5",20,19,17
250 | "2015-9-6",29,23,17
251 | "2015-9-7",30,23,16
252 | "2015-9-8",27,21,16
253 | "2015-9-9",26,22,19
254 | "2015-9-10",20,17,14
255 | "2015-9-11",24,19,14
256 | "2015-9-12",26,20,15
257 | "2015-9-13",31,21,12
258 | "2015-9-14",26,19,13
259 | "2015-9-15",27,20,13
260 | "2015-9-16",27,20,14
261 | "2015-9-17",28,22,16
262 | "2015-9-18",30,24,17
263 | "2015-9-19",29,21,14
264 | "2015-9-20",28,22,16
265 | "2015-9-21",28,22,16
266 | "2015-9-22",26,21,16
267 | "2015-9-23",27,20,13
268 | "2015-9-24",26,21,16
269 | "2015-9-25",26,19,12
270 | "2015-9-26",27,18,10
271 | "2015-9-27",29,21,13
272 | "2015-9-28",20,17,14
273 | "2015-9-29",17,16,14
274 | "2015-9-30",20,17,13
275 | "2015-10-1",23,17,11
276 | "2015-10-2",27,17,7
277 | "2015-10-3",25,17,8
278 | "2015-10-4",24,18,11
279 | "2015-10-5",25,18,11
280 | "2015-10-6",25,19,13
281 | "2015-10-7",25,20,15
282 | "2015-10-8",20,14,9
283 | "2015-10-9",21,13,5
284 | "2015-10-10",16,12,9
285 | "2015-10-11",22,17,12
286 | "2015-10-12",25,16,6
287 | "2015-10-13",28,17,7
288 | "2015-10-14",22,16,10
289 | "2015-10-15",26,17,9
290 | "2015-10-16",24,17,9
291 | "2015-10-17",22,16,9
292 | "2015-10-18",19,16,12
293 | "2015-10-19",19,13,8
294 | "2015-10-20",14,11,8
295 | "2015-10-21",11,10,9
296 | "2015-10-22",11,9,8
297 | "2015-10-23",19,14,9
298 | "2015-10-24",20,13,7
299 | "2015-10-25",14,10,7
300 | "2015-10-26",16,12,8
301 | "2015-10-27",17,9,2
302 | "2015-10-28",16,8,1
303 | "2015-10-29",13,7,0
304 | "2015-10-30",15,7,-1
305 | "2015-10-31",17,8,0
306 | "2015-11-1",19,9,-1
307 | "2015-11-2",20,10,1
308 | "2015-11-3",19,10,1
309 | "2015-11-4",16,10,4
310 | "2015-11-5",12,7,3
311 | "2015-11-6",4,2,1
312 | "2015-11-7",5,2,0
313 | "2015-11-8",8,4,1
314 | "2015-11-9",7,3,1
315 | "2015-11-10",6,6,5
316 | "2015-11-11",7,6,5
317 | "2015-11-12",8,7,6
318 | "2015-11-13",9,8,6
319 | "2015-11-14",11,8,5
320 | "2015-11-15",13,8,3
321 | "2015-11-16",9,6,3
322 | "2015-11-17",10,5,0
323 | "2015-11-18",5,4,3
324 | "2015-11-19",5,3,1
325 | "2015-11-20",2,1,0
326 | "2015-11-21",2,1,0
327 | "2015-11-22",1,-2,-4
328 | "2015-11-23",0,-3,-6
329 | "2015-11-24",-4,-6,-8
330 | "2015-11-25",-2,-6,-10
331 | "2015-11-26",-2,-7,-12
332 | "2015-11-27",-1,-6,-9
333 | "2015-11-28",1,-2,-4
334 | "2015-11-29",6,1,-5
335 | "2015-11-30",2,-1,-5
336 | "2015-12-1",1,-1,-2
337 | "2015-12-2",5,2,-2
338 | "2015-12-3",2,0,-2
339 | "2015-12-4",7,2,-2
340 | "2015-12-5",9,2,-5
341 | "2015-12-6",6,1,-5
342 | "2015-12-7",5,1,-2
343 | "2015-12-8",2,0,-2
344 | "2015-12-9",5,3,1
345 | "2015-12-10",9,3,-3
346 | "2015-12-11",7,1,-4
347 | "2015-12-12",6,1,-4
348 | "2015-12-13",4,0,-5
349 | "2015-12-14",6,3,0
350 | "2015-12-15",4,1,-2
351 | "2015-12-16",2,-1,-4
352 | "2015-12-17",4,-2,-8
353 | "2015-12-18",7,-1,-8
354 | "2015-12-19",4,-2,-7
355 | "2015-12-20",3,-2,-6
356 | "2015-12-21",6,-1,-7
357 | "2015-12-22",1,-3,-7
358 | "2015-12-23",8,0,-7
359 | "2015-12-24",6,0,-5
360 | "2015-12-25",-2,-4,-6
361 | "2015-12-26",1,-3,-6
362 | "2015-12-27",-3,-6,-9
363 | "2015-12-28",4,-3,-11
364 | "2015-12-29",3,-3,-8
365 | "2015-12-30",7,0,-6
366 | "2015-12-31",4,-2,-8
367 |
--------------------------------------------------------------------------------
/2. Multi color legend/Two colors/weatherNY2015.csv:
--------------------------------------------------------------------------------
1 | "date","max_temp","mean_temp","min_temp"
2 | "2015-1-1",4,1,-3
3 | "2015-1-2",6,4,2
4 | "2015-1-3",6,3,1
5 | "2015-1-4",13,9,5
6 | "2015-1-5",9,2,-6
7 | "2015-1-6",-6,-6,-7
8 | "2015-1-7",-5,-9,-13
9 | "2015-1-8",-6,-9,-13
10 | "2015-1-9",1,-3,-7
11 | "2015-1-10",-5,-7,-9
12 | "2015-1-11",3,-2,-8
13 | "2015-1-12",4,3,2
14 | "2015-1-13",2,-3,-8
15 | "2015-1-14",0,-4,-9
16 | "2015-1-15",2,-1,-4
17 | "2015-1-16",6,0,-7
18 | "2015-1-17",0,-4,-8
19 | "2015-1-18",6,3,-1
20 | "2015-1-19",6,4,2
21 | "2015-1-20",4,2,0
22 | "2015-1-21",2,-1,-4
23 | "2015-1-22",4,2,-1
24 | "2015-1-23",4,1,-2
25 | "2015-1-24",4,2,1
26 | "2015-1-25",6,3,-1
27 | "2015-1-26",-1,-3,-6
28 | "2015-1-27",-1,-4,-7
29 | "2015-1-28",1,-4,-9
30 | "2015-1-29",2,-2,-7
31 | "2015-1-30",3,-2,-7
32 | "2015-1-31",-3,-7,-11
33 | "2015-2-1",2,-2,-7
34 | "2015-2-2",1,-4,-10
35 | "2015-2-3",-3,-7,-11
36 | "2015-2-4",6,1,-4
37 | "2015-2-5",6,-2,-10
38 | "2015-2-6",-3,-7,-11
39 | "2015-2-7",4,1,-4
40 | "2015-2-8",3,1,-2
41 | "2015-2-9",-2,-3,-4
42 | "2015-2-10",4,1,-3
43 | "2015-2-11",1,-2,-6
44 | "2015-2-12",4,-2,-9
45 | "2015-2-13",-6,-9,-13
46 | "2015-2-14",0,-4,-9
47 | "2015-2-15",-4,-9,-16
48 | "2015-2-16",-6,-11,-16
49 | "2015-2-17",-3,-6,-10
50 | "2015-2-18",1,-3,-7
51 | "2015-2-19",-3,-8,-13
52 | "2015-2-20",-7,-12,-17
53 | "2015-2-21",0,-5,-11
54 | "2015-2-22",6,3,0
55 | "2015-2-23",3,-5,-13
56 | "2015-2-24",-4,-10,-16
57 | "2015-2-25",3,-2,-7
58 | "2015-2-26",0,-3,-6
59 | "2015-2-27",-1,-4,-8
60 | "2015-2-28",-2,-6,-11
61 | "2015-3-1",-1,-2,-4
62 | "2015-3-2",4,1,-3
63 | "2015-3-3",3,-1,-6
64 | "2015-3-4",7,4,2
65 | "2015-3-5",4,-1,-7
66 | "2015-3-6",-3,-7,-11
67 | "2015-3-7",3,-2,-8
68 | "2015-3-8",9,6,3
69 | "2015-3-9",12,8,4
70 | "2015-3-10",12,8,4
71 | "2015-3-11",15,11,7
72 | "2015-3-12",8,6,2
73 | "2015-3-13",6,3,-1
74 | "2015-3-14",11,8,4
75 | "2015-3-15",7,4,2
76 | "2015-3-16",11,7,2
77 | "2015-3-17",14,8,1
78 | "2015-3-18",4,1,-2
79 | "2015-3-19",6,2,-2
80 | "2015-3-20",3,1,-2
81 | "2015-3-21",8,3,-2
82 | "2015-3-22",6,2,-2
83 | "2015-3-23",3,-1,-5
84 | "2015-3-24",7,2,-3
85 | "2015-3-25",9,6,1
86 | "2015-3-26",17,11,6
87 | "2015-3-27",8,6,4
88 | "2015-3-28",4,1,-3
89 | "2015-3-29",8,2,-4
90 | "2015-3-30",12,7,2
91 | "2015-3-31",8,5,2
92 | "2015-4-1",11,6,0
93 | "2015-4-2",19,12,5
94 | "2015-4-3",18,17,15
95 | "2015-4-4",16,11,6
96 | "2015-4-5",16,11,6
97 | "2015-4-6",17,12,6
98 | "2015-4-7",17,11,6
99 | "2015-4-8",7,5,3
100 | "2015-4-9",6,4,3
101 | "2015-4-10",13,9,4
102 | "2015-4-11",14,11,7
103 | "2015-4-12",19,13,6
104 | "2015-4-13",20,15,10
105 | "2015-4-14",18,16,13
106 | "2015-4-15",22,17,11
107 | "2015-4-16",18,14,11
108 | "2015-4-17",22,17,13
109 | "2015-4-18",27,21,15
110 | "2015-4-19",18,13,9
111 | "2015-4-20",14,11,8
112 | "2015-4-21",18,15,11
113 | "2015-4-22",21,15,9
114 | "2015-4-23",11,8,5
115 | "2015-4-24",11,8,4
116 | "2015-4-25",17,10,3
117 | "2015-4-26",18,13,8
118 | "2015-4-27",17,13,9
119 | "2015-4-28",22,16,10
120 | "2015-4-29",26,18,10
121 | "2015-4-30",19,14,9
122 | "2015-5-1",17,13,9
123 | "2015-5-2",23,16,9
124 | "2015-5-3",27,19,11
125 | "2015-5-4",29,22,14
126 | "2015-5-5",29,24,19
127 | "2015-5-6",23,19,15
128 | "2015-5-7",27,20,13
129 | "2015-5-8",28,21,13
130 | "2015-5-9",21,18,14
131 | "2015-5-10",28,22,16
132 | "2015-5-11",29,25,21
133 | "2015-5-12",30,24,18
134 | "2015-5-13",21,17,12
135 | "2015-5-14",23,17,10
136 | "2015-5-15",24,18,13
137 | "2015-5-16",24,19,14
138 | "2015-5-17",28,23,18
139 | "2015-5-18",24,20,16
140 | "2015-5-19",27,21,15
141 | "2015-5-20",19,16,12
142 | "2015-5-21",17,14,11
143 | "2015-5-22",23,18,13
144 | "2015-5-23",21,16,9
145 | "2015-5-24",27,21,13
146 | "2015-5-25",29,24,18
147 | "2015-5-26",31,26,19
148 | "2015-5-27",29,26,21
149 | "2015-5-28",29,26,21
150 | "2015-5-29",29,24,18
151 | "2015-5-30",29,24,19
152 | "2015-5-31",31,22,14
153 | "2015-6-1",14,13,11
154 | "2015-6-2",13,12,10
155 | "2015-6-3",21,16,11
156 | "2015-6-4",18,16,12
157 | "2015-6-5",21,17,13
158 | "2015-6-6",24,20,16
159 | "2015-6-7",23,18,13
160 | "2015-6-8",26,22,17
161 | "2015-6-9",28,24,20
162 | "2015-6-10",28,23,18
163 | "2015-6-11",32,27,22
164 | "2015-6-12",31,27,23
165 | "2015-6-13",30,26,22
166 | "2015-6-14",31,25,19
167 | "2015-6-15",28,23,18
168 | "2015-6-16",26,22,18
169 | "2015-6-17",28,23,19
170 | "2015-6-18",22,20,18
171 | "2015-6-19",31,26,20
172 | "2015-6-20",24,21,18
173 | "2015-6-21",31,27,22
174 | "2015-6-22",31,26,21
175 | "2015-6-23",32,28,24
176 | "2015-6-24",29,24,20
177 | "2015-6-25",28,23,18
178 | "2015-6-26",27,24,21
179 | "2015-6-27",22,18,14
180 | "2015-6-28",23,20,17
181 | "2015-6-29",24,21,17
182 | "2015-6-30",28,24,20
183 | "2015-7-1",28,24,21
184 | "2015-7-2",27,24,21
185 | "2015-7-3",28,23,19
186 | "2015-7-4",24,22,21
187 | "2015-7-5",28,24,20
188 | "2015-7-6",28,26,22
189 | "2015-7-7",31,28,24
190 | "2015-7-8",31,28,25
191 | "2015-7-9",26,23,20
192 | "2015-7-10",29,26,22
193 | "2015-7-11",31,26,21
194 | "2015-7-12",32,27,22
195 | "2015-7-13",31,27,23
196 | "2015-7-14",28,26,23
197 | "2015-7-15",27,25,22
198 | "2015-7-16",27,22,18
199 | "2015-7-17",27,23,19
200 | "2015-7-18",29,26,22
201 | "2015-7-19",34,30,26
202 | "2015-7-20",34,31,28
203 | "2015-7-21",32,28,23
204 | "2015-7-22",29,25,21
205 | "2015-7-23",30,25,20
206 | "2015-7-24",31,26,21
207 | "2015-7-25",31,26,21
208 | "2015-7-26",32,28,23
209 | "2015-7-27",30,26,22
210 | "2015-7-28",35,29,24
211 | "2015-7-29",36,31,26
212 | "2015-7-30",31,28,24
213 | "2015-7-31",32,27,22
214 | "2015-8-1",32,28,24
215 | "2015-8-2",32,27,22
216 | "2015-8-3",32,28,24
217 | "2015-8-4",32,26,21
218 | "2015-8-5",31,27,22
219 | "2015-8-6",28,24,19
220 | "2015-8-7",29,25,21
221 | "2015-8-8",28,24,20
222 | "2015-8-9",29,25,20
223 | "2015-8-10",29,25,21
224 | "2015-8-11",27,24,22
225 | "2015-8-12",29,26,22
226 | "2015-8-13",28,24,19
227 | "2015-8-14",31,26,19
228 | "2015-8-15",33,28,23
229 | "2015-8-16",34,29,24
230 | "2015-8-17",35,31,26
231 | "2015-8-18",32,28,23
232 | "2015-8-19",31,28,25
233 | "2015-8-20",30,28,25
234 | "2015-8-21",31,26,22
235 | "2015-8-22",30,26,21
236 | "2015-8-23",29,26,21
237 | "2015-8-24",31,27,23
238 | "2015-8-25",32,28,23
239 | "2015-8-26",29,24,19
240 | "2015-8-27",28,24,19
241 | "2015-8-28",28,23,17
242 | "2015-8-29",31,25,19
243 | "2015-8-30",32,27,22
244 | "2015-8-31",33,29,24
245 | "2015-9-1",32,28,24
246 | "2015-9-2",33,28,23
247 | "2015-9-3",34,29,23
248 | "2015-9-4",29,26,22
249 | "2015-9-5",28,24,19
250 | "2015-9-6",31,24,18
251 | "2015-9-7",33,27,21
252 | "2015-9-8",36,31,24
253 | "2015-9-9",32,28,24
254 | "2015-9-10",26,24,21
255 | "2015-9-11",27,23,19
256 | "2015-9-12",26,23,21
257 | "2015-9-13",27,22,17
258 | "2015-9-14",25,20,15
259 | "2015-9-15",29,23,17
260 | "2015-9-16",31,25,19
261 | "2015-9-17",32,26,20
262 | "2015-9-18",31,26,20
263 | "2015-9-19",28,24,20
264 | "2015-9-20",26,22,18
265 | "2015-9-21",23,19,15
266 | "2015-9-22",22,19,17
267 | "2015-9-23",27,21,15
268 | "2015-9-24",28,22,16
269 | "2015-9-25",24,21,17
270 | "2015-9-26",22,19,16
271 | "2015-9-27",22,18,13
272 | "2015-9-28",26,22,18
273 | "2015-9-29",28,26,22
274 | "2015-9-30",26,21,15
275 | "2015-10-1",18,16,13
276 | "2015-10-2",14,12,9
277 | "2015-10-3",13,11,9
278 | "2015-10-4",17,14,12
279 | "2015-10-5",19,16,11
280 | "2015-10-6",23,17,11
281 | "2015-10-7",23,19,14
282 | "2015-10-8",22,19,15
283 | "2015-10-9",26,21,16
284 | "2015-10-10",18,14,10
285 | "2015-10-11",21,16,12
286 | "2015-10-12",25,19,13
287 | "2015-10-13",22,19,16
288 | "2015-10-14",21,17,14
289 | "2015-10-15",18,14,11
290 | "2015-10-16",18,15,12
291 | "2015-10-17",13,9,6
292 | "2015-10-18",10,7,3
293 | "2015-10-19",12,7,2
294 | "2015-10-20",21,15,9
295 | "2015-10-21",24,19,14
296 | "2015-10-22",24,19,14
297 | "2015-10-23",18,13,7
298 | "2015-10-24",14,9,4
299 | "2015-10-25",20,14,9
300 | "2015-10-26",14,11,8
301 | "2015-10-27",15,11,7
302 | "2015-10-28",21,16,12
303 | "2015-10-29",23,18,14
304 | "2015-10-30",16,13,9
305 | "2015-10-31",13,9,6
306 | "2015-11-1",18,16,12
307 | "2015-11-2",17,15,12
308 | "2015-11-3",22,16,9
309 | "2015-11-4",21,17,13
310 | "2015-11-5",22,18,13
311 | "2015-11-6",23,21,19
312 | "2015-11-7",22,17,12
313 | "2015-11-8",13,11,8
314 | "2015-11-9",15,11,6
315 | "2015-11-10",14,12,11
316 | "2015-11-11",14,12,9
317 | "2015-11-12",16,13,11
318 | "2015-11-13",14,11,8
319 | "2015-11-14",9,8,6
320 | "2015-11-15",14,9,4
321 | "2015-11-16",19,15,11
322 | "2015-11-17",11,8,4
323 | "2015-11-18",14,11,8
324 | "2015-11-19",18,16,14
325 | "2015-11-20",18,13,8
326 | "2015-11-21",12,9,6
327 | "2015-11-22",13,9,6
328 | "2015-11-23",7,4,1
329 | "2015-11-24",8,4,0
330 | "2015-11-25",10,6,2
331 | "2015-11-26",16,11,5
332 | "2015-11-27",18,14,11
333 | "2015-11-28",17,12,6
334 | "2015-11-29",9,6,3
335 | "2015-11-30",7,4,1
336 | "2015-12-1",11,9,7
337 | "2015-12-2",14,11,8
338 | "2015-12-3",13,10,7
339 | "2015-12-4",11,8,6
340 | "2015-12-5",11,8,4
341 | "2015-12-6",12,8,4
342 | "2015-12-7",12,9,6
343 | "2015-12-8",9,7,5
344 | "2015-12-9",13,9,4
345 | "2015-12-10",16,13,11
346 | "2015-12-11",16,13,10
347 | "2015-12-12",19,16,13
348 | "2015-12-13",19,16,13
349 | "2015-12-14",19,16,12
350 | "2015-12-15",20,16,12
351 | "2015-12-16",12,10,8
352 | "2015-12-17",15,13,10
353 | "2015-12-18",14,9,3
354 | "2015-12-19",4,3,2
355 | "2015-12-20",6,4,1
356 | "2015-12-21",13,9,4
357 | "2015-12-22",17,14,12
358 | "2015-12-23",18,14,11
359 | "2015-12-24",22,20,17
360 | "2015-12-25",19,17,14
361 | "2015-12-26",15,12,8
362 | "2015-12-27",16,12,8
363 | "2015-12-28",8,4,1
364 | "2015-12-29",8,4,1
365 | "2015-12-30",9,6,3
366 | "2015-12-31",9,7,6
367 |
--------------------------------------------------------------------------------
/4. Orientation based gradients/Avenger collaborations - Position based gradients.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Collaborations between MCU Avengers
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
21 |
22 |
23 |
24 |
25 |
26 |
218 |
219 |
220 |
--------------------------------------------------------------------------------