-
Notifications
You must be signed in to change notification settings - Fork 0
/
assignment1.html
171 lines (157 loc) · 5.86 KB
/
assignment1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment 1</title>
</head>
<body>
<h1>CMPS-3360 Assignment 1</h1>
<span style="font-size:150%;">Carolina Hurtado Pulido</span>
<br/>
<hr/>
<br/>
<br/>
<script>
var svgns="http://www.w3.org/2000/svg";
var data = [10,8,13,9,11,14,6,4,12,7,5];
</script>
<div>
<h2>1a. Bar Chart</h2>
<svg id="svg1" width="500" height="300">
<text x="30" y="10">20</text>
<text x="30" y="72">15</text>
<text x="30" y="135">10</text>
<text x="35" y="197">5</text>
<text x="35" y="260">0</text>
<rect id="frame" x="50" y="10" width="400" height="250"
style="fill:white; stroke:black; stroke-width:1 px"/>
</svg>
<script>
var w=20;
for(i=0; i<data.length;i++){
var x_a=65+(35*i);
var y_a=10+((20-data[i])*12.5);
var h=260-y_a;
mainSVG=document.getElementById("svg1");
var rect=document.createElementNS(svgns, "rect");
rect.setAttribute("x",x_a.toString());
rect.setAttribute("y",y_a.toString());
rect.setAttribute("width",w.toString());
rect.setAttribute("height",h.toString());
mainSVG.appendChild(rect);
}
</script>
</div>
<div>
<h2>1b. Line Chart</h2>
<svg id="svg2" width="500" height="300">
<text x="30" y="10">20</text>
<text x="30" y="72">15</text>
<text x="30" y="135">10</text>
<text x="35" y="197">5</text>
<text x="35" y="260">0</text>
<rect id="frame" x="50" y="10" width="400" height="250"
style="fill:white; stroke:black; stroke-width:1 px"/>
</svg>
<script>
for(i=0; i<(data.length-1);i++){
var x_1=65+(35*i);
var x_2=65+(35*(i+1));
var y_1=10+((20-data[i])*12.5);
var y_2=10+((20-data[i+1])*12.5);
mainSVG1=document.getElementById("svg2");
var line1=document.createElementNS(svgns,"line");
line1.setAttribute("x1", x_1.toString());
line1.setAttribute("y1", y_1.toString());
line1.setAttribute("x2", x_2.toString());
line1.setAttribute("y2", y_2.toString());
line1.setAttribute("stroke", "black");
line1.setAttribute("stroke-width", 2);
mainSVG1.appendChild(line1);
}
</script>
</div>
<div>
<script src="scores.js" charset="utf-8"></script>
<h2>2a. Scatterplot</h2>
<svg id="Scatter" width="1000" height="1000">
<rect id="frame" x="50" y="50" width="900" height="900"
style="fill:white; stroke:black; stroke-width:1 px"/>
<text x="500" y="990">SATM</text>
<text x="30" y="35">SATV</text>
<text x="70" y="70">ACT - Point size (Values divided by 2.5)</text>
<text x="70" y="85">GPA - Point color (ligh are large values, dark are small values) </text>
</svg>
<script>
var SATM1=scores.map(({SATM})=>SATM);
var SATV1=scores.map(({SATV})=>SATV);
var ACT1=scores.map(({ACT})=>ACT);
var GPA1=scores.map(({GPA})=>GPA);
console.log(Math.min.apply(Math, SATM1));
console.log(Math.max.apply(Math, SATM1));
console.log(Math.min.apply(Math, SATV1));
console.log(Math.max.apply(Math, SATV1));
console.log(Math.min.apply(Math, ACT1));
console.log(Math.max.apply(Math, ACT1));
console.log(Math.min.apply(Math, GPA1));
console.log(Math.max.apply(Math, GPA1));
for(i=0; i<ACT1.length;i++){
xc=SATM1[i]; //To compensate translation
yc=1000-SATV1[i]+50; //To flip y coordinates
rc=ACT1[i]/2.5; //Scaled to better visualization 1 unit in graph 3 units in data
red=10*(GPA1[i]-1);
green=60*(GPA1[i]-1);
blue=70*(GPA1[i]-1);
mainSVG2=document.getElementById("Scatter");
var point1=document.createElementNS(svgns, "circle");
point1.setAttribute("cx", xc.toString());
point1.setAttribute("cy", yc.toString());
point1.setAttribute("r", rc.toString());
point1.setAttribute("style", "fill:rgb(" +red.toString()+ "," +green.toString()+ ","+blue.toString()+ ")");
point1.setAttribute("stroke", "#bcbcbc");
mainSVG2.appendChild(point1);
}
for (i=0; i<10;i++){
var cordX=20;
var Y1=1000;
var coordY=Y1-(i*100);
var AxisY=document.createElementNS(svgns, "text");
AxisY.setAttribute("x", cordX.toString());
AxisY.setAttribute("y", (i*100).toString());
AxisY.textContent=coordY.toString();
mainSVG2.appendChild(AxisY);
}
for (i=0; i<10;i++){
var X1=950;
var cordY=970;
var coordX=X1-(i*100);
var AxisX=document.createElementNS(svgns, "text");
AxisX.setAttribute("y", cordY.toString());
AxisX.setAttribute("x", coordX.toString());
AxisX.textContent=coordX.toString();
mainSVG2.appendChild(AxisX);
}
</script>
</div>
<div>
<h2>2b. Color Justification</h2>
<p style="font-size:150%;">I decided to use a scale of blue-green to graph the scatter plot,
in this case, darker colors show low values of GPA and lighter colors larger GPA values.
As the GPA is a quantitative variable, a color scale allows one to compare and have an idea
of how the values vary. To have the blues that I got I created the RGB values using the GPA
directly, I gave less importance to the red channel, while the blue and green channels were
multiplied by larger numbers. Also, I used a fine grey stroke line to be able to differentiate
each circle better, which I think is particularly useful on the area with a great amount of
light blue circles (right-upper corner). </p>
<h2>2c. Visualization Critique</h2>
<p style="font-size:150%;"> First, my graph does not have a clear legend, I thought of doing it,
but I would need to do one for size and another one for color, which can saturate the figure.
I have seen that this can be solved with a good caption - at least in geosciences papers.
Secondly, the size of the circles is scaled to see all or almost all the circles, but the
values are close to each other, I think it would be better to modify (normalize) the data.
Finally, I created the RGB values linearly (multiplications and sums), but I have seen in
color websites and GIS software that they divide the values in ranges, this may be more
accurate.</p>
</div>
</body>
</html>