-
Notifications
You must be signed in to change notification settings - Fork 0
/
color-perception-demo.html
151 lines (134 loc) · 4.44 KB
/
color-perception-demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Color Perception Demo expressed with numbers and highlighting or lack thereof</title>
<style media="screen">
body {
color: #333;
font-family: serif;
padding-left: 3em;
}
#demo-input-container {
margin-bottom: 4em;
}
#demo-container {
font-family: monospace;
font-size: 2.5em;
font-weight: bolder;
}
#demo-container span {
color: #BBB;
}
#demo-container.highlight span.highlight {
color: red;
}
#demo-container.colorful span.normal {
color: green;
}
#demo-container.colorful span.warning {
color: orange;
}
</style>
</head>
<body>
<div id="demo-input-container">
<h1>Color Perception Demo</h1>
<p>This demo should show that developers need to be careful of how to use colors
when visualizing data. This is in particular important when designing and
implementing dashboards. Do not use too little color, but also be careful
when using too much color (e.g. encoding data with traffic light colors).
</p>
<p><strong>Try to count the fives for different visualization styles!</strong>
</p>
<input type="checkbox" id="highlight">
<label for="highlight">Highlight</label>
<input type="checkbox" id="colorful">
<label for="colorful">Colorful</label>
<button type="button" id="new-numbers">NEW NUMBERS</button>
</div>
<div id="demo-container"></div>
<script type="text/javascript">
(function() {
var draw = function(input) {
var resultStr = "",
row,
randomNumber,
cssClass,
demoContainer;
for (var i = 0; i < input.rows; i++) {
row = "";
for (var j = 0; j < input.cols; j++) {
randomNumber = getRandomInt(0, 9);
if (input.highlight === randomNumber) {
cssClass = "highlight";
} else {
cssClass = Math.random() > 0.5 ? "warning" : "normal";
}
row = row + "<span class='" + cssClass + "'>" + randomNumber + "</span>";
}
row = row + "<br/>";
resultStr = resultStr + row;
}
demoContainer = document.getElementById("demo-container");
demoContainer.innerHTML = resultStr;
if (document.getElementById('highlight').checked) {
addClass(demoContainer, 'highlight');
}
if (document.getElementById('colorful').checked) {
addClass(demoContainer, 'colorful');
}
};
var registerActionHandlers = function() {
document.getElementById("new-numbers").addEventListener('click', function() {
draw(readInput());
});
document.getElementById("highlight").addEventListener('change', function(event) {
var demoContainerElem = document.getElementById('demo-container');
event.target.checked === true
? addClass(demoContainerElem, 'highlight')
: removeClass(demoContainerElem, 'highlight')
});
document.getElementById("colorful").addEventListener('change', function(event) {
var demoContainerElem = document.getElementById('demo-container');
event.target.checked === true
? addClass(demoContainerElem, 'colorful')
: removeClass(demoContainerElem, 'colorful')
});
};
var readInput = function() {
return {
cols: 20,
rows: 7,
highlight: 5,
};
}
var getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
// DOM API helpers
function hasClass(elem, className) {
var classStr = elem.getAttribute('class');
return classStr.indexOf(className) > -1;
}
function removeClass(elem, className) {
var classStr = elem.getAttribute('class');
if (classStr) {
var newClassStr = classStr.replace(className, "");
elem.setAttribute('class', newClassStr);
}
};
function addClass(elem, className) {
var classStr = elem.getAttribute('class');
if (classStr === null) {
elem.setAttribute('class', className);
} else if (classStr.indexOf(className) < 0) {
elem.setAttribute('class', classStr + " " + className);
}
}
draw(readInput());
registerActionHandlers();
})();
</script>
</body>
</html>