-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (112 loc) · 8.4 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
<!DOCTYPE html>
<html ng-app="schoolData">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Matthew Clark</title>
<meta name="description" content="Thoughts and writings about technology by Matthew Clark.">
<link rel="canonical" href="http://matthewclark.ca/ontario-school-boards/">
<!-- MY STYLES -->
<link rel="stylesheet" href="/assets/Zwitty-1.0.0.css">
<link rel="stylesheet" href="css/style.css">
<link href='//fonts.googleapis.com/css?family=Roboto:400,400italic,500,700' rel='stylesheet' type='text/css'>
<!-- LIBRARIES -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/queue-async/queue.js"></script>
<!-- MY JAVASCRIPT -->
<script src="js/schools.js"></script>
<script src="app/js/script.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60395816-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<!-- Oh look I am here -->
<body>
<header id="site-header">
<div id="avatar-container">
<a href="/">
<img id="author-picture" src="/assets/images/Clark-Matthew.jpg" class="img-rounded"/>
</a>
<p id="author-name">Matthew Clark</p>
<p id="author-intro" class="visible-md-block visible-lg-block">Computer Scientist</p>
<nav>
<ul id="nav" class="list-inline hidden-md hidden-lg">
<li><a href="http://matthewclark.ca">About</a></li>
<li><a href="http://matthewclark.ca/blog">Blog</a></li>
<li><a href="http://matthewclark.ca/resume">Résumé</a></li>
<li><a href="http://matthewclark.ca/feed.xml" target="_blank">RSS</a></li>
</ul>
</nav>
<!-- responsive menu -->
</div>
<!-- avatar -->
<div id="nav-container" class="visible-md-block visible-lg-block">
<nav>
<ul class="list-unstyled">
<li><a href="http://matthewclark.ca/">About</a></li>
<li><a href="http://matthewclark.ca/blog">Blog</a></li>
<li><a href="http://matthewclark.ca/resume">Résumé</a></li>
<li><a href="http://matthewclark.ca/feed.xml" target="_blank">RSS</a></li>
</ul>
</nav>
</div>
<!-- menu -->
<footer class="visible-md-block visible-lg-block">
<a href="https://twitter.com/MatthewThoClark"><i class="fa fa-twitter fa-4x"></i></a>
<a href="https://www.linkedin.com/in/matthewthoclark"><i class="fa fa-linkedin fa-4x"></i></a>
<a href="https://github.com/Zwitty/"><i class="fa fa-github fa-4x"></i></a>
</footer>
<!-- footer -->
</header>
<div id="page-wrap">
<div id="page-content">
<div id="content">
<vis-controls></vis-controls>
<h2 id="title">Ontario</h2>
<div id="vis"><div id="on"></div></div>
<div id="scale">
<span>Low</span>
<img src="data/scale.png"></img>
<span>High</span>
</div>
<div id="enrol"></div>
<!-- Writing -->
<h1>The Visualization</h1>
<p>The purpose of this visualization is to show the relationship of the number of students enrolled in each district based on Enrolment, Gender and French Language courses. For this visualization only two academic years are available 2011-2012 and 2012-2013.</p>
<p>The visualization was creating using the <a href="http://d3js.org/" target="blank">D3.js</a> library.</p>
<h2>How to Use</h2>
<p>Once loaded you are presented with four options and a button, the four default options are to view english public school districts by enrolment for the 2011-2012 academic year. Before selecting update a map of Southern Ontario is displayed, this is where the school districts will be loaded.</p>
<p>After making your selection a choropleth map is displayed showing the data type going from the smallest value (red), to the largest value (blue). As expected the Toronto district school board has the most number of students enrolled.</p>
<p>By hovering over different school districts a box will be shown that will display the school district name, the number of students enroled in the district and the website for that district. Once you have visited that district the saturation will decrease to let you know you have visited it.</p>
<p>If a district is clicked a barchart will allow you to see additional information about the school district, each data type shows different types of information. For example if the data type is enrolment a barchart showing the number of students in each grade will appear. Hovering over the bars of the barchart will display another box showing the district name and exact number of students enrolled. Again after hovering the saturation will decrease to let you know you have visited it.</p>
<h2>The Data</h2>
<p>For this visualization there are two types of data being used, the first is the boudary definitions for Ontario and the school districts and the second is the enrolment data for the four types of data.</p>
<h3>Boundary Files</h3>
<p>The first boudary file is Ontario, this file is provided as a Shapefile that can be used with propritary software. In order to use this file with <a href="http://d3js.org/" target="blank">D3.js</a> it needed to be converted to the geoJSON format, after that was complete it could then be displayed.i</p>
<p>The source of the Ontario Boundary file can be found <a href="https://www.javacoeapp.lrc.gov.on.ca/geonetwork/srv/en/main.home?uuid=0b975965-7325-414f-ac8d-dd3981a9cbe4" target="blank">here</a>, this is hosted by the Ontario government and needs to be requested.</p>
<p>The other four banday files also needed to be converted and contain the boundary information for the four types of school districts. The source of the four types of school districts can be found <a href="http://maps.library.utoronto.ca/cgi-bin/files.pl?idnum=1513&title=Ontario+School+Boards+Boundary+File" target="blank">here</a>, this is hosted by the University of Toronto.</p>
<h3>Data Files</h3>
<p>The data files that drive this visualization are all contained on the Ontario Open Data website. In order to use this data in this visualization the data first needed to be converted into CSV format, this was done using Microsoft Excel. It is also worth noting that some of the headers were also changed to be more concise in the visualization. In total there are four data files.</p>
<p>There are two files that drive the Enrolment visualization. Enrolment by grade for elementary schools which can be found <a href="https://www.ontario.ca/data/enrolment-grade-elementary-schools" target="blank">here</a> and enrolment by grade for secondary schools, which can be found <a href="https://www.ontario.ca/data/enrolment-grade-secondary-schools" target="blank">here</a>. These two files were merged to become one file that contained both elementary and secondary, one interesting find about this data is that some districts only have elementary schools with no secondary and some have only secondary.</p>
<p>For the language data type we can see three types of french enrolment, core, extended and immersion. This data contained both elementary and secondary schools without the need to change it, some headers were still changed however. The data for this can be found <a href="https://www.ontario.ca/data/french-second-language-enrolment" target="blank">here</a>.</p>
<p>While we have two selection for gender they both come from the same dataset, by selecting each gender only the choropleth map will change showing the total number of the selected gender enroled. This data can be found <a href="https://www.ontario.ca/data/school-enrolment-gender" target="blank">here</a>.</p>
<h2>Missing Data</h2>
<p>While using the visualization you may notice that the choropleth map may be black instead of red or blue, this indicated that there is no data for this district. to view this the French Public school board has no data for any of it's districts. I left these in the visualization because the missing data will still tell interesting stories.</p>
<!-- End Writing -->
<script type="text/javascript">
init();
</script>
</div>
</div>
</div>
<script src="/assets/Zwitty-1.0.0.js"></script>
</script>
</body>
</html>