Skip to content

Instantly share code, notes, and snippets.

@mattykuch

mattykuch/barchart.js

Created January 29, 2017 15:28
Show Gist options
  • Save mattykuch/4a728cdc96ef17bbc43ef909b7fa4d9c to your computer and use it in GitHub Desktop.
Save mattykuch/4a728cdc96ef17bbc43ef909b7fa4d9c to your computer and use it in GitHub Desktop.
Download ZIP
[1st Iteration] Bar Chart: Top 100 : Best Performing O'level Schools in Uganda
Raw
barchart.js
// Create SVG
var svg = d3.select("#barchart")
.append("svg")
.attr("width", 1000)
.attr("height", 3400);
// Logic to handle Tooltip on Hover of Bar
var hoveron = function(d) {
console.log('d', d, 'event', event);
var div = document.getElementById('tooltip');
div.style.left = event.pageX + 'px';
div.style.top = event.pageY + 'px';
//Fill white to highlight
d3.select(this)
.style("fill", "white");
//Show the tooltip
d3.select("#tooltip")
.style("opacity", 1);
//Populate name in tooltip
d3.select("#tooltip .name")
.text(d.school);
//Populate value in tooltip
d3.select("#tooltip .value")
.text(d.pAverage + "%");
}
var hoverout = function(d) {
//Restore original color fill
d3.select(this)
.style("fill", "Steelblue");
//Hide the tooltip
d3.select("#tooltip")
.style("opacity", 0);
}
// Entering data
d3.csv("olevelperformancedata.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(a.pAverage, b.pAverage)
});
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x",0)
.attr("y", function(d, i) {
return i*10;
})
.attr("width", function(d) {
return d.pAverage * 10;
})
.attr("height",8)
.on("mouseover", hoveron)
.on("mouseout", hoverout)
.style("cursor", "pointer")
.style("stroke", "#777")
.style("fill", "Steelblue");
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top 100 : Best Performing O'level Schools in Uganda</title>
<!-- CSS libraries -->
<!-- Custom CSS styles -->
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div class="container">
<h3> Top 100 : Best Performing O'level Schools in Uganda</h3>
<h4> The length of each bar shows the average percentage of students who achieved a 1st Grade (or Division I) in UCE, from 2000 to 2015</h4>
<div id="initial">
<strong></strong>
</div>
<div id="barchart"> <!-- barchart container --> </div>
</div>
<div id="footer">
<strong>Data sources</strong> : Data from New Vision Newspaper: 24th January 2017, Article by Conan Busingye
</div>
<!-- Tooltip div -->
<div id="tooltip">
<p class="name"></p>
<p class="value"></p>
</div>
<!-- JS Libraries -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- Custom JS code -->
<script src="barchart.js"></script>
</body>
</html>
Raw
olevelperformancedata.csv
rank school p2000 p2001 p2004 p2005 p2006 p2007 p2008 p2010 p2011 p2012 p2013 p2014 p2015 pAverage
1 Mt. St. Mary's Namagunga 99.3 99.3 100 99.3 97.9 98.6 99.3 100 99 99.3 99.3 97.2 100 99.1
2 Uganda Martyrs SS Namugongo 100 100 100 98.9 100 99.5 98.3 97.9 97 97 98.77 98.16 96.1 98.6
3 St. Marys SS Kitende 97 98 98 97 98 96.9 97 97.3 98 99.77 99.8 97.9
4 St. Marys Col. Kisubi 96.9 97.4 98.9 97.1 96.1 98.3 100 98.4 98 99 96.38 95.48 86.7 96.8
5 St. Henrys Col. Kitovu 93.4 95.1 100 98.7 98.5 98.4 94.3 97.4 95.7 91.53 85.91 91.7 95.1
6 Namilyango Col. 89.3 96.5 97.3 97 97.5 89.3 96.3 94.4 100 94.5 85 90.41 92.7 93.9
7 Gayaza HS 98.1 98.1 95.6 93.6 93.9 86.2 86 95.8 99 86.6 97.03 94.05 88.4 93.2
8 Kings Col. Budo 92.9 93.8 98.2 95.8 92.4 87.7 88.9 94.8 97 81.3 85.99 91.24 89.8 91.5
9 Nabisunsa Girls Sch 97.9 89.5 94.7 98.6 91 96.6 93.4 93.2 86 86.3 80.09 87.94 88 91
10 Ntare Sch. 86.1 80.2 92.4 97.3 99.1 89.9 89.2 92.3 96 96.8 85.5 90.95 80.2 90.5
11 St. Josephs SS Naggalama 81 78.7 96.7 99.2 97.3 84.9 80.7 94 87.7 86.7 84.85 87.67 97.1 89
12 St. Josephs Girls Nsambya 88.5 69.6 89.2 89.3 93.4 82.1 91.1 91.9 95 83 81.52 94.05 93.7 87.9
13 Maryhill HS 85.1 90.5 88.2 99.2 92.6 83.6 82 91.5 90 83 69.87 94.09 84.7 87.3
14 Trinity Col. Nabbingo 94.2 86.2 92.3 96.6 81.3 80.5 91 82.3 89 84 76.15 78.35 90.5 86.3
15 The Academy St Lawrence 82.35 91.3 85 86.2
16 Ndejje SS 92.8 92.1 92 91.3 74 76.1 80.1 83.2 89 88.6 75.55 77.27 80.2 84
17 St.Pauls Sem. Kabale 97.1 65.7 95 97.6 90 78.3 52.8 80.7 75 95.35 90.6 83.5
18 Seeta HS Mukono 70.6 70 86 88 83.04 91.59 94.5 83.4
19 Nsambya Hillside SS 79 79 84 86 85 80 82.2
20 St. Charles Lwanga Sem. 82.35 90.63 69.4 80.8
21 Kitabi Sem. 100 86 81.5 57.7 72.4 75 96.9 72.2 97 61.8 69.23 94.94 77.2 80.1
22 Kisubi Sem. 96.3 50 66.7 74.3 100 77.1 79.5 87.8 88 93.6 70.21 79.49 77.2 80
23 Immaculate Heart Girls 90.9 68.1 90.4 82.5 66.2 63.4 79.4 59.9 78.4 86.9 87.79 89.95 80.3 78.8
24 Seeta HS 38.8 58.3 82.8 92.9 72.8 66.3 87.5 81 91.4 87.22 93.06 91.7 78.6
25 Kibuli SS 93.7 93 81.6 85.7 99.6 75.8 73.7 80.2 83.9 84 59.49 56.85 52.4 78.5
26 Bukalasa Minor Sem 95.8 82.9 92.3 80 100 60.4 67.7 63 90 86 39.29 58.06 100 78.1
27 Our Lady Of Africa SS Namilyango SS Namilyango 60.4 87.38 86.1 78
28 Light Academy SS 70 70 73 82 80 78 85.1 80 80 80 77.8
29 St. Joseph Of Nazareth HS HS 71.05 72.31 89.3 77.5
30 Mbarara HS 58.4 68.6 74.3 90.5 90.9 87 84.2 78.2 85 79.3 69.87 71.83 65.4 77.2
31 Makerere Col. Sch. 91.8 84.9 87.6 88.3 75.2 68 70.4 70.9 71 67.4 70 78.48 70 76.5
32 London Col. Of St.lawrence 71.4 71.9 40.4 39.7 45.2 86.8 83 94.1 100 100 97.3 75.4
33 Kawempe Muslim SS 85.3 90.8 84.3 87.7 87.2 61.9 75.2 68.8 82.4 13.5 85.17 81.51 77 75.4
34 Buddo SS 68 70 76 77 80 72 89 80 80 80 70 60 68 74.6
35 Naalya SS Namugongo 64.2 61.5 88.2 81.1 50 62 68.9 60.2 85 85 77.59 89.09 80 73.3
36 Bweranyangi Girls Sch 91.3 66.5 67.9 86.4 87.8 65.6 48.2 59.4 85 64.8 70.4 66.17 66.5 71.2
37 St. Joseph's Voc. Sch. Mbarara 92.5 80.9 67.1 74.4 69 25 32.4 80 84.3 82.14 87.5 77.9 71.1
38 Iganga SS 80.3 44.5 64.6 80.6 81.2 57.3 60.7 65.8 69 80 73.39 93.5 70.9
39 Bp. Cipriano Kihangire SS 76.5 56.5 47.2 57 62.5 75.2 71 57.6 78.28 85.15 96.2 69.4
40 Seroma Christian HS 60 70 68 74 60 70 70 72 60 75 75 70 72 68.9
41 Kiira Col. Butiki 87.9 58.3 67.4 79.3 65.3 56.7 63.6 63 62.1 70.8 74.86 71.17 67.4 68.3
42 Seeta HS Green Campus Mukono Mukono 70 76.92 57.9 68.3
43 Gombe SS 89.9 71.5 66.5 84.4 90 62.2 68.1 64 68 60.4 45.45 56.21 54.9 67.8
44 St. Joseph's Sem. Nyenga 70.8 31.3 94.7 100 79.4 65.6 75 63.9 63.89 51.61 47.6 67.6
45 Katikamu SS 77.6 85.5 84.5 90.2 100 76.7 63.1 55.8 65.4 47.3 43.86 34.34 44.7 66.8
46 Nadiket Sem. Moroto 75 42.9 77.8 50 66.7 73.7 32 87 93 45.45 71.43 77.8 66.1
47 Jinja Col. 77.3 69.2 71 72.7 69.4 65.5 59.7 55.8 66.5 65 59.67 65 60.9 66
48 Ocer Campion Jesuit Col. 52.38 74.3 63.3
49 Our Lady Of Good Counsel 97.2 81.5 88.7 76.9 62.9 62.2 49.2 59.3 43 42 42.36 47.83 40.7 61.1
50 St. Kizito SS Kabowa 70.4 61.1 68.6 83.3 60 48.5 40 79.2 51.4 36 59.8
51 Naalya SS Bweyogerere 28.3 53.3 48.9 57.4 34.2 53.3 64 66 75.56 82.4 94.1 59.8
52 Merryland HS Entebbe 33.8 55.3 41.4 23.7 27.5 61.6 83 82.7 95.45 82.81 66.5 59.4
53 St. Lawrence City. HS Horizon 71.4 72.9 85.7 82.4 49.1 47.9 20.7 25.3 34 39.7 50 90 96 58.9
54 Tororo Girls Sch. 68.9 41.5 59.1 60.5 48.9 52 71.4 57.9 47 73.7 45.81 67.15 68.8 58.7
55 Uganda Col. Kibubu 72.2 51.7 50 58
56 St. Mary's SS Kitende Annex Annex 23.24 67.94 82.4 57.9
57 St. Augustine's Col. Wakiso 62.9 62.1 71.6 90.9 27.4 41.3 56.8 38.7 56.5
58 Brilliant HS Kawempe 27.3 30.8 48.3 62.3 70 45.7 47.7 54.2 45 47 76.24 71.29 73.3 53.8
59 St. Mary Goretti's Col. Katende 72.3 58 48.6 35.4 41.4 49.1 59.6 95 39.3 45.81 46.45 42.9 52.8
60 Mengo SS 58.5 54.5 68.9 68.3 56.9 47.7 54.2 49.3 46 40.7 38.56 44.6 55.4 52.6
61 Namirembe Hillside HS 57.7 44.9 47.9 60.7 29.8 30.9 27.1 66 55.2 69.09 54.1 75.4 51.6
62 St. Mary's Girls' Col. Aboke 69.8 45.8 60 36.1 22.7 26.9 39.6 65.3 7.8 70.83 94.12 76 51.2
63 Sos Hermann Gmeiner SS 79.2 75.8 66.7 40.7 44.8 77.8 25.6 31.03 59.38 4.1 50.5
64 St. Kaggwa Bushenyi HS 79.8 36.4 57.1 62.8 54.4 18.7 33.3 61.1 48.4 54.7 58.33 39.29 42.7 49.8
65 St. Kalemba SS 53.3 34.8 44.5 67.1 70.5 59.1 30.2 35.1 49.3 49.3
66 Holy Cross Lake View SS Jinja 68.5 78 86 80.7 36.1 33.9 35.5 45.8 21.9 25 38.24 40 49.1
67 Kigezi HS 70.3 50.4 70.1 69.1 69.4 29.7 49.2 40.6 45.9 29.5 50.24 31.6 30.9 49
68 Kabojja SS 68.6 52.4 61.5 75 52.8 33.3 6.9 40 48.8
69 Busoga Col. Mwiri 88.7 70.1 3 75.1 46.9 45 45.5 64 44 29.22 46.1 19.8 48.1
70 Rubaga Girls' SS 61.4 38 86.8 78 35.2 51.7 31.6 47.3 47 47 20.3 44.07 28 47.4
71 Hope SS Bbira 43.33 50 46.7
72 St. Cyprian Chavanod Col. 34.29 55 49 46.1
73 St. Leo's Col. Kyegobe 88.8 91.4 48.6 52 53.6 27.5 46.1 17 40.2 20 55.08 11.8 46
74 Arch Bishop Flynn SS 20 61.36 55.6 45.6
75 Muntuyera HS Kitunga 75.8 52.1 53.4 60.4 56.7 38 32.6 37 46 33 30.58 47.32 24.1 45.2
76 St. Joseph's Col. Layibi 78.8 72.6 45.5 51.2 38 24.6 24.5 49 37.06 28.93 41.5 44.7
77 East HS Ntinda 53.3 62.5 57.3 68.7 81 38.8 26.5 69 32 28 14.29 35.87 12.9 44.6
78 St. Peter's Col.Tororo 52.8 45.4 48.6 38.7 47.8 41 32 28.9 65 35.8 53.74 49.14 40.9 44.6
79 Notre Dame Academy Buseesa 55 12.5 27.3 42.9 9 31 50 77.78 95 44.5
80 Blessed Sacrement SS Kimaanya 9.8 8.8 16.9 52.5 73.5 72.6 100 19.3 49 40.9 37.99 37.14 56.2 44.2
81 St. Julian HS 44 68.63 18.1 43.6
82 St. Andrew Kaggwa SS 40 50 50 24 30 40 40 44 30 54 40 60 64 43.5
83 SacredHeart Sem. Mubende 52.9 42.9 50 42.1 25 53.6 26.7 20 60 62 7.14 72.22 46.4 43.1
84 St. Augustine Col. Wakiso 36.43 38.61 54 43
85 St.Lawrence SS Ssonde 43.3 39.2 53.4 48.4 70.1 24.8 27.1 34 39.7 35.71 47.78 44.1 42.3
86 St. Daniel Comboni Col. 24 42.42 59.3 41.9
87 St. Paul's Col. Mbale 70 55.2 37.9 43.2 30.9 45.5 20.5 39 29.76 26.97 48.8 40.7
88 Stella Maris Col. Nsube 67.3 47 50.9 52 27.7 34.3 33.1 25.8 38 28.2 28.46 55.38 40.4 40.7
89 Greenhill Academy Kampala 76.6 36.7 53.8 49.4 41.3 37.7 20.5 50.9 35.7 34.7 31.94 26.03 30 40.4
90 Mbogo HS 67 63 58 47.7 52.4 32.8 33.5 24.9 23 35.5 25.51 23.94 32.7 40
91 Aga Khan HS 64.3 23.4 38.7 40 56.3 40 33.3 44 38 14.8 66.67 37.04 20.8 39.8
92 St. Kizito HS Bethany 37.9 19 75.8 58.8 45.7 69.8 49 17.6 23 22.2 26.87 33.33 34.8 39.5
93 Vienna Col. Namugongo 56.7 69.2 52.4 16.4 16.7 27.8 36.4 40 39.4
94 Migadde Col. Bombo 23.66 43.75 50 39.1
95 Christ The King SS Kalisizo 69.2 52 51.9 58.7 55 23.5 30.7 30.3 24 36.2 29.7 26.81 19.1 39
96 Teso Col. Aloet 43.2 38.5 48.6 40 27.9 34 23.5 32.9 51 32.4 41.45 39.44 46.8 38.4
97 Mityana Modern SS 34.7 24.6 32.5 54.5 52.2 25.4 24.2 35.4 46 37.57 43.75 50 38.4
98 Mariam HS Kampala 73.3 71.2 50 55.7 67.4 30 19.6 17.5 41 9.64 6.25 13 37.9
99 Kabalega SS 47.1 38.1 44.5 46 49.4 44.3 30 27.4 53.2 24.1 8.65 42.72 36.7 37.9
100 St. John Bosco Sem. Hoima 61.5 17.9 40.5 23.3 47.9 43.2 34.3 28.6 71.4 0 45.71 21.05 56.7 37.8
Raw
style.css
body {
margin:25px;
}
#barchart {
width: 1000px;
height: 1000px;
border: 1px solid silver;
background: #E6E6E6;
float: left;
}
#tooltip {
position: absolute;
z-index: 2;
background: rgba(255,255,255,0.8);
border-radius: 4px;
width: 115px;
height: 55px;
color: black;
font-size: 14px;
padding: 5px;
top: -150px;
left: -150px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#tooltip p {
margin: 0;
}
#tooltip p.value {
font-weight: bold;
}
}
#initial {
font-size: 1.2rem;
float: left;
}
.container {
width: 1000px;
height: 1100px;
margin: 25px auto 25px auto;
padding: 50px 50px 50px 50px;
background-color: white;
box-shadow: 0 0 20px #ccc;
}
#footer {
border-top: 1px solid silver;
color: #888888;
font-size: 1.25rem;
text-align: center;
margin-top: 1rem;
padding: 0.5rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment