Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 1817 lines (1287 sloc) 50.328 kb
91f30bf @artzub wim version 43
authored
1 <script type='text/javascript'
2 src='http://www.visualizing.org/sites/all/modules/custom/seedge_sprint/libs/d3/d3.v2.min.js'></script>
349f079 @artzub wim version 47
authored
3 <!--<script type='text/javascript' src='../../D3/d3.v2.min.js'></script>-->
91f30bf @artzub wim version 43
authored
4
5 <style type="text/css">
6
741aac7 @artzub wim version 60
authored
7
91f30bf @artzub wim version 43
authored
8 body {
9 font-family: Verdana, Arial, Helvetica, sans-serif;
10 font-size: 10px;
11 color: #bbb;
12 }
13
14 a {
15 text-decoration: none;
16 }
17
18 a:active {
19 color: #bbb;
20 }
21
22 a:visited {
23 color: #090;
24 }
25
26 .feature {
27 stroke: #555;
741aac7 @artzub wim version 60
authored
28 stroke-width: .8px;
29 stroke-opacity: 0;
30 fill-opacity: 0;
91f30bf @artzub wim version 43
authored
31 }
32
741aac7 @artzub wim version 60
authored
33 /*
6c3ad3a @artzub wim version 57
authored
34 .axis line, .axis path {
741aac7 @artzub wim version 60
authored
35 }
36 */
37
38 .main-axis path, .main-axis line, .main-axis text {
6c3ad3a @artzub wim version 57
authored
39 fill: none;
40 stroke: #000;
41 shape-rendering: crispEdges;
741aac7 @artzub wim version 60
authored
42 /* stroke: blue; */
43 }
44
45
46 line, .tikkies {
47 fill: none;
48 stroke: #000;
49 stroke-width: .6px;
6c3ad3a @artzub wim version 57
authored
50 }
51
52
741aac7 @artzub wim version 60
authored
53 #middenas {
54 visibility: hidden;
55 z-index: 100;
56 }
57
58 #onderas {
59 visibility: hidden;
60 z-index: 100;
61 }
62
91f30bf @artzub wim version 43
authored
63 circle.node {
64 stroke: black;
65 stroke-width: .3px;
66 }
67
741aac7 @artzub wim version 60
authored
68
91f30bf @artzub wim version 43
authored
69 rect {
70 fill: steelblue;
71 stroke: grey;
72 }
73
74 .grid {
75 fill: none;
76 stroke: #000;
77 stroke-width: .3px;
78 }
79
80 .astxt, .bartxt {
81 font-size: 80%;
82 fill: #999;
83 }
84
85 .stat {
86 font-weight: bold;
87 color: white;
88 }
89
741aac7 @artzub wim version 60
authored
90
91 #dekdiv {
92 position: absolute;
93 top: 0px;
94 left: 0px;
95 width: 100%;
96 height: 110px;
97 margin: 0px;
98 padding: 0px;
99 z-index: 6;
100 }
101
102 #datapoints {
103 z-index: 20;
104 opacity: 1;
105 }
106
107 #header, #subheader, a:hover, #bijbakje, #expchooser, #buttonBar, #pielabelI, #pielabelII, #histolabel_x, #histolabel_y, .stat, .statlabel {
bd84f19 @artzub win version 51
authored
108 text-shadow: .5px -.5px 1px #000;
91f30bf @artzub wim version 43
authored
109 }
110
111 #header {
112 position: absolute;
741aac7 @artzub wim version 60
authored
113 top: 500px;
91f30bf @artzub wim version 43
authored
114 left: 336px;
115 padding: 0px;
116 margin: 0px;
117 font: 36px 'Arial Black', Impact;
118 color: azure;
741aac7 @artzub wim version 60
authored
119 z-index: 10;
91f30bf @artzub wim version 43
authored
120 }
121
122 #subheader {
123 position: absolute;
124 top: 25px;
bd84f19 @artzub win version 51
authored
125 left: 500px;
91f30bf @artzub wim version 43
authored
126 padding: 0px;
127 margin: 0px;
128 font: italic 24px 'Times New Roman';
129 color: #009DDC; /*colors used on http://water.chemistry2011.org/web/iyc: #B5F0FF; #009DDC */
741aac7 @artzub wim version 60
authored
130 z-index: 11;
91f30bf @artzub wim version 43
authored
131 }
132
133 #map {
134 position: absolute;
135 background: #444;
136 top: 0px;
137 left: 0px;
138 }
139
abb8411 @artzub wim version 50
authored
140 #expchooser {
91f30bf @artzub wim version 43
authored
141 position: absolute;
bd84f19 @artzub win version 51
authored
142 top: 18px;
741aac7 @artzub wim version 60
authored
143 left: 80px;
144 z-index: 10;
91f30bf @artzub wim version 43
authored
145 opacity: 0;
146 }
147
abb8411 @artzub wim version 50
authored
148 #experiments {
91f30bf @artzub wim version 43
authored
149 height: 18px;
150 padding: 0px;
abb8411 @artzub wim version 50
authored
151 font-size: 9px;
bd84f19 @artzub win version 51
authored
152 background-color: azure;
91f30bf @artzub wim version 43
authored
153 }
154
741aac7 @artzub wim version 60
authored
155
91f30bf @artzub wim version 43
authored
156 #bijbakje {
157 position: absolute;
741aac7 @artzub wim version 60
authored
158 top: 128px;
159 left: 250px;
91f30bf @artzub wim version 43
authored
160 width: 100px;
161 text-align: right;
162 opacity: 0;
163 }
164
741aac7 @artzub wim version 60
authored
165 /*
91f30bf @artzub wim version 43
authored
166 #schaalbakje {
167 position: absolute;
741aac7 @artzub wim version 60
authored
168 top: 25px;
bd84f19 @artzub win version 51
authored
169 left: 106px;
741aac7 @artzub wim version 60
authored
170 visibility: hidden;
91f30bf @artzub wim version 43
authored
171 }
741aac7 @artzub wim version 60
authored
172 */
bd84f19 @artzub win version 51
authored
173
174 #buttonBar {
175 position: absolute;
741aac7 @artzub wim version 60
authored
176 left: 250px;
bd84f19 @artzub win version 51
authored
177 top: 17px;
741aac7 @artzub wim version 60
authored
178 height: 20px;
179 width: auto;
bd84f19 @artzub win version 51
authored
180 text-align: center;
181 opacity: 0;
741aac7 @artzub wim version 60
authored
182 z-index: 10;
bd84f19 @artzub win version 51
authored
183 }
184
741aac7 @artzub wim version 60
authored
185 #sortbylabel {
bd84f19 @artzub win version 51
authored
186 position: absolute;
741aac7 @artzub wim version 60
authored
187 top: -15px;
188 left: 5px;
189 font-weight: bold;
190 color: lightblue;
191 }
192
193 #experiments, .sorters, div.tooltip {
194 border: .5px solid indigo /*#383838*/ ;
195 border-radius: 4px;
196 -moz-border-radius: 4px;
197 -webkit-border-radius: 4px;
198 box-shadow: 2px 2px 2px #777;
199 -moz-box-shadow: 2px 2px 2px #777;
200 -webkit-box-shadow: 2px 2px 2px #777;
201 }
202
203 .sorters {
204 float: left;
bd84f19 @artzub win version 51
authored
205 top: 0px;
741aac7 @artzub wim version 60
authored
206 width: auto;
207 height: 14px;
208 padding-left: 3px;
209 padding-right: 3px;
210 margin-top: 0px;
211 margin-bottom: 0px;
212 margin-left: 3px;
213 margin-right: 3px;
214 background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
215 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
216 background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
217 color: #fff;
bd84f19 @artzub win version 51
authored
218 text-align: center;
741aac7 @artzub wim version 60
authored
219 }
bd84f19 @artzub win version 51
authored
220
741aac7 @artzub wim version 60
authored
221 /* gradient button
bd84f19 @artzub win version 51
authored
222 font: 10px Helvetica Neue;
223 background-color: #222;
224 background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
225 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
226 background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
227 color: #fff;
228 text-rendering: optimizeLegibility;
229 text-shadow: 0 -1px 1px #222;
230 padding: 6px 10px 6px 10px;
231 border: 0;
232 border-radius: 0;
233 border-bottom: 1px solid #222;
234 margin: 0;
235 -moz-box-shadow: 0 1px 3px #999;
236 -webkit-box-shadow: 0 1px 3px #999;
741aac7 @artzub wim version 60
authored
237 */
bd84f19 @artzub win version 51
authored
238
239
741aac7 @artzub wim version 60
authored
240 .sorters:hover {
bd84f19 @artzub win version 51
authored
241 top: 2px;
242 border: 1px solid black;
243 background-color: lightgrey;
244 color: black;
245 box-shadow: 3px 4px 2px azure;
246 -moz-box-shadow: 3px 4px 2px azure;
247 -webkit-box-shadow: 3px 4px 2px azure;
248 }
249
741aac7 @artzub wim version 60
authored
250
91f30bf @artzub wim version 43
authored
251 #theNumbers {
252 position: absolute;
741aac7 @artzub wim version 60
authored
253 left: 4px;
abb8411 @artzub wim version 50
authored
254 top: 52px;
91f30bf @artzub wim version 43
authored
255 width: 220px;
256 text-align: right;
741aac7 @artzub wim version 60
authored
257 z-index: 10;
bd84f19 @artzub win version 51
authored
258 opacity: 0;
91f30bf @artzub wim version 43
authored
259 }
260
741aac7 @artzub wim version 60
authored
261 #theNumbersBis {
262 position: absolute;
263 left: 242px;
264 top: 52px;
265 width: 220px;
266 text-align: right;
267 z-index: 10;
268 opacity: 0;
269 }
91f30bf @artzub wim version 43
authored
270
271 #pieHole {
272 position: absolute;
741aac7 @artzub wim version 60
authored
273 top: 4px;
274 left: 600px;
91f30bf @artzub wim version 43
authored
275 width: 200px;
abb8411 @artzub wim version 50
authored
276 text-align: center;
741aac7 @artzub wim version 60
authored
277 z-index: 10;
278 opacity: 0;
91f30bf @artzub wim version 43
authored
279 }
280
281 #pieI, #pieII {
282 position: absolute;
abb8411 @artzub wim version 50
authored
283 top: 30px;
284 }
285
286 #pieI {
287 left: 10px;
91f30bf @artzub wim version 43
authored
288 }
289
290 #pieII {
abb8411 @artzub wim version 50
authored
291 left: 84px;
292 }
293
294 #pielabelI, #pielabelII {
295 position: absolute;
296 top: 12px;
297 width: 70px;
298 }
299
300 #pielabelII {
301 left: 75px;
302 }
303
91f30bf @artzub wim version 43
authored
304 #histo {
305 position: absolute;
abb8411 @artzub wim version 50
authored
306 left: 4px;
741aac7 @artzub wim version 60
authored
307 top: 362px;
91f30bf @artzub wim version 43
authored
308 }
309
310 #histolabel_x, #histolabel_y {
311 position: absolute;
312 opacity: 0;
313 }
314
315 #histolabel_y {
316 top: 16px;
317 left: 20px;
318 }
319
320 #histolabel_x {
741aac7 @artzub wim version 60
authored
321 top: 162px;
91f30bf @artzub wim version 43
authored
322 left: 170px;
323 }
324
325 #source {
326 position: absolute;
327 bottom: 6px;
328 left: 390px;
329 color: #999;
330 }
331
332 div.tooltip {
333 position: absolute;
334 width: 200px;
335 height: auto;
336 padding: 6px 2px 6px 2px;
337 text-shadow: .5px .5px 1px dimgrey;
338 /* font: 24px sans-serif; */
339 background: red;
340 color: black;
341 border: solid 1px dimgrey;
342 border-radius: 4px;
343 -webkit-border-radius: 4px;
344 -mozilla-border-radius: 4px;
345 text-align: center;
6c3ad3a @artzub wim version 57
authored
346 z-index: -10;
91f30bf @artzub wim version 43
authored
347 opacity: 0;
348 }
349
350
351 </style>
352
353
354 <div id="map">
355 <div id="source">source: <a href="http://water.chemistry2011.org/web/iyc" target="_blank">The Global Experiment of
356 the International Year of Chemistry</a></div>
357 </div>
358
359
bd84f19 @artzub win version 51
authored
360 <div id="header">World Wide Water Quality
361 <div id="subheader">2011</div>
362 </div>
363
741aac7 @artzub wim version 60
authored
364 <div id="dekdiv">
bd84f19 @artzub win version 51
authored
365
abb8411 @artzub wim version 50
authored
366 <div id="expchooser">
91f30bf @artzub wim version 43
authored
367 <label for="experiments">experiment #</label>
368 <select id="experiments">
e1cab39 @artzub wim version 49
authored
369 <option value="ph_data">1: pH</option>
370 <option value="sa_data">2: salinity</option>
371 <option value="di_data">3: dirt</option>
91f30bf @artzub wim version 43
authored
372 </select>
373 </div>
374
741aac7 @artzub wim version 60
authored
375
bd84f19 @artzub win version 51
authored
376 <div id="bijbakje"></div>
741aac7 @artzub wim version 60
authored
377 <!-- <div id="schaalbakje"></div>-->
378
bd84f19 @artzub win version 51
authored
379
380
381 <div id="buttonBar">
741aac7 @artzub wim version 60
authored
382 <div id="sortbylabel">sort by: </div>
383
384 <div id="sorter" class="sorters">...</div>
385 <div id="tymover" class="sorters">type</div>
386 <div id="scmover" class="sorters">source</div>
387 <div id="tmover" class="sorters">&degC</div>
388 <div id="cmover" class="sorters">country</div>
389 <div id="tomap" class="sorters">map</div>
390 <!-- <div id="mover" class="sorters">raw</div>
391 <div id="nmover" class="sorters"># stud.</div>
392 -->
bd84f19 @artzub win version 51
authored
393
741aac7 @artzub wim version 60
authored
394 </div>
bd84f19 @artzub win version 51
authored
395
396 <div id="theNumbers"></div>
741aac7 @artzub wim version 60
authored
397 <div id="theNumbersBis"></div>
bd84f19 @artzub win version 51
authored
398
91f30bf @artzub wim version 43
authored
399 <div id="pieHole">
400 <div id="pieI"></div>
abb8411 @artzub wim version 50
authored
401 <div id="pielabelI">water type</div>
91f30bf @artzub wim version 43
authored
402 <div id="pieII"></div>
abb8411 @artzub wim version 50
authored
403 <div id="pielabelII">water source</div>
91f30bf @artzub wim version 43
authored
404 </div>
405
741aac7 @artzub wim version 60
authored
406 </div>
407
91f30bf @artzub wim version 43
authored
408 <div id="histo">
409 <div id="histolabel_x">result</div>
410 <div id="histolabel_y">frequency</div>
411 </div>
412
abb8411 @artzub wim version 50
authored
413
91f30bf @artzub wim version 43
authored
414 <script>
415
416
417 /**
418 *Variables and settings
419 **/
420
421 var activeDataset;
422
423 //needed for radius consistency during zooms and for updates
741aac7 @artzub wim version 60
authored
424 var reeks, globalData, globalfirstVar, globalsecondVar, globalfirstVarlabel, globalsecondVarlabel;
349f079 @artzub wim version 47
authored
425
abb8411 @artzub wim version 50
authored
426 var currentWatertype = "",
427 currentWatersource = "";
428
429 var measurementCircles, detailsCircles, highlightTimer, selectedPath = null;
349f079 @artzub wim version 47
authored
430 // timer to keep interaction responsive while highlighting measurement dots
91f30bf @artzub wim version 43
authored
431
432 var margin = {top:0, right:0, bottom:0, left:0},
349f079 @artzub wim version 47
authored
433 width = 1048 - margin.left - margin.right,
434 height = 560 - margin.top - margin.bottom;
91f30bf @artzub wim version 43
authored
435
436
437 var projection = d3.geo.mercator()
349f079 @artzub wim version 47
authored
438 .scale(width)
741aac7 @artzub wim version 60
authored
439 .translate([width / 2.3, height / 1.6]);
91f30bf @artzub wim version 43
authored
440
441
442 var path = d3.geo.path()
349f079 @artzub wim version 47
authored
443 .projection(projection);
91f30bf @artzub wim version 43
authored
444
445 var q = projection.scale();
446
447 var zoom = d3.behavior.zoom()
349f079 @artzub wim version 47
authored
448 .translate(projection.translate())
449 .scale(projection.scale())
450 .scaleExtent([height, 64 * height])
451 .on("zoom", move);
91f30bf @artzub wim version 43
authored
452
453
454 //prelimenary scaling stuff
455 var lowColor,
349f079 @artzub wim version 47
authored
456 midColor,
457 highColor;
91f30bf @artzub wim version 43
authored
458
459 var r = d3.scale.linear();
460 var c = d3.scale.linear();
6c3ad3a @artzub wim version 57
authored
461 var yAs = d3.scale.linear();
741aac7 @artzub wim version 60
authored
462 var xAs = d3.scale.linear();
91f30bf @artzub wim version 43
authored
463
464
741aac7 @artzub wim version 60
authored
465 d3.select("#experiments").property("value", "ph_data");
91f30bf @artzub wim version 43
authored
466
467
468 /**
469 *Draw map
470 **/
471 var svg = d3.select("#map")
349f079 @artzub wim version 47
authored
472 .append("svg")
473 .attr("width", width + margin.left + margin.right)
474 .attr("height", height + margin.top + margin.bottom)
475 .append("g")
476 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
477 .call(zoom);
91f30bf @artzub wim version 43
authored
478
479
480 var g = svg.append("g"),
349f079 @artzub wim version 47
authored
481 feature = g.selectAll(".feature")
91f30bf @artzub wim version 43
authored
482
483
6c3ad3a @artzub wim version 57
authored
484 svg.append("g").attr("id", "datapoints");
741aac7 @artzub wim version 60
authored
485
486
487
488 var timings = { featureIn: 250,
489 rondjesInOutdelay: 250, rondjesInOut: 1000,
490
491 gradientInOut: 100,
492
493
494 histoOut: 100,
495 histoBarsIndelay: 1250, histoBarsIn: 250,
496 histoAssenIndelay: 1500, histoAssenIn: 250,
497 histoBarsTextIndelay: 2000, histoBarsTextIn: 250,
498 histoLabelsIndelay: 2250, histoLabelsIn: 250,
499
500 pieOut: 100, //not used
501
502 controlsInDelay: 2500, controlsIn: 250,
503
504 featureInOut: 1000,
505
506 // duckdivIn: 500,
507
508 yAsInOutDelay: 500, yAsInOut: 250,
509
510 barsliceInOut: 250,
511
512 tooltipInOut: 250,
513
514 overpathInOut: 250,
515
516 ripplerDelay1: 250,
517 ripplerDelay2: 500,
518 ripplerDelay3: 750,
519 ripplerDelay: 1000, rippler: 50
520 };
91f30bf @artzub wim version 43
authored
521
ed28f19 @artzub wim version 52
authored
522
91f30bf @artzub wim version 43
authored
523 /**
524 * setup color key holder and gradient
525 **/
741aac7 @artzub wim version 60
authored
526 /*
91f30bf @artzub wim version 43
authored
527 var w = 100,
bd84f19 @artzub win version 51
authored
528 h = 6;
91f30bf @artzub wim version 43
authored
529
530 var bakje = d3.select("#schaalbakje")
349f079 @artzub wim version 47
authored
531 .append("svg")
532 .attr("width", w)
533 .attr("height", h)
534 .append("svg:g");
91f30bf @artzub wim version 43
authored
535
bd84f19 @artzub win version 51
authored
536
537
91f30bf @artzub wim version 43
authored
538 var gradient = bakje.append("svg:defs")
349f079 @artzub wim version 47
authored
539 .append("svg:linearGradient")
540 .attr("id", "gradient")
541 .attr("x1", "0%")
542 .attr("y1", "0%")
543 .attr("x2", "100%")
544 .attr("y2", "0%")
545 .attr("spreadMethod", "pad");
91f30bf @artzub wim version 43
authored
546
741aac7 @artzub wim version 60
authored
547 */
91f30bf @artzub wim version 43
authored
548
549 //pie scales and sizes
550 var wpie = 50,
551 hpie = 50,
552 rpie = Math.min(wpie, hpie) / 2,
349f079 @artzub wim version 47
authored
553 typecolor = d3.scale.ordinal()
554 .range(["deepskyblue", "aquamarine", "lightgrey"]),
555 sourcecolor = d3.scale.ordinal()
556 .range(["#7B86EF", "#6371ED", "#4E5EEA", "#283BE6", "#1A2DDA", "#1729C5", "#13219F", "#0D176D", "lightgrey"]);
91f30bf @artzub wim version 43
authored
557
558
559
560 /**
561 * setup histogram
562 **/
563
564 var histw = 160,
741aac7 @artzub wim version 60
authored
565 histh = 120,
349f079 @artzub wim version 47
authored
566 histpad = 60;
91f30bf @artzub wim version 43
authored
567
568 var his = d3.select("#histo")
349f079 @artzub wim version 47
authored
569 .append("svg")
570 .attr("width", histw + histpad)
571 .attr("height", histh + histpad)
572 .append("svg:g")
573 .attr("transform", "translate(40,40)");
91f30bf @artzub wim version 43
authored
574
575
576 /**
577 *
578 */
579
580 var lastData = null;
581 var maxt = 1,
349f079 @artzub wim version 47
authored
582 mint = 0,
583 mt = 0;
91f30bf @artzub wim version 43
authored
584
585
349f079 @artzub wim version 47
authored
586 function isExists(obj) { return typeof(obj) != 'undefined' && obj != null };
587
91f30bf @artzub wim version 43
authored
588
589 var replaceCountry = {
abb8411 @artzub wim version 50
authored
590 "Russian Federation":"Russia", "Tuninsia":"Tunisia", "United State of America":"United States of America", "United States":"United States of America", "USA":"United States of America", "US":"United States of America", /*"Georgia":"United States of America" // ???!!!,*/ "Hong Kong":"China", "UK":"United Kingdom", "uk":"United Kingdom", "España":"Spain", "SLOVAKIA":"Slovakia", "Slovákia":"Slovakia", "Slovensko":"Slovakia", "Türkiye":"Turkey", "turkey":"Turkey", "Serbia":"Republic of Serbia", "Bosna i Hercegovina":"Bosnia and Herzegovina", "Scotland":"United Kingdom"
91f30bf @artzub wim version 43
authored
591 }
592
593 /** Correct names of countries
594
595 Afghanistan, Angola, Albania, United Arab Emirates, Argentina,
596 Armenia, Antarctica, French Southern and Antarctic Lands,
597 Australia, Austria, Azerbaijan, Burundi, Belgium, Benin,
598 Burkina Faso, Bangladesh, Bulgaria, The Bahamas, Bosnia and Herzegovina
599 Belarus, Belize, Bolivia, Brazil, Brunei, Bhutan, Botswana,
600 Central African Republic, Canada, Switzerland, Chile, China,
601 Ivory Coast, Cameroon, Democratic Republic of the Congo, Republic of the Congo, Colombia,
602 Costa Rica, Cuba, Northern Cyprus, Cyprus, Czech Republic, Germany, Djibouti, Denmark, Dominican Republic
603 Algeria, Ecuador, Egypt, Eritrea, Spain, Estonia, Ethiopia, Finland, Fiji, Falkland Islands, France, Gabon
604 United Kingdom, Georgia, Ghana, Guinea, Gambia, Guinea Bissau, Equatorial Guinea, Greece, Greenland, Guatemala
605 Guyana, Honduras, Croatia, Haiti, Hungary, Indonesia, India, Ireland, Iran, Iraq, Iceland, Israel, Italy
606 Jamaica, Jordan, Japan, Kazakhstan, Kenya, Kyrgyzstan, Cambodia, South Korea, Kosovo, Kuwait, Laos, Lebanon
607 Liberia, Libya, Sri Lanka, Lesotho, Lithuania, Luxembourg, Latvia, Morocco, Moldova, Madagascar, Mexico,
608 Macedonia, Mali, Myanmar, Montenegro, Mongolia, Mozambique, Mauritania, Malawi, Malaysia, Namibia,
609 New Caledonia, Niger, Nigeria, Nicaragua, Netherlands, Norway, Nepal, New Zealand, Oman,
610 Pakistan, Panama, Peru, Philippines, Papua New Guinea, Poland, Puerto Rico, North Korea,
611 Portugal, Paraguay, Qatar, Romania, Russia, Rwanda, Western Sahara, Saudi Arabia, Sudan
612 South Sudan, Senegal, Solomon Islands, Sierra Leone, El Salvador, Somaliland, Somalia
613 Republic of Serbia, Suriname, Slovakia, Slovenia, Sweden, Swaziland, Syria, Chad,
614 Togo, Thailand, Tajikistan, Turkmenistan, East Timor, Trinidad and Tobago,
615 Tunisia, Turkey, Taiwan, United Republic of Tanzania, Uganda, Ukraine, Uruguay,
616 United States of America, Uzbekistan, Venezuela, Vietnam, Vanuatu, West Bank,
617 Yemen, South Africa, Zambia, Zimbabwe
618
619 **/
620
621 /* If only the UNESCO had used the official UN abreviations... ;) */
622
623 function initMap(data) {
624 lastData = {};
625 for (var i = 0; i < data.length; i++) {
626 var d = data[i];
627 var ccn = replaceCountry[d.country] || d.country;
628
629 if (!isExists(lastData[ccn]))
630 lastData[ccn] = [];
631
abb8411 @artzub wim version 50
authored
632 if (globalfirstVar == "ph" && d[globalfirstVar] < 5) continue;
633
634 if (globalfirstVar == "sanity" && d[globalfirstVar] >= 24) continue;
91f30bf @artzub wim version 43
authored
635
349f079 @artzub wim version 47
authored
636 if (globalfirstVar == "dropsofbleach" && d[globalfirstVar] >= 799) continue;
91f30bf @artzub wim version 43
authored
637
638 lastData[ccn].push(d);
639 }
640 }
641
abb8411 @artzub wim version 50
authored
642
91f30bf @artzub wim version 43
authored
643 /**
bd84f19 @artzub win version 51
authored
644 *Draw map
645 **/
6c3ad3a @artzub wim version 57
authored
646 //d3.json("world-countries.json", function(collection) {
91f30bf @artzub wim version 43
authored
647 d3.json("/sites/default/files/sprint/data/world-countries.json", function (collection) {
648
649 feature = feature
349f079 @artzub wim version 47
authored
650 .data(collection.features)
651 .enter().append("path")
652 .attr("class", "feature")
653 .attr("d", path)
654 .attr('fill', '#222')
655 .on("mouseover", overpath)
656 .on("mousemove", moverpath)
6c3ad3a @artzub wim version 57
authored
657 .on("click", clickPath)
741aac7 @artzub wim version 60
authored
658 .on("mouseout", outpath)
659
660 .transition()
661 .duration(timings.featureIn)
662 .style("fill-opacity", 1)
663 .style("stroke-opacity", 1);
abb8411 @artzub wim version 50
authored
664
665 updateDataset();
666
91f30bf @artzub wim version 43
authored
667 });
668
669
670 function updateDataset() {
671
741aac7 @artzub wim version 60
authored
672
673 d3.selectAll("#middenas, #onderas, #bijbakje")
674 .transition()
675 .duration(timings.yAsInOut)
676 .style("visibility", "hidden")
677 .style("z-index", -10);
678
679
680 d3.selectAll(".feature")
681 .transition()
682 .duration(timings.featureInOut)
683 .style("fill-opacity", 1)
684 .style("stroke-opacity", 1);
685
686 /*
687 d3.selectAll("#duckdiv")
688 .transition()
689 .duration(timings.yAsInOut)
690 .style("top", "0px")
691 .style("left", "0px")
692 .style("width", "100%")
693 .style("height", "560px")
694 .style("opacity", 1e-6)
695 .style("z-index", -10);
696
697 */
91f30bf @artzub wim version 43
authored
698 var picker = d3.select("#experiments").property("value");
699
700 if (activeDataset == picker) return;
701
702 else
703
704 activeDataset = picker;
705
e1cab39 @artzub wim version 49
authored
706 if (picker == "ph_data") {
349f079 @artzub wim version 47
authored
707 swap_to_Exp("red", "green", "blue", "pH", "ph", "temperature (in \u00b0C)", "temperature");
91f30bf @artzub wim version 43
authored
708 }
abb8411 @artzub wim version 50
authored
709
91f30bf @artzub wim version 43
authored
710 else
711
e1cab39 @artzub wim version 49
authored
712 if (picker == "sa_data") {
349f079 @artzub wim version 47
authored
713 swap_to_Exp("green", "greenyellow", "white", "salinity", "sanity", "salinity by weight", "sanitybyweight");
91f30bf @artzub wim version 43
authored
714 }
715
716 else
717
e1cab39 @artzub wim version 49
authored
718 if (picker == "di_data") {
349f079 @artzub wim version 47
authored
719 swap_to_Exp("green", "orange", "red", "drops of bleach", "dropsofbleach", "temperature (in \u00b0C)", "temperature");
91f30bf @artzub wim version 43
authored
720 }
349f079 @artzub wim version 47
authored
721
91f30bf @artzub wim version 43
authored
722 // else
723 // if (picker == "gwe_experiment4_v1") { swap_to_Exp(); }
724
abb8411 @artzub wim version 50
authored
725 //the still efficiency dataset only has one variable that has to be plotted - how can this be made to fit the experiment changer routine?
726
727 //actually the still experiment is somewhat different from the other three, which are all related to water quality
728 //the still experiment should have a graph of its own!!!
729
730
731 //another actually: actually the three 'experiments' are not experiments at all, they are measurements
732
e1cab39 @artzub wim version 49
authored
733 };
91f30bf @artzub wim version 43
authored
734
735
6c3ad3a @artzub wim version 57
authored
736 function swap_to_Exp(lowColor, midColor, highColor, firstVarlabel, firstVar, secondVarlabel, secondVar) {
91f30bf @artzub wim version 43
authored
737
741aac7 @artzub wim version 60
authored
738
739
740
abb8411 @artzub wim version 50
authored
741 /**
742 * Load data from JSONs and draw visualization
743 **/
744
6c3ad3a @artzub wim version 57
authored
745 //d3.json("gwe_experiment1_v1.json", function(ph_data) {
abb8411 @artzub wim version 50
authored
746
6c3ad3a @artzub wim version 57
authored
747 //d3.json("gwe_experiment2_v1.json", function(sa_data) {
abb8411 @artzub wim version 50
authored
748
6c3ad3a @artzub wim version 57
authored
749 //d3.json("gwe_experiment3_v1.json", function(di_data) {
abb8411 @artzub wim version 50
authored
750
e1cab39 @artzub wim version 49
authored
751 d3.json("/sites/default/files/sprint/data/gwe_experiment1_v1.json", function(ph_data) {
752
753 d3.json("/sites/default/files/sprint/data/gwe_experiment2_v1.json", function(sa_data) {
754
755 d3.json("/sites/default/files/sprint/data/gwe_experiment3_v1.json", function(di_data) {
abb8411 @artzub wim version 50
authored
756
757
e1cab39 @artzub wim version 49
authored
758
759
abb8411 @artzub wim version 50
authored
760 //////////////////////////////////////////////////////////
761 ///please note the data filters to take out outliers!!!///
762 //////////////////////////////////////////////////////////
763
91f30bf @artzub wim version 43
authored
764
abb8411 @artzub wim version 50
authored
765 //filter out one unlikely outlier
766 if (firstVar == "ph") { data = ph_data.filter(function (d) { return d[firstVar] >= 5; }); }
767
768 //reason to take out this measurement:
769
770 //{"city":"Nanticoke","coordinates":[-75.903898,38.274504],"country":"United States","natureofthewater":"fresh","numberofstudents":17,"ph":3.68,"school":"Luzerne County Community College","sourceofwater":"Lackawanna River","teacher":"Lewis","temperature":20,"waterType":"fresh","waterSource":"stream, river, canal"}
771
772 //this one measurement has a weirdly low value for ph, it is a rather extreme outlier - it is out of the dataset for now (filtered).
773 //is it legit to take it out? someone should ask the school about this.
774
775
776 //filter out two specific data entry errors / this is done by filtering on salinity by weight, this is the 'secondVar'!
ed28f19 @artzub wim version 52
authored
777 if (firstVar == "sanity") { data = sa_data.filter(function (d) { return d[secondVar] < 24; }); }
abb8411 @artzub wim version 50
authored
778
779 //resason to take out these two measurements:
780 //{"city":"Milano","coordinates":[9.18103,45.468945],"country":"Italy","natureofthewater":"fresh","numberofstudents":19,"sanity":0.24,"sanitybyweight":24,"school":"Facoltà di Agraria-Università degli studi di Milano","sourceofwater":"Casalmaiocco (LO), tapwater","teacher":"Gigliola","waterType":"fresh","waterSource":"tap"},
781 //{"city":"Milano","coordinates":[9.18103,45.468945],"country":"Italy","natureofthewater":"fresh","numberofstudents":19,"salinity":0.62,"salinitybyweight":62,"school":"Facoltà di Agraria-Università degli Studi di Milano","sourceofwater":"Milano, tap water","teacher":"Leonardo","waterType":"fresh","waterSource":"tap"}
782
783 //this school seems to have accidentally swapped salinity and salinity by weight - I changed it around, but this has to be checked though!!!
784
785
786 //another note: this dataset still speaks of sanity instead of salinity - this should be corrected!
787
788
789
790 //filter out one highly unlikely outlier
e1cab39 @artzub wim version 49
authored
791 if (firstVar == "dropsofbleach") { data = di_data.filter(function (d) { return d[firstVar] < 799; }); }
792
abb8411 @artzub wim version 50
authored
793 //reason to take out this measurement:
794
795 //{"city":"Tumon","coordinates":[144.799072,13.50454],"country":"United States","dropsofbleach":799,"natureofthewater":"Fresh","numberofstudents":7,"school":"St. Johns School of Guam","sourceofwater":"Tap","teacher":"Hieter","temperature":26,"waterType":"fresh","waterSource":"tap"},
796
797 //they mention 799 drops of bleach?! This seems unrealistically high. Probably some error.
798
799
800 //note: it is also possible to leave in the outliers, and have the user filter them out interactively
801 //better not probably
802
803
741aac7 @artzub wim version 60
authored
804
abb8411 @artzub wim version 50
authored
805 globalfirstVar = firstVar;
806 globalsecondVar = secondVar;
807 globalfirstVarlabel = firstVarlabel;
808 globalsecondVarlabel = secondVarlabel;
809 globalData = data;
810
5ebe7a8 @artzub win version 52
authored
811 data.forEach(function(d) { return d.backoordinates = d.coordinates; });
812
6c3ad3a @artzub wim version 57
authored
813 initMap(data);
91f30bf @artzub wim version 43
authored
814
815
6c3ad3a @artzub wim version 57
authored
816 gemfirstVar = d3.round(d3.mean(data, function (d) { return d[firstVar]; }), 2);
817 gemsecondVar = d3.round(d3.mean(data, function (d) { return d[secondVar]; }), 2);
91f30bf @artzub wim version 43
authored
818
6c3ad3a @artzub wim version 57
authored
819 reeks = data.map(function (d) { return d[firstVar]; });
91f30bf @artzub wim version 43
authored
820
6c3ad3a @artzub wim version 57
authored
821 // scale for temperature to radius
822 r.domain(d3.extent(data.map(function (d) { return d[secondVar]; })))
823 .range([1 * (q / width), 6 * (q / width)]);
91f30bf @artzub wim version 43
authored
824
825
6c3ad3a @artzub wim version 57
authored
826 // scale for ph to color
827 c.domain([d3.min(data, function (d) { return d[firstVar]; }), gemfirstVar, d3.max(data, function (d) { return d[firstVar];
741aac7 @artzub wim version 60
authored
828 })])
829 .range([lowColor, midColor, highColor]);
830
ed28f19 @artzub wim version 52
authored
831
741aac7 @artzub wim version 60
authored
832 xAs.domain([0, data.length-1]).range([0, 650]);
833
6c3ad3a @artzub wim version 57
authored
834 yAs.domain([d3.min(data, function (d) { return d[firstVar]; }), d3.max(data, function (d) { return d[firstVar];
741aac7 @artzub wim version 60
authored
835 })]).range([355,0]);
6c3ad3a @artzub wim version 57
authored
836
abb8411 @artzub wim version 50
authored
837 // refill circles
741aac7 @artzub wim version 60
authored
838
839
840 d3.select("#sorter").html(firstVarlabel);
6c3ad3a @artzub wim version 57
authored
841
741aac7 @artzub wim version 60
authored
842
843 rondjes = svg.select("#datapoints").selectAll("circle")
6c3ad3a @artzub wim version 57
authored
844 .data(data, function(d) { return d.coordinates; })
e1cab39 @artzub wim version 49
authored
845
846 rondjes.enter().append("circle")
847 .attr('class', 'measurementCircle')
741aac7 @artzub wim version 60
authored
848 .style("fill", function (d) { return c(d[firstVar]); })
849 .style("stroke", function (d) { return d3.rgb(c(d[firstVar])).darker(); })
850 .attr("r", 0)
851 // .style("fill", "#aaa")
e1cab39 @artzub wim version 49
authored
852 .attr("transform", function (d) { return "translate(" + projection(d.coordinates) + ")"; })
853 .on("mouseover", tooltipper)
854 .on("mousemove", toolmover)
855 .on("mouseout", tooltapper)
856 .on("click", ripple)
857 // .attr("visibility", "visible")
741aac7 @artzub wim version 60
authored
858
e1cab39 @artzub wim version 49
authored
859 .transition()
741aac7 @artzub wim version 60
authored
860 .delay(timings.rondjesIndelay)
861 .duration(timings.rondjesInOut)
862 .attr("r", function (d) { return r(d[secondVar]); });
863 /*
abb8411 @artzub wim version 50
authored
864 .style("fill", function (d) { return c(d[firstVar]); })
865 .style("stroke", function (d) { return d3.rgb(c(d[firstVar])).darker(); })
e1cab39 @artzub wim version 49
authored
866
741aac7 @artzub wim version 60
authored
867
868 rondjes.append("text")
869 // .attr("y", function (d) { return deth - y(d); })
870 .style("fill", "#444")
871 .style("font-size", "8px")
872 .text(function (d) { return d.school; })
873 .attr("transform", "translate("+ 5 + "," + 300 + ")rotate(-90)");
874 */
e1cab39 @artzub wim version 49
authored
875
876 rondjes.transition()
741aac7 @artzub wim version 60
authored
877 .delay(timings.rondjesInOutdelay)
878 .duration(timings.rondjesInOut)
abb8411 @artzub wim version 50
authored
879 .style("fill", function (d) { return c(d[firstVar]); })
880 .style("stroke", function (d) { return d3.rgb(c(d[firstVar])).darker(); })
741aac7 @artzub wim version 60
authored
881 .attr("r", function (d) { return r(d[secondVar]); })
882 .attr("transform", function (d) { return "translate(" + projection(d.coordinates) + ")"; });
6c3ad3a @artzub wim version 57
authored
883
e1cab39 @artzub wim version 49
authored
884
885 rondjes.exit()
886 .transition()
741aac7 @artzub wim version 60
authored
887 .delay(timings.rondjesInOutdelay)
888 .duration(timings.rondjesInOut)
e1cab39 @artzub wim version 49
authored
889 .attr("r", 0)
abb8411 @artzub wim version 50
authored
890 .style("fill", "#aaa")
e1cab39 @artzub wim version 49
authored
891 .remove();
892
741aac7 @artzub wim version 60
authored
893 // console.log(rondjes);
894
abb8411 @artzub wim version 50
authored
895
91f30bf @artzub wim version 43
authored
896
897 //gather data for pies
898 // this can also be done with d3.nest to extract the variables and their lenghts, but that messes up the order of the watertypes and sources
899
900 types = [];
901 sources = [];
902
903 types.push({ "type": "fresh", "size": data.filter(function(d) { return d.waterType == "fresh"; }).length });
904 types.push({ "type": "salt", "size": data.filter(function(d) { return d.waterType == "salt"; }).length });
905 types.push({ "type": "unknown", "size": data.filter(function(d) { return d.waterType == "unknown"; }).length });
906
907 sources.push({ "source": "tap", "size": data.filter(function(d) { return d.waterSource == "tap"; }).length });
908 sources.push({ "source": "drinking supply", "size": data.filter(function(d) { return d.waterSource == "drinking supply"; }).length });
909 sources.push({ "source": "ground", "size": data.filter(function(d) { return d.waterSource == "ground"; }).length });
910 sources.push({ "source": "rain", "size": data.filter(function(d) { return d.waterSource == "rain"; }).length });
911 sources.push({ "source": "stream, river, canal", "size": data.filter(function(d) { return d.waterSource == "stream, river, canal"; }).length });
912 sources.push({ "source": "pond, lake, pool", "size": data.filter(function(d) { return d.waterSource == "pond, lake, pool"; }).length });
913 sources.push({ "source": "ocean", "size": data.filter(function(d) { return d.waterSource == "ocean"; }).length });
914 sources.push({ "source": "waste water", "size": data.filter(function(d) { return d.waterSource == "waste water"; }).length });
915 sources.push({ "source": "unknown", "size": data.filter(function(d) { return d.waterSource == "unknown"; }).length });
916
917
349f079 @artzub wim version 47
authored
918 donut = d3.layout.pie()
919 .sort(null)
920 .value(function(d) { return d.size; });
91f30bf @artzub wim version 43
authored
921
922 arc = d3.svg.arc().outerRadius(rpie);
923
924
741aac7 @artzub wim version 60
authored
925
6c3ad3a @artzub wim version 57
authored
926 doHistogram();
927
91f30bf @artzub wim version 43
authored
928
6c3ad3a @artzub wim version 57
authored
929
741aac7 @artzub wim version 60
authored
930 var xAxis = d3.svg.axis()
931 .scale(xAs)
932 .orient("bottom")
933 .ticks(8)
934 .tickSize(6, 3);
935
6c3ad3a @artzub wim version 57
authored
936 var yAxis = d3.svg.axis()
741aac7 @artzub wim version 60
authored
937 .scale(yAs)
938 .orient("left")
939 .ticks(8)
940 .tickSize(6, 3);
941
942
943 hetxAsje = svg.append("g")
944 .attr("id", "onderas")
945 .attr("class", "main-axis")
946 .attr("transform", "translate(238,480)")
947 .call(xAxis);
948
949 hetyAsje = svg.append("g")
950 .attr("id", "middenas")
951 .attr("class", "main-axis")
952 .attr("transform", "translate(238,123)")
953 .call(yAxis);
954
6c3ad3a @artzub wim version 57
authored
955 /**
956 *Gradient legend for pH values / needs tickmarks
957 **/
741aac7 @artzub wim version 60
authored
958 /*
959 gradient.selectAll("stop")
960 .transition()
961 .duration(timings.gradientInOut)
962 .style("opacity", 1e-6)
963 .remove();
6c3ad3a @artzub wim version 57
authored
964
965
966 gradient.append("svg:stop")
967 .attr("offset", "0%")
968 .attr("stop-color", lowColor)
741aac7 @artzub wim version 60
authored
969
970 .transition()
971 .duration(timings.gradientInOut)
6c3ad3a @artzub wim version 57
authored
972 .attr("stop-opacity", 1);
973
974 gradient.append("svg:stop")
975 .attr("offset", "50%")
976 .attr("stop-color", midColor)
741aac7 @artzub wim version 60
authored
977
978 .transition()
979 .duration(timings.gradientInOut)
6c3ad3a @artzub wim version 57
authored
980 .attr("stop-opacity", 1);
981
982 gradient.append("svg:stop")
983 .attr("offset", "100%")
984 .attr("stop-color", highColor)
741aac7 @artzub wim version 60
authored
985
986 .transition()
987 .duration(timings.gradientInOut)
6c3ad3a @artzub wim version 57
authored
988 .attr("stop-opacity", 1);
989
741aac7 @artzub wim version 60
authored
990
6c3ad3a @artzub wim version 57
authored
991 bakje.append("rect")
992 .attr("width", w)
993 .attr("height", h)
994 .attr("rx", "4px")
995 .attr("ry", "4px")
996 .style("fill", "url(#gradient)");
741aac7 @artzub wim version 60
authored
997 */
6c3ad3a @artzub wim version 57
authored
998 d3.select("#bijbakje")
741aac7 @artzub wim version 60
authored
999 .text(firstVarlabel);
1000
1001 nrOstud = d3.sum(data, function(d) { return d.numberofstudents; });
91f30bf @artzub wim version 43
authored
1002
741aac7 @artzub wim version 60
authored
1003 //this is a lot of html within the code
1004 d3.select("#theNumbers")
1005 .html("<span class=\"statlabel\">number of measurements: </span><span class=\"stat\">" + reeks.length + "</span><br/><br/><span class=\"statlabel\">average " + firstVarlabel + ": </span><span class=\"stat\">" + gemfirstVar + "</span><br/><span class=\"statlabel\">average " + secondVarlabel + ": </span><span class=\"stat\">" + gemsecondVar + "</span>");
1006
1007 d3.select("#theNumbersBis")
1008 .html("<span class=\"statlabel\">number of students involved: </span><span class=\"stat\">" + nrOstud + "</span>");
1009
1010
1011
1012
abb8411 @artzub wim version 50
authored
1013 /* attempts at adding an explanatory axis to the gradient
91f30bf @artzub wim version 43
authored
1014 bakas = d3.svg.axis()
1015 .scale(c)
1016 .ticks(4)
1017 .orient("bottom");
1018
abb8411 @artzub wim version 50
authored
1019
1020 bakje.append("g")
91f30bf @artzub wim version 43
authored
1021 .attr("class", "x axis")
1022 .attr("transform", "translate(," + 4 + ")")
1023 // .attr("x1", 0)
1024 // .attr("x2", 100)
1025 .call(bakas);
741aac7 @artzub wim version 60
authored
1026 */
91f30bf @artzub wim version 43
authored
1027
1028
741aac7 @artzub wim version 60
authored
1029 d3.selectAll("#expchooser, #buttonBar, #theNumbers, #theNumbersBis, #pieHole") //#bijbakje,
1030 .transition()
1031 .delay(timings.controlsInDelay)
1032 .duration(timings.controlsIn)
1033 .style("opacity", .88);
1034 /*
1035 d3.selectAll("#schaalbakje")
1036 .transition()
1037 .delay(timings.controlsInDelay)
1038 .duration(timings.controlsIn)
1039 .style("opacity", 1);
1040 */
91f30bf @artzub wim version 43
authored
1041
741aac7 @artzub wim version 60
authored
1042
91f30bf @artzub wim version 43
authored
1043 //the pies could me made a lot slicker by using proper updates (with tweens) instead of remove/appends
abb8411 @artzub wim version 50
authored
1044 //a try at making the pies replace the drop downs for waterType and waterSource
1045 //m aybe they should be made to stick to a selection after a click on a slice
91f30bf @artzub wim version 43
authored
1046
349f079 @artzub wim version 47
authored
1047 d3.selectAll("#pieI, #pieII").select("svg")
741aac7 @artzub wim version 60
authored
1048 // .transition()
1049 // .duration(timings.pieOut)
1050 // .style("opacity", 1e-6)
349f079 @artzub wim version 47
authored
1051 .remove();
91f30bf @artzub wim version 43
authored
1052
1053
349f079 @artzub wim version 47
authored
1054 var visI = d3.select("#pieI")
91f30bf @artzub wim version 43
authored
1055 .append("svg")
1056 .data([types])
1057 .attr("width", wpie)
1058 .attr("height", hpie);
1059
1060 var arcsI = visI.selectAll("g.arc")
1061 .data(donut)
1062 .enter().append("svg:g")
1063 .attr("class", "arc")
abb8411 @artzub wim version 50
authored
1064 .attr('id', function (d, i) { return 'pieSliceI-' + i; })
1065 .attr("transform", "translate(" + rpie + "," + rpie + ")")
1066 .on('mouseover', markpieSliceI)
1067 .on('mouseout', unmarkpieSliceI);
1068
91f30bf @artzub wim version 43
authored
1069
1070 arcsI.append("path")
abb8411 @artzub wim version 50
authored
1071 .style("fill", function(d, i) { return typecolor(i); })
1072 .style("stroke", function(d, i) { return d3.rgb(typecolor(i)).darker(); })
91f30bf @artzub wim version 43
authored
1073 .attr("d", arc);
1074
1075 arcsI.append("title")
349f079 @artzub wim version 47
authored
1076 .text(function(d) { return d.data.type + ": " + d.data.size; })
91f30bf @artzub wim version 43
authored
1077
1078
1079
1080
1081 var visII = d3.select("#pieII")
1082 .append("svg")
1083 .data([sources])
1084 .attr("width", wpie)
1085 .attr("height", hpie);
1086
1087 var arcsII = visII.selectAll("g.arc")
1088 .data(donut)
1089 .enter().append("svg:g")
1090 .attr("class", "arc")
abb8411 @artzub wim version 50
authored
1091 .attr('id', function (d, i) { return 'pieSliceII-' + i; })
1092 .attr("transform", "translate(" + rpie + "," + rpie + ")")
1093 .on('mouseover', markpieSliceII)
1094 .on('mouseout', unmarkpieSliceII);
1095
91f30bf @artzub wim version 43
authored
1096 arcsII.append("path")
abb8411 @artzub wim version 50
authored
1097 .style("fill", function(d, i) { return sourcecolor(i); })
1098 .style("stroke", function(d, i) { return d3.rgb(sourcecolor(i)).darker(); })
91f30bf @artzub wim version 43
authored
1099 .attr("d", arc);
1100
1101 arcsII.append("title")
349f079 @artzub wim version 47
authored
1102 .text(function(d) { return d.data.source + ": " + d.data.size; });
abb8411 @artzub wim version 50
authored
1103
1104
1105 //this can be made much shorter:
91f30bf @artzub wim version 43
authored
1106
abb8411 @artzub wim version 50
authored
1107 function markpieSliceI(d, i) {
349f079 @artzub wim version 47
authored
1108
abb8411 @artzub wim version 50
authored
1109 currentWatertype = d.data.type;
6c3ad3a @artzub wim version 57
authored
1110 //console.log(currentWatertype);
abb8411 @artzub wim version 50
authored
1111
1112 // make all slices, except the hovered slice, semi transparent
1113 var selectedPieId = 'pieSliceI-' + i;
1114
1115 visI.selectAll('.arc')
1116 .transition()
741aac7 @artzub wim version 60
authored
1117 .duration(timings.barsliceInOut)
abb8411 @artzub wim version 50
authored
1118 .style('opacity', function (d, i) { return ( d3.select(this).attr('id') != selectedPieId ) ? 0.6 : 1; });
1119
1120 updateVisibility()
1121 };
1122
1123
741aac7 @artzub wim version 60
authored
1124
abb8411 @artzub wim version 50
authored
1125 function markpieSliceII(d, i) {
1126
1127 currentWatersource = d.data.source;
1128
1129 // make all slices, except the hovered slice, semi transparent
1130 var selectedPieId = 'pieSliceII-' + i;
1131
1132 visII.selectAll('.arc')
1133 .transition()
741aac7 @artzub wim version 60
authored
1134 .duration(timings.barsliceInOut)
abb8411 @artzub wim version 50
authored
1135 .style('opacity', function (d, i) { return ( d3.select(this).attr('id') != selectedPieId ) ? 0.6 : 1; });
1136
1137 updateVisibility()
1138 };
1139
1140
1141 function unmarkpieSliceI(d, i) {
1142
1143 currentWatertype = "";
1144
1145 // remove transparency from all slices
1146 visI.selectAll('.arc')
1147 .transition()
741aac7 @artzub wim version 60
authored
1148 .duration(timings.barsliceInOut)
abb8411 @artzub wim version 50
authored
1149 .style("opacity", 1);
1150
1151 updateVisibility();
1152
1153 }
1154
1155 function unmarkpieSliceII(d, i) {
1156
1157 currentWatersource = "";
1158
1159 // remove transparency from all slices
1160 visII.selectAll('.arc')
1161 .transition()
741aac7 @artzub wim version 60
authored
1162 .duration(timings.barsliceInOut)
abb8411 @artzub wim version 50
authored
1163 .style("opacity", 1);
1164
1165 updateVisibility();
1166
1167 };
91f30bf @artzub wim version 43
authored
1168
1169 tooltipdiv = d3.select("body")
349f079 @artzub wim version 47
authored
1170 .append("div")
1171 .attr("class", "tooltip");
91f30bf @artzub wim version 43
authored
1172
1173
abb8411 @artzub wim version 50
authored
1174 //This is quite a lot of html code inside the d3 code - isn't there a better way to do this?
1175
91f30bf @artzub wim version 43
authored
1176 function tooltipper(d) {
1177 tooltipdiv
1178 // .style("height", "40px")
741aac7 @artzub wim version 60
authored
1179 .html("<span class=\"statlabel\">" + firstVarlabel + ": </span><span class=\"stat\">" + d[firstVar] + "</span><br/><span class=\"statlabel\">" + secondVarlabel + ": </span><span class=\"stat\">" + d[secondVar] + "</span><br/><span class=\"stat\">" + d.waterType + "</span><span class=\"statlabel\"> water</span><br/><span class=\"statlabel\">source: </span><span class=\"stat\">" + d.waterSource + "</span><br/><br/><span class=\"schoollabel\">(" + d.school + ", " + d.country + ")</span><br/><span class=\"schoollabel\"># of students: " + d.numberofstudents + "</span>")
91f30bf @artzub wim version 43
authored
1180 .style("background", c(d[firstVar]))
349f079 @artzub wim version 47
authored
1181 .style("width", "200px")
741aac7 @artzub wim version 60
authored
1182 .style("z-index", 1000)
91f30bf @artzub wim version 43
authored
1183
1184 .transition()
741aac7 @artzub wim version 60
authored
1185 .duration(timings.tooltipInOut)
91f30bf @artzub wim version 43
authored
1186 .style("opacity", 1);
349f079 @artzub wim version 47
authored
1187 };
91f30bf @artzub wim version 43
authored
1188
1189 function toolmover() {
1190 tooltipdiv
1191 .style("top", d3.event.pageY > height / 2 ? (d3.event.pageY - 102) + "px" : (d3.event.pageY + 12) + "px")
1192 .style("left", d3.event.pageX > width / 2 ? (d3.event.pageX - 212) + "px" : (d3.event.pageX + 12) + "px");
349f079 @artzub wim version 47
authored
1193 };
91f30bf @artzub wim version 43
authored
1194
1195 function tooltapper() {
1196 tooltipdiv
1197 .transition()
741aac7 @artzub wim version 60
authored
1198 .duration(timings.tooltipInOut)
91f30bf @artzub wim version 43
authored
1199 .style("opacity", 1e-6)
6c3ad3a @artzub wim version 57
authored
1200 .style("z-index", -10);
abb8411 @artzub wim version 50
authored
1201 };
1202
1203 });
e1cab39 @artzub wim version 49
authored
1204 });
1205 });
349f079 @artzub wim version 47
authored
1206 };
1207
91f30bf @artzub wim version 43
authored
1208
1209 function doHistogram(reeks) {
1210
1211 //histogramcode
1212
1213 if (!isExists(reeks))
1214 reeks = window.reeks;
1215
1216 d3.selectAll(".grid, .tikkies, .hisrect, text")
349f079 @artzub wim version 47
authored
1217 .transition()
741aac7 @artzub wim version 60
authored
1218 .duration(timings.histoOut)
349f079 @artzub wim version 47
authored
1219 .style("opacity", 1e-6)
1220 .remove(); //.transition().duration(1000)
91f30bf @artzub wim version 43
authored
1221
1222
1223 var histogram = d3.layout.histogram()(reeks);
1224
1225 var x = d3.scale.ordinal()
349f079 @artzub wim version 47
authored
1226 .domain(histogram.map(function (d) { return d.x; }))
1227 .rangeBands([0, histw]);
91f30bf @artzub wim version 43
authored
1228
1229 var y = d3.scale.linear()
349f079 @artzub wim version 47
authored
1230 .domain([0, d3.max(histogram, function (d) { return d.y; })])
1231 .range([0, histh]);
91f30bf @artzub wim version 43
authored
1232
741aac7 @artzub wim version 60
authored
1233
1234 d3.selectAll("#histolabel_y, #histolabel_x")
1235 .transition()
1236 .delay(timings.histoLabelsIndelay)
1237 .duration(timings.histoLabelsIn)
1238 .style("opacity", 1);
1239
91f30bf @artzub wim version 43
authored
1240 var rules = his.selectAll("g.rule")
349f079 @artzub wim version 47
authored
1241 .data(y.ticks(10))
1242 .enter()
1243 .append("svg:g")
1244 .style("opacity", 1e-6)
1245 .attr("transform", function (d) { return "translate(0," + (histh - y(d)) + ")"; });
91f30bf @artzub wim version 43
authored
1246
1247
1248 rules.append("line")
349f079 @artzub wim version 47
authored
1249 .attr("class", "tikkies")
1250 .attr("x1", -1)
1251 .attr("x2", -5);
91f30bf @artzub wim version 43
authored
1252
1253
1254 rules.append("line")
349f079 @artzub wim version 47
authored
1255 .attr("class", "grid")
1256 .attr("x1", 1)
1257 .attr("x2", histw);
91f30bf @artzub wim version 43
authored
1258
1259
1260 rules.append("text")
349f079 @artzub wim version 47
authored
1261 .attr("class", "astxt")
1262 .attr("x", -15)
1263 .attr("dy", ".71em")
1264 .attr("text-anchor", "middle")
1265 .text(y.tickFormat(10))
1266 .style("display", function (d) { return d == 0 ? "none" : null });
1267
1268
91f30bf @artzub wim version 43
authored
1269 rules.transition()
741aac7 @artzub wim version 60
authored
1270 .delay(timings.histoAssenIndelay)
1271 .duration(timings.histoAssenIn)
349f079 @artzub wim version 47
authored
1272 .style("opacity", 1);
91f30bf @artzub wim version 43
authored
1273
1274
741aac7 @artzub wim version 60
authored
1275 his.append("line")
1276 .attr("x1", 0)
1277 .attr("x2", histw)
1278 .attr("y1", histh)
1279 .attr("y2", histh)
1280 .style("opacity", 1e-6)
1281
1282 .transition()
1283 .delay(timings.histoAssenIndelay)
1284 .duration(timings.histoAssenIn)
1285 .style("opacity", 1);
1286
1287
1288 his.append("line")
1289 .attr("x1", 0)
1290 .attr("x2", 0)
1291 .attr("y1", 0)
1292 .attr("y2", histh)
1293 .style("opacity", 1e-6)
1294
1295 .transition()
1296 .delay(timings.histoAssenIndelay)
1297 .duration(timings.histoAssenIn)
1298 .style("opacity", 1);
1299
1300
91f30bf @artzub wim version 43
authored
1301 var bars = his.selectAll("g.bars")
349f079 @artzub wim version 47
authored
1302 .data(histogram)
1303 .enter().append("svg:g")
1304 .attr('class', 'histoBar')
1305 .attr('id', function (d, i) { return 'histoBar-' + i; })
1306 .attr("transform", function (d) { return "translate(" + x(d.x) + "," + (histh - y(d.y)) + ")"; })
1307 .on('mouseover', markHistogramBar)
1308 .on('mouseout', unmarkHistogramBar);
91f30bf @artzub wim version 43
authored
1309
1310
1311 bars.append("rect")
349f079 @artzub wim version 47
authored
1312 .attr("class", "hisrect")
1313 .attr("width", x.rangeBand())
1314 .attr("y", function (d) { return y(d.y); })
1315 .attr("height", 0)
1316 .style("fill", function (d) { return c(d.x); })
1317 .style("stroke", function (d) { return d3.rgb(c(d.x)).darker(); })
91f30bf @artzub wim version 43
authored
1318
349f079 @artzub wim version 47
authored
1319 .transition()
1320 .delay(2450)
1321 .duration(750)
1322 .attr("y", 0)
1323 .attr("height", function (d) { return y(d.y); });
91f30bf @artzub wim version 43
authored
1324
349f079 @artzub wim version 47
authored
1325
91f30bf @artzub wim version 43
authored
1326 bars.append("text")
349f079 @artzub wim version 47
authored
1327 .attr("class", "bartxt")
1328 .attr("x", x.rangeBand() / 2)
1329 .attr("y", 0)
1330 .attr("dy", "-.35em")
1331 .attr("text-anchor", "middle")
1332 .text(function (d) { return d3.round(d.x, 1) })
1333 .style("opacity", 1e-6)
91f30bf @artzub wim version 43
authored
1334
349f079 @artzub wim version 47
authored
1335 .transition()
1336 .delay(3250)
1337 .duration(750)
1338 .style("opacity", 1);
91f30bf @artzub wim version 43
authored
1339
1340 }
1341
1342
1343 function markHistogramBar(d, i) {
1344
1345 // make all bars, except the hovered bar, semi transparent
1346 var selectedBarId = 'histoBar-' + i;
349f079 @artzub wim version 47
authored
1347
1348 his.selectAll('.histoBar')
1349 .transition()
741aac7 @artzub wim version 60
authored
1350 .duration(timings.barsliceInOut)
349f079 @artzub wim version 47
authored
1351 .style('opacity', function (d, i) { return ( d3.select(this).attr('id') != selectedBarId ) ? 0.3 : 1; });
91f30bf @artzub wim version 43
authored
1352
1353 highlightMeasurements(globalfirstVar, d.x, d.x + d.dx);
1354
1355 }
1356
1357 function unmarkHistogramBar(d, i) {
1358
1359 // remove transparency from all bars
349f079 @artzub wim version 47
authored
1360 his.selectAll('.histoBar')
1361 .transition()
741aac7 @artzub wim version 60
authored
1362 .duration(timings.barsliceInOut)
349f079 @artzub wim version 47
authored
1363 .style('opacity', 1);
91f30bf @artzub wim version 43
authored
1364
1365 highlightMeasurements(null);
1366
1367 }
1368
741aac7 @artzub wim version 60
authored
1369
91f30bf @artzub wim version 43
authored
1370 function highlightMeasurements(metric, lowerBound, upperBound) {
1371
1372 if (highlightTimer != null) {
1373 clearTimeout(highlightTimer);
1374 }
abb8411 @artzub wim version 50
authored
1375 //should be replaced by an interaction with the pies
1376 var watertype = currentWatertype;
1377 var watersource = currentWatersource;
91f30bf @artzub wim version 43
authored
1378
1379 highlightTimer = setTimeout(function () {
abb8411 @artzub wim version 50
authored
1380 var needObj = rondjes;
91f30bf @artzub wim version 43
authored
1381 if (isExists(detailsCircles))
1382 needObj = detailsCircles;
1383 needObj.style('visibility', function (d, i) {
1384
1385
1386 if (( ( metric == null ) || ( d[ metric ] >= lowerBound && d[ metric ] <= upperBound ) ) &&
1387 (watertype == "" || watertype == d.waterType) && (watersource == "" || watersource == d.waterSource)) {
1388 return 'visible';
1389 }
1390 else {
1391 return 'hidden';
1392 }
1393 });
1394
1395 }, 350);
1396
1397 }
1398
1399
1400 /**
1401 * Update visibility settings based on selections
abb8411 @artzub wim version 50
authored
1402 * Please note: this is the code that used to respond to the dropdowns, I have reworked it to respond to mouseovers on the pioeslices
91f30bf @artzub wim version 43
authored
1403 **/
1404
abb8411 @artzub wim version 50
authored
1405
91f30bf @artzub wim version 43
authored
1406 function updateVisibility() {
1407
abb8411 @artzub wim version 50
authored
1408 // kill pending visibility change set by function highlightMeasurements()
91f30bf @artzub wim version 43
authored
1409 if (highlightTimer != null) {
1410 clearTimeout(highlightTimer);
1411 }
abb8411 @artzub wim version 50
authored
1412
1413 rondjes.attr("visibility", function (d) {
1414 return (currentWatertype == "" || currentWatertype == d.waterType) && (currentWatersource == "" || currentWatersource == d.waterSource) ? "visible" : "hidden";
91f30bf @artzub wim version 43
authored
1415 });
1416
1417
abb8411 @artzub wim version 50
authored
1418 // This bit updates the field containing the averages and other stats
91f30bf @artzub wim version 43
authored
1419 filteredData = globalData.filter(function (d) {
abb8411 @artzub wim version 50
authored
1420 return (currentWatertype == "" || d.waterType == currentWatertype) && currentWatersource == "" || d.waterSource == currentWatersource;
91f30bf @artzub wim version 43
authored
1421 })
1422
1423
349f079 @artzub wim version 47
authored
1424 gemfirstVar = d3.round(d3.mean(filteredData, function (d) { return d[globalfirstVar]; }), 2);
1425 gemsecondVar = d3.round(d3.mean(filteredData, function (d) { return d[globalsecondVar]; }), 2);
91f30bf @artzub wim version 43
authored
1426
1427
abb8411 @artzub wim version 50
authored
1428 //for histogram & stats
349f079 @artzub wim version 47
authored
1429 reeks = filteredData.map(function (d) { return d[globalfirstVar]; });
91f30bf @artzub wim version 43
authored
1430
741aac7 @artzub wim version 60
authored
1431
91f30bf @artzub wim version 43
authored
1432 doHistogram();
1433
abb8411 @artzub wim version 50
authored
1434
741aac7 @artzub wim version 60
authored
1435 nrOstud = d3.sum(filteredData, function(d) { return d.numberofstudents; });
1436
abb8411 @artzub wim version 50
authored
1437 //for reporting correct averages
91f30bf @artzub wim version 43
authored
1438 if (reeks.length == 0) {
1439 gemfirstVar = 0;
1440 gemsecondVar = 0;
349f079 @artzub wim version 47
authored
1441 };
91f30bf @artzub wim version 43
authored
1442
741aac7 @artzub wim version 60
authored
1443 d3.select("#theNumbers")
1444 .html("<span class=\"statlabel\">number of measurements: </span><span class=\"stat\">" + reeks.length + "</span><br/><br/><span class=\"statlabel\">average " + globalfirstVarlabel + ": </span><span class=\"stat\">" + gemfirstVar + "</span><br/><span class=\"statlabel\">average " + globalsecondVarlabel + ": </span><span class=\"stat\">" + gemsecondVar + "</span>");
1445
1446 d3.select("#theNumbersBis")
1447 .html("<span class=\"statlabel\">number of students involved: </span><span class=\"stat\">" + nrOstud + "</span>");
91f30bf @artzub wim version 43
authored
1448
1449
349f079 @artzub wim version 47
authored
1450 };
abb8411 @artzub wim version 50
authored
1451
1452
1453
1454 ///
1455 //circlemoving routines
1456 ///
6c3ad3a @artzub wim version 57
authored
1457 //these should be d3-ified by using scales!!!
1458 ///
abb8411 @artzub wim version 50
authored
1459
741aac7 @artzub wim version 60
authored
1460 function Sortum() {
bd84f19 @artzub win version 51
authored
1461
741aac7 @artzub wim version 60
authored
1462 if (globalfirstVar == "ph") {
1463 data = data.sort(function(d,e) { return d3.ascending(d.ph, e.ph); });
1464 }
1465 else
1466 if (globalfirstVar == "sanity") {
1467 data = data.sort(function(d,e) { return d3.ascending(d.sanity, e.sanity); });
1468 }
1469 else
1470 if (globalfirstVar == "dropsofbleach") {
1471 data = data.sort(function(d,e) { return d3.ascending(d.dropsofbleach, e.dropsofbleach); });
1472 }
1473
1474 circularUpdater();
1475
1476 };
1477
abb8411 @artzub wim version 50
authored
1478
1479
741aac7 @artzub wim version 60
authored
1480
1481 function TyMovum() {
1482
1483 data = data.sort(function(d,e) { return d3.ascending(d.waterType, e.waterType); });
1484
bd84f19 @artzub win version 51
authored
1485 circularUpdater();
abb8411 @artzub wim version 50
authored
1486
bd84f19 @artzub win version 51
authored
1487 };
1488
1489
1490 function ScMovum() {
1491
1492 data = data.sort(function(d,e) { return d3.ascending(d.waterSource, e.waterSource); });
1493
1494 circularUpdater();
abb8411 @artzub wim version 50
authored
1495
1496 };
1497
1498
bd84f19 @artzub win version 51
authored
1499 function TMovum() {
1500
6c3ad3a @artzub wim version 57
authored
1501 if (globalfirstVar == "sanity") {
1502 data = data.sort(function(d,e) { return d3.ascending(d.sanitybyweight, e.sanitybyweight); });
1503 }
1504 else
bd84f19 @artzub win version 51
authored
1505 data = data.sort(function(d,e) { return d3.ascending(d.temperature, e.temperature); });
1506
1507 circularUpdater();
1508
1509 };
1510
1511
1512 function NMovum() {
1513
741aac7 @artzub wim version 60
authored
1514 //is no longer a sorting option in the graph.
1515
bd84f19 @artzub win version 51
authored
1516 data = data.sort(function(d,e) { return d3.ascending(d.numberofstudents, e.numberofstudents); });
1517
1518 circularUpdater();
1519
1520 };
1521
1522
1523 function CMovum() {
1524
1525 data = data.sort(function(d,e) { return d3.ascending(d.country, e.country); });
1526
1527 circularUpdater();
1528
1529 };
1530
1531
abb8411 @artzub wim version 50
authored
1532 function Mapum() {
6c3ad3a @artzub wim version 57
authored
1533
5ebe7a8 @artzub win version 52
authored
1534 rondjes.data(data, function(d) { return d.coordinates; })
abb8411 @artzub wim version 50
authored
1535 .transition()
741aac7 @artzub wim version 60
authored
1536 .duration(timings.rondjesInOut)
5ebe7a8 @artzub win version 52
authored
1537 .attr("transform", function (d) { return "translate(" + projection(d.backoordinates) + ")"; });
741aac7 @artzub wim version 60
authored
1538
6c3ad3a @artzub wim version 57
authored
1539
741aac7 @artzub wim version 60
authored
1540 d3.selectAll("#middenas, #onderas, #bijbakje")
1541 .transition()
1542 .duration(timings.yAsInOut)
1543 .style("visibility", "hidden")
1544 .style("z-index", -10);
1545
1546 d3.selectAll(".feature")
1547 .transition()
1548 .duration(timings.featureInOut)
1549 .style("fill-opacity", 1)
1550 .style("stroke-opacity", 1);
6c3ad3a @artzub wim version 57
authored
1551
741aac7 @artzub wim version 60
authored
1552
abb8411 @artzub wim version 50
authored
1553 };
1554
1555
bd84f19 @artzub win version 51
authored
1556 function circularUpdater() {
1557
1558 //alternatief voor sort
1559 //var dataflex = d3.range(data.length);
1560 // dataflex.sort(function(d,e) { return d3.ascending(data[d].sanity, data[e].sanity); });
1561 // .attr("transform", function(d, i) { return "translate(" + dataflex.indexOf(i) + ", 0)"; })
1562
741aac7 @artzub wim version 60
authored
1563 //circularUpdater without any of the above sorters gives the raw data order. Is not a selectable option in the graph.
bd84f19 @artzub win version 51
authored
1564
1565 //this should be d3-ified by using scales!!!
1566 if (globalfirstVar == "ph") {
741aac7 @artzub wim version 60
authored
1567 data.forEach(function(d,i) { return d.coordinates = [i/12.5-70, d.ph*25-164]; });
bd84f19 @artzub win version 51
authored
1568 }
1569 else
1570 if (globalfirstVar == "sanity") {
741aac7 @artzub wim version 60
authored
1571 data.forEach(function(d,i) { return d.coordinates = [i/1.35-72, d.sanity*1.2-40]; });
bd84f19 @artzub win version 51
authored
1572 }
1573 else
1574 if (globalfirstVar == "dropsofbleach") {
741aac7 @artzub wim version 60
authored
1575 data.forEach(function(d,i) { return d.coordinates = [i*1.12-70, d.dropsofbleach*1.9-42]; });
bd84f19 @artzub win version 51
authored
1576 }
1577
1578
1579 rondjes.data(data, function(d) { return d.coordinates; })
1580 .transition()
6c3ad3a @artzub wim version 57
authored
1581 .delay()//(function(d,i) { return i })
741aac7 @artzub wim version 60
authored
1582 .duration(timings.rondjesInOut)
bd84f19 @artzub win version 51
authored
1583 .attr("transform", function (d) { return "translate(" + projection(d.coordinates) + ")"; });
741aac7 @artzub wim version 60
authored
1584
1585
1586 d3.selectAll(".feature")
1587 .transition()
1588 .duration(timings.featureInOut)
1589 .style("fill-opacity", .3)
1590 .style("stroke-opacity", .4);
1591
1592 d3.selectAll("#middenas, #onderas, #bijbakje")
1593 .transition()
1594 .delay(timings.yAsInOutDelay)
1595 .duration(timings.yAsInOut)
1596 .style("visibility", "visible")
1597 .style("z-index", 100);
1598
1599
bd84f19 @artzub win version 51
authored
1600 };
1601
91f30bf @artzub wim version 43
authored
1602
1603 /**
1604 * Re-orient visualization when moved
1605 **/
1606 function move() {
741aac7 @artzub wim version 60
authored
1607 projection.translate(d3.event.translate).scale(d3.event.scale);
91f30bf @artzub wim version 43
authored
1608
349f079 @artzub wim version 47
authored
1609 feature.attr("d", path);
1610
1611 d3.selectAll("circle")
1612 .attr("transform", function (d) { return "translate(" + projection(d.coordinates) + ")"; })
91f30bf @artzub wim version 43
authored
1613
abb8411 @artzub wim version 50
authored
1614 //Adapt the size of the circles to the scale of the map so they don't get too small
91f30bf @artzub wim version 43
authored
1615 q = projection.scale() / 3;
349f079 @artzub wim version 47
authored
1616