-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (117 loc) · 7.85 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
149
150
151
152
153
154
155
156
157
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>The Grainger Engineering Metro Map</title>
<meta property="og:title" content="The Grainger Engineering Metro Map">
<meta name="twitter:title" content="Grainger Engineering Metro Map" />
<meta property="og:description" content="{{title}}">
<meta property="og:url" content="{{url}}">
<meta property="og:type" content="website">
<meta property="fb:app_id" content="507762892745700" />
<meta property="og:image" content="{{1200x630_img}}">
<meta name="twitter:image" content="{{1200x630_img}}" />
<link rel="icon" type="image/png" href="/static/d7.png" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arimo|Merriweather:400,700|Playfair+Display:400,700|Ropa+Sans&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<link href="d7/d7.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<header class="container">
<div class="row">
<div class="col-lg mt-1 d7-wordmark">
<div class="d7-logo">
<a href="/">d<sup>7</sup></a>
</div>
<div class="d7-header">
<a style="font-weight: bold;" href="/">Data Science Research Collaborative</a>
<div class="small" style="margin-top: -4px; font-size: 10px;"><a href="https://illinois.edu/">University of Illinois at Urbana-Champaign</a></div>
</div>
</div>
<nav class="col-lg">
<ul class="list-inline" style="text-align: right;">
<li><a href="/visualizations/">Projects & Visualizations</a></li>
<li><a href="/people/">People</a></li>
</ul>
</nav>
</div>
</header>
</div>
<div class="divider"></div>
<div class="container d7-viz">
<!-- Begin project-specific content -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<div>
<h1>The Grainger Engineering Metro Map</h1>
<div class="authors">
<b>Senior Thesis of <a href="http://tamaraniac.com/">Tamara Nelson-Fromm</a></b>, Computer Science '20
</div>
<div class="authors mb-1" style="font-size: 10px;">
Advised By: <a href="http://waf.cs.illinois.edu/">Wade Fagen-Ulmschneider</a>
</div>
<div class="authors">
<b>Published On</b>: <span itemprop="datePublished" content="2020-05-11">May 11, 2020</span>
</div>
</div>
<hr />
<h3>Introduction</h3>
<p>Majors in the Grainger College of Engineering at The University of Illinois at Urbana-Champaign (UIUC) tend to require long chains of specific courses in order to earn a degree. While many of these required courses are common across multiple majors, the existing <a href="http://catalog.illinois.edu/undergraduate/">University Catalog</a> and <a href="https://grainger.illinois.edu/academics/undergraduate/majors-and-minors/cs-map">Curriculum Map</a> listings focus only on individual courses of study. This work presents a unified layout of the required courses in all Engineering majors (including Chemical Engineering) at UIUC, laid out in the classical form of a metro map, where each course is a station and each major is a line. By drawing majors in a computationally generated metro map format, we seek to create a design that better portrays the prerequisite chains and courses shared between different majors.</p>
<h3>The Metro Map</h3>
<p>Each station denotes a single course. Its radius indicates how many majors travel through the course. Hover over any station to learn more about the course, and view the majors connected to it.</p>
<p>Each major is given a unique color, and represented as a train line.</p>
<div id="sizer"></div>
<div id="chart">
<div style="min-height: 600px; text-align: center; color: hsl(274, 54%, 25%);">
<div class="spinner-border" role="status"></div><br>
<b>Building the Subway Map...</b>
</div>
</div>
<h3>The Downtown of Engineering</h3>
<p>The left of the graph is dominated by a series of stations – ENG 100, MATH 221-241, PHYS 211 and 212 – that are required by all represented majors. As the algorithm used to computationally plot this metro map begins with a force-directed graph that is then iterated upon to prioritize metro-map-like shapes, these courses are displayed close together due to the large number of majors that travel between them. In many real world metro maps, the downtown area is more condensed, with many of the available lines converging into a cluster of the busiest stations. The layout of these most-traveled stations mimic that part of a metro map, if denser than normal: it is very unusual for a true metro system to contain any station that more than 8 lines travel through – much less 15!</p>
<center><div id="downtown"></div></center>
<h3>The Majors</h3>
<p>The following graphs represent the metro line of each major, generated separately from the rest of the map. The longest major shown here is Aerospace Engineering, with 33 stations, and the shortest major is Engineering Physics. The most co-dependent majors are Computer and Electrical Engineering, which share 17 of their stations, and are plotted together.</p>
<h4>Aerospace Engineering</h4>
<center><div id="Aerospace"></div></center>
<h4>Agricultural and Biological Engineering</h4>
<center><div id="Agricultural"></div></center>
<h4>Bioengineering</h4>
<center><div id="Bioengineering"></div></center>
<h4>Chemical and Biomolecular Engineering</h4>
<center><div id="Chemical"></div></center>
<h4>Civil Engineering</h4>
<center><div id="Civil"></div></center>
<h4>Computer and Electrical Engineering</h4>
<center><div id="ECE"></div></center>
<h4>Computer Science</h4>
<center><div id="CS"></div></center>
<h4>Engineering Mechanics</h4>
<center><div id="Mechanics"></div></center>
<h4>Engineering Physics</h4>
<center><div id="Physics"></div></center>
<h4>Industrial Engineering</h4>
<center><div id="Industrial"></div></center>
<h4>Materials Science and Engineering</h4>
<center><div id="MatSE"></div></center>
<h4>Mechanical Engineering</h4>
<center><div id="Mechanical"></div></center>
<h4>Nuclear, Plasma, and Radiological Engineering</h4>
<center><div id="NPRE"></div></center>
<h4>Systems Engineering</h4>
<center><div id="Systems"></div></center>
<h3>More Details</h3>
For more information on how this was created, you can watch this video:
<center>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/OaSprBuBmz0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</center>
<!-- All the JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="js/d3.tip.js"></script>
<script src="js/visualization.js"></script>
<!-- End project-specific content -->
</body>