-
Notifications
You must be signed in to change notification settings - Fork 8
/
ch06-project.html
107 lines (87 loc) · 7.19 KB
/
ch06-project.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
<section data-type="chapter" id="chapter06">
<h1>Interlude: Room Usage Project</h1>
<p>
Once again, it’s time to put together what you have learned into a somewhat open-ended project. Presume you are an administrator at a college and need to know how well the classroom buildings are utilized. The github repostiory for this book has a file named <em>roster.csv</em> in the <em>datafiles/chapter06/building_usage</em> directory. The roster file contains data for a list of class sections at a community college. This is real data, except the room numbers have been changed to “anonymize” the data. The file consists of a series of lines like this:
</p>
<pre>24414;201;ACCTG;022;Payroll Accounting;TTH;06:30 PM;08:20 PM;N190
22719;201;ART;012;Two Dimensional Design;MW;01:45 PM;02:35 PM;P204
22719;201;ART;012;Two Dimensional Design;MW;02:45 PM;04:35 PM;P204</pre>
<p>
The columns are the registration ID number, the section number, department, course number, course title, days of the week when the course meets, beginning and ending time, and room number. In the field for the days of the week, Thursday is represented as TH, Saturday as S, and Sunday as SU (yes, there are some Sunday classes).<span data-type="footnote">You may have noticed that the last two lines in the example have the same registration ID and section number. This is not an error. The first of the entries is the lecture part of the course and the second is the lab part. These are distinguished by an “instructional method” column which has not been included in the sample data.</span>
</p>
<p>
The ultimate goal of this chapter is to produce a program that will let you visualize the percentage use of each building at a particular time and day of week. (If you like, you can expand this étude to visualize usage on a room-by-room basis, but building usage is more generally useful. This is because not all rooms are interchangeable. For example, a chemistry lab may appear underutilized, but you can’t put a history class in that room when it’s not in use.)
</p>
<section data-type="sect1" id="ETUDE06-01">
<h1>Étude 6-1: Build the Data Structure</h1>
<p>
You have a lot of options in this étude. Phrasing them in the form of questions:
</p>
<ul>
<li>Should you include the CSV text as a large string?
<ul>
<li>If so, do you include all the columns or just the ones you need for this project?</li>
<li>If you don’t want to have a large string, you may end up writing a node.js program that takes the data file and creates a ClojureScript source file.</li>
</ul>
</li>
<li>How will you index the data?
<ul>
<li>Day of week → time of day → building</li>
<li>Time of day → building → day of week</li>
<li>Building → day of week → time of day</li>
<li>Some other combination</li>
</ul>
</li>
<li>Should the data for time of day be an array, map, or some other data structure?</li>
<li>Should you index days of the week by number or as a map?</li>
<li>What is the granularity of time of day? Hourly, every 30 minutes, every 15 minutes, or
some other unit?</li>
</ul>
<p>Unless you decide on a single level map or vector, you will want to look at the <code><a href="http://clojuredocs.org/clojure.core/get-in">get-in</a></code> and <code><a href="http://clojuredocs.org/clojure.core/assoc-in">assoc-in</a></code> functions for accessing and modifying data in a nested associative structure.
</p>
<p>
In order to calculate the percentage of utilization, you will also need to know the number of distinct rooms in each building. Note that the utilization could be more than 100%. For example, there may be classes that are concurrent in different disciplines; an “introduction to computer technology” might be listed under both BIS (Business Information Systems) and CIT (Computer and Information Technology). Or, an open writing lab may be shared by several English classes at the same time.
</p>
<p>This is <em>your</em> implementation, so you get to make all these decisions. See what I came up with: <a href="#SOLUTION06-ET01" data-type="xref">#SOLUTION06-ET01</a>.</p>
</section>
<section data-type="sect1" id="ETUDE06-02">
<h1>Étude 6-2: Visualizing the Data (Version 1)</h1>
<p>
Now that you have the data in a format that you like, choose a visualization. The one I decided
on originally was to use a map of the campus, which is in a file named <em>campus_map.svg</em> in the <em>datafiles</em> folder in the github repository. The file has each building in a <code><g></code> element with an appropriate <code>id</code>; for example, the SVG for building B starts like this:
</p>
<pre data-type="programlisting" data-code-language="svg"><g>
<title id="group_B">0%</title>
<rect
transform="matrix(0,1,-1,0,0,0)"
y="-123.85256" x="906.50964" height="74.705124" width="102.70512"
id="bldg_B"
style="fill:green;fill-opacity:0;stroke:#000000;stroke-opacity:1" /></pre>
<p>
The program lets you choose a day and time of day; when either of those field changes, the program calculates the percentage of usage of each building and adjusts the <code>fill-opacity</code> and <code><title></code> contents. (I used green for the fill color, because the more the building is in use, the better it is.) <a href="#building_usage_animation_figure" data-type="xref">#building_usage_animation_figure</a> shows what the resulting page looks like. The “play” button will start advancing time 15 minutes every 1.5 seconds and updating the map automatically.
</p>
<figure id="building_usage_animation_figure">
<img src="images/building_usage_1.png" alt="Screenshot pf building usage"/>
<figcaption>Screenshot of Building Usage Animation</figcaption>
</figure>
<p>
See a suggested solution: <a href="#SOLUTION06-ET02" data-type="xref">#SOLUTION06-ET02</a>.
</p>
</section>
<section data-type="sect1" id="ETUDE06-03">
<h1>Étude 6-3: Visualizing the Data (Version 2)</h1>
<p>
I learned a lot of interesting things while writing the preceding étude, but, to be honest, it didn’t look anywhere near as exciting as I thought it would. A more traditional visualization—a bar chart—gives a lot more information in a very readable form, as you can see in <a href="#building_usage_barchart_figure" data-type="xref">#building_usage_barchart_figure</a>.
</p>
<figure id="building_usage_barchart_figure">
<img src="images/building_usage_2.png" alt="Screenshot of barchart of building usage"/>
<figcaption>Screenshot of Building Usage Bar Chart</figcaption>
</figure>
<p>
While it would be an interesting exercise to write a bar chart program, it is easier to use an existing library, so I downloaded <a href="http://www.chartjs.org/">ChartJS</a> (version 1.0, not the alpha version 2.0 as of this writing) and installed the minimized JavaScript in the <em>public</em> directory. You may use any charting package you wish for your solution. If you feel tremendously ambitious, you may write your own.
</p>
<p>
See a suggested solution: <a href="#SOLUTION06-ET03" data-type="xref">#SOLUTION06-ET03</a>.
</p>
</section>
</section>