-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (143 loc) · 4.96 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Switcher</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.top-bar {
padding: 10px 0;
text-align: center;
}
.top-bar button {
background-color: #28a745;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
.container {
display: flex;
width: 60%;
margin: auto;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
margin-top: 20px;
}
.image-container,
.description-container {
flex: 1;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.image-container img {
width: 100%;
height: auto;
}
.description h2,
.description h3 {
color: #007bff;
font-size: 30px;
margin: 10px 0;
}
.description ul {
list-style-type: disc;
padding-left: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="top-bar">
<button onclick="switchToImage(1)">Example1</button>
<button onclick="switchToImage(2)">Example2</button>
</div>
<div class="container" id="container1">
<div class="image-container">
<img id="image1" src="image1.png" alt="Image 1">
<div class="description-container">
<div class="description">
<div class="description-content">
<h3>Data Abstraction</h3>
<ul>
<li>Airports (nominal), Departure hour (interval), Probability (ratio)</li>
</ul>
<h3>Visual Encoding/Idiom</h3>
<ul>
<li><strong style="font-weight: bold; color: green">Departure hour</strong>: position on vertical axis.</li>
<li><strong style="font-weight: bold; color: green">Airports</strong>: position on horizontal axis, properly reordered by probabilities to show the trend.</li>
<li><strong style="font-weight: bold; color: red">Probability</strong>: color from dark blue to bright yellow in continuous space, with limitations in low-level query actions. You can compare but can not <strong style="font-weight: bold;">identify</strong> the probability value.</li>
</ul>
<h3>Improvements</h3>
<ul>
<li>Divide the probability range and Discretize the color space, we can have a rough probability ranage value when referering to color.</li>
<li>Add specific probabilities number in each rect box for identifying action.</li>
<li>Give the most effective channel like position to the probabilities.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container" id="container2" style="display: none;">
<div class="image-container">
<img id="image2" src="image2.png" alt="Image 2">
<div class="description-container">
<div class="description">
<div class="description-content">
<h3>Data Abstraction</h3>
<ul>
<li>Airports (nominal), Airline (nominal), Delay in Minutes (ratio), year (interval)</li>
</ul>
<h3>Visual Encoding/Idiom</h3>
<ul>
<li><strong style="font-weight: bold; color: green">Airports and Airline</strong>: position on horizontal and vertical axes. </li>
<li><strong style="font-weight: bold; color: orange">Delay in Minutes</strong>: Color in continuous spectrum.
<ul>
<li>The delay minutes are explicitly displayed, easy for identify and compare.</li>
<li>Violate the effectiveness of Salience: some cells of missing data are colored in white which are much salient than other cells. </li>
</ul>
</li>
<li><strong style="font-weight: bold; color: red">Year</strong>: 2D Spatial Position (two axes).
<ul>
<li>Channel Redundancy: The year can be represented on a 1-D axis, but it is situated within a 2-D coordinate system.</li>
</ul>
</li>
</ul>
<h3>Improvements</h3>
<ul>
<li>Use "nan" to represent cells of missing data, color them with black color to make them less salient. </li>
<li>Because year is of interval data scale, we can 1D axis to better model the trend. </li>
<li>Use animation to show the change of delay over the years.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
function switchToImage(index) {
if (index === 1) {
document.getElementById("container1").style.display = "block";
document.getElementById("container2").style.display = "none";
} else if (index === 2) {
document.getElementById("container1").style.display = "none";
document.getElementById("container2").style.display = "block";
}
}
</script>
</body>
</html>