generated from DS4200-S23-Class/hw-03
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (127 loc) · 4.67 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="ext.js"></script>
<title>hw-03</title>
</head>
<body>
<h1>hw-03: Interactive Webpage, and Marks & Channels</h1>
<div class=row>
<div class="column">
<img src="./img/vis1.png" alt="What Would 2016 Look Like if Just Women Voted">
</div>
<div class="column">
<h3>Marks</h3>
<ul>
<li>Interlocking Areas</li>
</ul>
<h3>Channels</h3>
<ul>
<li>Color hue</li>
<ul>
<li>Identity, categorical attribute to describe presidental affiliation.</li>
<li>This is a good mapping because there are only two possible choices according to this visualization, and the colors are in stark contrast with one another to differentiate them. It is also consistent to the colors of the political parties each candidate belongs to.</li>
</ul>
<li>Position</li>
<ul>
<li>Identity geographical location of state.</li>
<li>This is a good choice because it helps demonstrate distribution of party affiliation accurate to the real US map and identify state locations.</li>
</ul>
<li>Shape</li>
<ul>
<li>Identity, shape of each state in the US. </li>
<li>Its a good choice because it helps to easily distinguish between each state. </li>
</ul>
</ul>
<h3>Colormap</h3>
<ul>
<li>Categorical</li>
<ul>
<li>Represents political party affiliation</li>
<li>There are three different categories being represented, democrat, republican and mixed. Although a mixed category may imply that the data is divergent, it is instead categorical because there is no scale of colors. Every state fits into one of three categories with nothing in between. </li>
</ul>
</ul>
</div>
</div>
<div class=row>
<div class="column">
<img src="./img/vis2.png" alt="The Sweet Spot">
</div>
<div class="column">
<h3>Marks</h3>
<ul>
<li>Points</li>
<li>Lines</li>
</ul>
<h3>Channels</h3>
<ul>
<li>Position on common scale</li>
<ul>
<li>Position on two common axes reflects magnitude of exit velocity and launch angle</li>
<li>This is pretty standard for a graph, and plotting two related statistics against each other can show us trends in data, as this graph does.</li>
</ul>
<li>Color hue</li>
<ul>
<li>Categorizes identity into either above or below average scoring value.</li>
<li>This is a good choice, as both colors are clear and distinct and help identify what large swaths of the graph are attributed to a "bad hit".</li>
</ul>
<li>Color saturation</li>
<ul>
<li>Shows magnitude of the category any given data point</li>
<li>This is a very good choice, as it helps differentiate between when a hit is becoming good(or progressively worse), and helps identify areas that are the best or worst hits.</li>
</ul>
</ul>
<h3>Colormap</h3>
<ul>
<li>Divergent</li>
<ul>
<li>Diverges around a neutral LWTS to show how good or bad the hit was for the score.</li>
<li>This is a very good choice, as it helps create a gradient across the graph to show interesting trends of information, as well as brings in new data that otherwise would not have been obvious.</li>
</ul>
</ul>
</div>
</div>
<div class=row>
<div class="column">
<img src="./img/netflix_vis.png" alt="Netflix movies">
</div>
<div class="column">
<h3>Marks</h3>
<ul>
<li>Points</li>
</ul>
<h3>Channels</h3>
<ul>
<li>Position on common scale</li>
<ul>
<li>Reflects magnitude of length of movie and date movie was released across two axes.</li>
<li>This is a good choice, as it helps us identify a (lack of) trend between release date and time of a movie easily via positions.</li>
</ul>
<li>Color</li>
<ul>
<li>Reflects the rating of the movie for each point.</li>
<li>This is a good choice because it allows the audience to compare the movies based on their ratings.</li>
</ul>
</ul>
<h3>Colormap</h3>
<ul>
<li>Categorical</li>
<ul>
<li>Differentiates rating of movie by strong colors.</li>
<li>This is a good choice, as there are so many ratings of movies it is hard to from them into a gradient without it being too difficult to tell individual rating apart from one another, so a categorical approach works best.</li>
</ul>
</ul>
</div>
</div>
<div>
<h2 id=shift>Acknowledgements</h2>
<ul>
<li>https://www.w3schools.com/html/default.asp</li>
<li>https://www.w3schools.com/css/default.asp</li>
</ul>
<button onclick="changecolor()">Change colors!</button>
</div>
</body>
</html>