forked from holtzy/data_to_viz
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcaveats.html
executable file
·643 lines (529 loc) · 31.9 KB
/
caveats.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="A datavisualization tool that leads you from your data to the graphic you need." content="">
<meta name="Yan Holtz & Conor Healy" content="">
<title>Data to Viz | A collection of graphic pitfalls</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="icon" href="img/logo/data-to-viz.ico">
<!-- Custom styles for this template -->
<link href="css/agency.css" rel="stylesheet">
<!-- JQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
</head>
<body id="page-top">
<!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
<nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
<script>
$(function(){
$("#mainNav").load("menu.html");
});
</script>
<!-- --------------------------- CAVEATS SECTION ------------------------------------------------------------------- -->
<section id="caveats">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Caveats</h2>
<h3 class="section-subheading text-muted">A collection of dataviz caveats by <a href="https://www.data-to-viz.com">data-to-viz.com</a></h3>
<div id="myBtnContainer">
<button class="btn btn-secondary" onclick="filterSelection('all')">Show all</button>
<button class="btn btn-secondary" onclick="filterSelection('top10')">Top 10</button>
<button class="btn btn-secondary" onclick="filterSelection('improvement')">Improvement</button>
<button class="btn btn-secondary" onclick="filterSelection('misleading')">Misleading</button>
<button class="btn btn-secondary" onclick="filterSelection('map')">Map</button>
<button class="btn btn-secondary" onclick="filterSelection('bar')">Bar</button>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
<a href="caveat/order_data.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/order_data.png">
<p class="mytitlerelated">Order your data</p>
<p class="mytextrelated">When displaying the value of several entities, ordering them makes the graph much more insightful.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading top10 bar">
<a href="caveat/cut_y_axis.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/cut_y_axis.png">
<p class="mytitlerelated">To cut or not to cut?</p>
<p class="mytextrelated">Cutting the Y-axis is one of the most controversial practice in data viz. See why.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement">
<a href="caveat/spaghetti.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/spaghetti.png">
<p class="mytitlerelated">The spaghetti chart</p>
<p class="mytextrelated">A line graph with too many lines becomes unreadable: it is called a spaghetti graph.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement top10">
<a href="caveat/pie.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/pie.png">
<p class="mytitlerelated">Pie chart</p>
<p class="mytextrelated">The human eye is bad at reading angles. See how to replace the most criticized chart ever.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading">
<a href="caveat/bin_size.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/bin_size.png">
<p class="mytitlerelated">Play with histogram bin size</p>
<p class="mytextrelated">Always try different bin sizes when you build a histogram, it can lead to different insights.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading improvement top10">
<a href="caveat/boxplot.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/boxplot.png">
<p class="mytitlerelated">Do boxplots hide information?</p>
<p class="mytextrelated">Boxplots are a great way to summarize a distribution but hide the sample size and their distribution.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading improvement top10 bar">
<a href="caveat/error_bar.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/error_bar.png">
<p class="mytitlerelated">The problem with error bars</p>
<p class="mytextrelated">Barplots with error bars must be used with great care. See why and how to replace them.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement">
<a href="caveat/multi_distribution.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/multi_distribution.png">
<p class="mytitlerelated">Too many distributions.</p>
<p class="mytextrelated">If you need to compare the distributions of many variables, don't clutter your graphic.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement">
<a href="caveat/overplotting.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/overplotting.png">
<p class="mytitlerelated">Overplotting</p>
<p class="mytextrelated">Too many points on your scatter plot makes it unreadable? Techniques exist to avoid overplotting.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement" style="opacity: 0.6">
<a href="https://blog.datawrapper.de/colors/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/rainbow.png">
<p class="mytitlerelated">The rainbow color palette</p>
<p class="mytextrelated">Avoid the rainbow color palette when you map a numeric variable. So many better palettes exist.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement bar" style="opacity: 0.6">
<a href="caveat/small_multiple.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/small_multiple.png">
<p class="mytitlerelated">Faceting: horizontal or vertical?</p>
<p class="mytextrelated">Placing the individual plot horizontally or vertically is an important choice to make.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading">
<a href="caveat/counter_intuitive.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/counter_intuitive.png">
<p class="mytitlerelated">Don't be counter intuitive</p>
<p class="mytextrelated">Your audience is used to a few dataviz standards. Not respecting standards can be misleading.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading top10">
<a href="https://blog.datawrapper.de/dualaxis/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/dual_axis.png">
<p class="mytitlerelated">The problem with dual axes</p>
<p class="mytextrelated">Using dual axes is a good way to manipulate the history behind your data. Avoid it. (blog by datawrapper)</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading">
<a href="caveat/calculation_error.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/calculation_error.png">
<p class="mytitlerelated">Calculation errors</p>
<p class="mytextrelated">Always double-check the values written on the chart. Does your sum make sense?</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
<a href="caveat/circular_barplot_accordeon.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/circular_barplot_accordeon.png">
<p class="mytitlerelated">Barplots with radial coordinates</p>
<p class="mytextrelated">This kind of barplot distorts reality: outer bars tend to look bigger than inner ones.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement">
<a href="caveat/connect_your_dot.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/connect_your_dot.png">
<p class="mytitlerelated">Connect your dots</p>
<p class="mytextrelated">If your X-axis is ordered, connecting the dots will make the message much clearer.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
<a href="caveat/color_com_nothing.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/color_com_nothing.png">
<p class="mytitlerelated">Color that communicates nothing</p>
<p class="mytextrelated">A bad use of colors can be misleading. If your color does not represent anything, don't use it.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading">
<a href="caveat/radius_or_area.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/radius_or_area.png">
<p class="mytitlerelated">Bubble size: radius or area?</p>
<p class="mytextrelated">When using bubbles on a chart, their area must be proportional to the underlying variable. Not their radius.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
<a href="caveat/hard_label.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/hard_label.png">
<p class="mytitlerelated">When axis labels break your neck</p>
<p class="mytextrelated">Having long and vertical axis labels can be annoying. If you can, flip your chart.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
<a href="caveat/circular_bar_yaxis.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/circular_bar_yaxis.png">
<p class="mytitlerelated">Circular barplots and distortion</p>
<p class="mytextrelated">Set a sufficient inner circle size to avoid bar shape distortion.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading bar">
<a href="caveat/3d.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/3d.png">
<p class="mytitlerelated">The issue with 3D</p>
<p class="mytextrelated">Except in a few rare situations, 3D must be avoided. It distorts reality.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement misleading">
<a href="caveat/aspect_ratio.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/aspect_ratio.png">
<p class="mytitlerelated">Mind the aspect ratio</p>
<p class="mytextrelated">Avoid extreme aspect ratios. They can make a plot unreadable.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
<a href="caveat/stacking.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/stacking.png">
<p class="mytitlerelated">The issue with stacking</p>
<p class="mytextrelated">Stacking makes it difficult to analyze each represented group. See when to use it.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement">
<a href="caveat/mental_calculation.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/mental_workout.png">
<p class="mytitlerelated">Mental arithmetic</p>
<p class="mytextrelated">Don't ask the reader to do mental arithmetic, it is hard to compare shapes.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading">
<a href="caveat/area_hard.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/bubble_hard.png">
<p class="mytitlerelated">Area is a poor metaphor</p>
<p class="mytextrelated">Human brains struggle to translate areas to precise values. Prefer other shapes.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
<a href="caveat/grouped_bar.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/ungrouped_grouped_barplot.png">
<p class="mytitlerelated">Grouped barplots must be grouped</p>
<p class="mytextrelated">In a grouped barplot, bars in the same group must be close one to each other. It makes grouping obvious.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement">
<a href="caveat/declutter.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/declutter_your_graphic.png">
<p class="mytitlerelated">De-clutter your graphic</p>
<p class="mytextrelated">Keep only what's necessary on your graphic: 3d, color effect, redundant info, etc. hide the story.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement" style="opacity: 0.6">
<a href="https://www.r-graph-gallery.com/239-custom-layout-legend-ggplot2.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/mind_your_legend.png">
<p class="mytitlerelated">Mind your legend</p>
<p class="mytextrelated">A few tips for a useful legend. Hint: you should worry if you have 14 groups.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement misleading">
<a href="caveat/consistency.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/consistency_sev_graph.png">
<p class="mytitlerelated">Consistency between charts</p>
<p class="mytextrelated">If you present several graphics, be consistent. Does each color always represent the same group?</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement misleading">
<a href="caveat/spider.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/spider.png">
<p class="mytitlerelated">Spider chart and its caveats</p>
<p class="mytextrelated">Spider or radar charts are often criticized in dataviz, here is an overview of the topic.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement">
<a href="graph/heatmap.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/heatmap.png">
<p class="mytitlerelated">What you should consider when doing a heatmap</p>
<p class="mytextrelated">Heatmaps are a powerful way of visualizing information. A few features must be considered.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading top10">
<a href="caveat/simpson.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/simpson.png">
<p class="mytitlerelated">The Simpson paradox</p>
<p class="mytextrelated">When a trend appears in several different groups of data but reverses when these groups are combined</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement">
<a href="caveat/annotation.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/annotate.png">
<p class="mytitlerelated">Annotate your chart</p>
<p class="mytextrelated">Help the reader understand your point: highlight the important part</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
<a href="http://gravyanecdote.com/uncategorized/wrappedbarsthoughts/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/moire.png">
<p class="mytitlerelated">The Moire effect</p>
<p class="mytextrelated">If you have a barplot with many bars of similar length, consider a lollipop chart instead.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading map top10">
<a href="https://xkcd.com/1138/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/choropleth_normalization.png">
<p class="mytitlerelated">Choropleth and normalization</p>
<p class="mytextrelated">If you don't scale your data, your choropleth will basically look like a population map.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column misleading map">
<a href="https://blog.datawrapper.de/weeklychart-logscale3/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/map_scale.png">
<p class="mytitlerelated">How to read a log scale</p>
<p class="mytextrelated">Comparing percentage change on a linear scale can be misleading, use a log scale instead. By datawrapper.</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 column map">
<a href="https://twitter.com/hashtag/chloropleth" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img src="img/mistake/choropleth_vocab.png">
<p class="mytitlerelated">There is no 'L' in choropleth</p>
<p class="mytextrelated">And people won't miss an opportunity to make you notice..</p>
</a>
</div>
</div>
</div>
</div>
</div>
<br>
<div style="text-align:center"><a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="index.html">Back to Data-to-viz.com</a></div>
</section>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- --------------------------- INTRO DISQUS ------------------------------------------------------------------- -->
<section class="bg-light">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Suggestion</h2>
<h3 class="section-subheading text-muted">Any other suggestion? A common pitfall is missing?<br><br>Please drop me a word in the comment section, and I will add it to the collection.</h3>
<br>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- --------------------------- DISQUS SECTION ------------------------------------------------------------------- -->
<div class="container">
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = www.data-to-viz.com/caveats.html;
this.page.identifier = caveats;
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://data-to-viz.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
</section>
<!-- --------------------------- FOOTER SECTION ------------------------------------------------------------------- -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © from Data to Viz 2018</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
<a href="#">Privacy Policy</a>
</li>
<li class="list-inline-item">
<a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- ---------------------------------------------------------------------------------------------- -->
<script>
// --------------------------------------------------------------------------------------------------------------------------------- //
// A script to select charts based on their tag //
// --------------------------------------------------------------------------------------------------------------------------------- //
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
// --------------------------------------------------------------------------------------------------------------------------------- //
</script>
<!-- ------------------------ JAVASCRIPT SECTION ----------------------------- -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
<!-- Activate the bootstrap tooltip, must be after jQuery load -->
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- Script for animated portfolio with filter. Found here: https://codepen.io/pramodkumarboda/pen/XdgxmQ -->
<script>
$(window).load(function(){
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>
<!-- Script to give a specific URL to every Modal. TODO: improve it with https://stackoverflow.com/questions/34154370/bootstrap-3-x-how-to-have-url-change-upon-clicking-modal-trigger -->
<script>
$(document).ready(function(){
$(window.location.hash).modal('show');
$('a[data-toggle="modal"]').click(function(){
window.location.hash = $(this).attr('href');
});
});
$('button[data-dismiss="modal"]').click(function(){
var original = window.location.href.substr(0, window.location.href.indexOf('#'))
history.replaceState({}, document.title, original);
});
$(window.location.hash).modal('show');
$('a[data-toggle="modal"]').click(function(){
window.location.hash = $(this).attr('href');
});
function revertToOriginalURL() {
var original = window.location.href.substr(0, window.location.href.indexOf('#'))
history.replaceState({}, document.title, original);
}
$('.modal').on('hidden.bs.modal', function () {
revertToOriginalURL();
});
</script>
<script>
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-79254642-3');
</script>
<script>
var getOutboundLink = function(url) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': url,
'transport_type': 'beacon',
'event_callback': function(){document.location = url;}
});
}
</script>
<!----------------------------------------------------------------------------------------------- -->
</body>
</html>