Skip to content

Instantly share code, notes, and snippets.

@mattykuch

mattykuch/barchart.js

Created February 6, 2017 13:32
Show Gist options
  • Save mattykuch/09d262a646118b1a18ffedbfdefdf3ff to your computer and use it in GitHub Desktop.
Save mattykuch/09d262a646118b1a18ffedbfdefdf3ff to your computer and use it in GitHub Desktop.
Download ZIP
[2nd Iteration] Bar Charts, Not Linked
Raw
barchart.js
//Store width, height and margin in variables
var w = 500;
var h = 1500;
var margin = {top: 40, right: 10, bottom: 20, left: 50};
// Scale the width and height
var xScale = d3.scale.linear()
.range([0,w - margin.right - margin.left]);
var yScale = d3.scale.ordinal()
.rangeRoundBands([margin.top, h - margin.bottom],0.2);
// Creat Axes i.e. xAxis and yAxis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("top");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
// Create SVG
var barchart = d3.select("#barchart")
.append("svg")
.attr("width", w)
.attr("height", h);
// Logic to handle Tooltip on Hover of Bar
var hoveron = function(d) {
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);
}
var activeSchool; //For linked hovering
// Entering data
d3.csv("olevelperformancedata.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(a.pAverage, b.pAverage)
});
//Setting a dynamic domain for the xScale based on Data
xScale.domain([0, d3.max(data, function(d) {
return +d.pAverage;
}) ]);
//Setting a dynamic domain for the yScale based on Data
yScale.domain(data.map(function(d) { return d.rank; } ));
//Rendering the xAxis
barchart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(xAxis);
//Rendering the yAxis
barchart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left -5) + ",0)")
.call(yAxis);
//Make a group for each bar
//var groups = barchart.selectAll("g")
//.data(data)
//.enter()
//.append("g")
//.classed("highlight", function(d) {
//if (d.school == "Makerere Col. Sch.") return true;
//else return false;
//});
// Rendering the rectangles
var rects = barchart.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", margin.left)
.attr("y", function(d, i) {
return yScale(d.rank);
})
.attr("width", function(d) {
return xScale(d.pAverage);
})
.attr("height",yScale.rangeBand)
.on("mouseover", hoveron)
.on("mouseout", hoverout)
.style("cursor", "pointer")
.style("stroke", "#777")
.style("fill", "Steelblue");
// Logic for linking charts
/* barchart.selectAll("rects")
.on("mouseover", function(d) {
activeSchool = d.school;
console.log(activeSchool)
barchart2.selectAll('rects')
.each(function(d) {
if(d) {
if (d.school == activeSchool) {
var div = document.getElementById('tooltip');
div.style.left = event.pageX + 'px';
div.style.top = event.pageY + 'px';
d3.select(this).select("rects")
.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 + "%");
}
}
})
})
.on("mouseout", function() {
//Restore original color fill
d3.select(this)
.style("fill", "Steelblue");
//Hide the tooltip
d3.select("#tooltip")
.style("opacity", 0);
})*/
});
Raw
barchart2.js
//Store width, height and margin in variables
var w2 = 500;
var h2 = 1500;
var margin2 = {top: 40, right: 10, bottom: 20, left: 50};
// Scale the width and height
var xScale2 = d3.scale.linear()
.range([0, w2 - margin2.right - margin2.left]);
var yScale2 = d3.scale.ordinal()
.rangeRoundBands([margin2.top, h2 - margin2.bottom],0.2);
// Creat Axes i.e. xAxis and yAxis
var xAxis2 = d3.svg.axis()
.scale(xScale2)
.orient("top");
var yAxis2 = d3.svg.axis()
.scale(yScale2)
.orient("left");
// Create SVG
var barchart2 = d3.select("#barchart2")
.append("svg")
.attr("width", w2)
.attr("height", h2);
//Function for number formating of school fees data
var valueFormat = d3.format(",");
// Logic to handle Tooltip on Hover of Bar
var hoveron2 = function(d) {
var div = document.getElementById('tooltip2');
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("#tooltip2")
.style("opacity", 1);
//Populate name in tooltip
d3.select("#tooltip2 .name")
.text(d.school);
//Populate value in tooltip
d3.select("#tooltip2 .value")
.text("UGX" + " " + valueFormat(d.fees2017));
}
var hoverout2 = function(d) {
//Restore original color fill
d3.select(this)
.style("fill", "Green");
//Hide the tooltip
d3.select("#tooltip2")
.style("opacity", 0);
}
// Entering data
d3.csv("olevelfeesdata.csv", function(data) {
//console.log(data);
//console.log(data.map(function(d) { return d.rank; } ));
data.sort(function(a, b) {
return d3.descending(+a.fees2017, +b.fees2017)
});
//Setting a dynamic domain for the xScale based on Data
xScale2.domain([0, d3.max(data, function(d) {
return +d.fees2017;
}) ]);
//Setting a dynamic domain for the yScale based on Data
yScale2.domain(data.map(function(d) { return d.rank; } ));
//Rendering the xAxis
barchart2.append("g")
.attr("class", "x axis2")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")")
.call(xAxis2);
//Rendering the yAxis
barchart2.append("g")
.attr("class", "y axis2")
.attr("transform", "translate(" + (margin2.left -5) + ",0)")
.call(yAxis2);
// Rendering the rectangles
var rects = barchart2.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", margin2.left)
.attr("y", function(d, i) {
return yScale2(d.rank);
})
.attr("width", function(d) {
return xScale2(d.fees2017);
})
.attr("height",yScale2.rangeBand)
.on("mouseover", hoveron2)
.on("mouseout", hoverout2)
.style("cursor", "pointer")
.style("stroke", "#777")
.style("fill", "Green");
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Is there value for money in sending your child to a top performing O'level school in Uganda?</title>
<!-- CSS libraries -->
<!-- Custom CSS styles -->
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div class="container">
<h2> Is there value for money in sending your child to a top performing O'level school in Uganda?</h2>
<h4> By comparing how much the top 100 schools charge for fees <span style="color: Green">(left chart)</span>, and how many UCE candidates achieved a Divsion I <span style="color: SteelBlue">(right chart)</span>; we try to find out.</h4>
<div id="initial">
<strong></strong>
</div>
<div id="barchart"> <!-- barchart container -->
<p><strong><u>Percentage of UCE candidates passing in Division I (15 year-average)</u></strong></p>
</div>
<div id="barchart2"> <!-- barchart2 container -->
<p><strong><u>Senior One School fees, 2017 (in UGX)</u></strong></p>
</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>
<!-- Tooltip2 div -->
<div id="tooltip2">
<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>
<script src="barchart2.js"></script>
</body>
</html>
Raw
olevelfeesdata.csv
rank school fees2017
1 St. Marys Col. Kisubi 1900000
2 Mt. St. Mary's Namagunga 1700000
3 Ndejje SS 1530000
4 Gayaza HS 1520000
5 Kibuli SS 1400000
6 Makerere Col. Sch. 1200000
7 St. Henrys Col. Kitovu 1000000
8 Bweranyangi Girls Sch 1000000
9 Teso Col. Aloet 976000
10 Ntare Sch. 940000
11 Trinity Col. Nabbingo 940000
12 Maryhill HS 916000
13 Tororo Girls Sch. 900000
14 Mengo SS 810000
15 Iganga SS 800000
16 St. Paul's Col. Mbale 584000
17 Christ The King SS Kalisizo 420000
18 Uganda Martyrs SS Namugongo 0
19 St. Marys SS Kitende 0
20 Namilyango Col. 0
21 Kings Col. Budo 0
22 Nabisunsa Girls Sch 0
23 St. Josephs SS Naggalama 0
24 St. Josephs Girls Nsambya 0
25 The Academy St Lawrence 0
26 St.Pauls Sem. Kabale 0
27 Seeta HS Mukono 0
28 Nsambya Hillside SS 0
29 St. Charles Lwanga Sem. 0
30 Kitabi Sem. 0
31 Kisubi Sem. 0
32 Immaculate Heart Girls 0
33 Seeta HS 0
34 Bukalasa Minor Sem 0
35 Our Lady Of Africa SS Namilyango 0
36 Light Academy SS 0
37 St. Joseph Of Nazareth HS 0
38 Mbarara HS 0
39 London Col. Of St.lawrence 0
40 Kawempe Muslim SS 0
41 Buddo SS 0
42 Naalya SS Namugongo 0
43 St. Joseph's Voc. Sch. Mbarara 0
44 Bp. Cipriano Kihangire SS 0
45 Seroma Christian HS 0
46 Kiira Col. Butiki 0
47 Seeta HS Green Campus Mukono 0
48 Gombe SS 0
49 St. Joseph's Sem. Nyenga 0
50 Katikamu SS 0
51 Nadiket Sem. Moroto 0
52 Jinja Col. 0
53 Ocer Campion Jesuit Col. 0
54 Our Lady Of Good Counsel 0
55 St. Kizito SS Kabowa 0
56 Naalya SS Bweyogerere 0
57 Merryland HS Entebbe 0
58 St. Lawrence City. HS Horizon 0
59 Uganda Col. Kibubu 0
60 St. Mary's SS Kitende Annex 0
61 St. Augustine's Col. Wakiso 0
62 Brilliant HS Kawempe 0
63 St. Mary Goretti's Col. Katende 0
64 Namirembe Hillside HS 0
65 St. Mary's Girls' Col. Aboke 0
66 Sos Hermann Gmeiner SS 0
67 St. Kaggwa Bushenyi HS 0
68 St. Kalemba SS 0
69 Holy Cross Lake View SS Jinja 0
70 Kigezi HS 0
71 Kabojja SS 0
72 Busoga Col. Mwiri 0
73 Rubaga Girls' SS 0
74 Hope SS Bbira 0
75 St. Cyprian Chavanod Col. 0
76 St. Leo's Col. Kyegobe 0
77 Arch Bishop Flynn SS 0
78 Muntuyera HS Kitunga 0
79 St. Joseph's Col. Layibi 0
80 East HS Ntinda 0
81 St. Peter's Col.Tororo 0
82 Notre Dame Academy Buseesa 0
83 Blessed Sacrement SS Kimaanya 0
84 St. Julian HS 0
85 St. Andrew Kaggwa SS 0
86 SacredHeart Sem. Mubende 0
87 St. Augustine Col. Wakiso 0
88 St.Lawrence SS Ssonde 0
89 St. Daniel Comboni Col. 0
90 Stella Maris Col. Nsube 0
91 Greenhill Academy Kampala 0
92 Mbogo HS 0
93 Aga Khan HS 0
94 St. Kizito HS Bethany 0
95 Vienna Col. Namugongo 0
96 Migadde Col. Bombo 0
97 Mityana Modern SS 0
98 Mariam HS Kampala 0
99 Kabalega SS 0
100 St. John Bosco Sem. Hoima 0
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: 560px;
height: 1700px;
border: 1px solid silver;
background: #E6E6E6;
float: right;
}
#barchart p {
margin-left: 5px;
}
#barchart2 {
width: 560px;
height: 1700px;
border: 1px solid silver;
background: #E6E6E6;
float: left;
}
#barchart2 p {
margin-left: 5px;
}
#tooltip {
position: absolute;
z-index: 2;
background: #fff;
border-radius: 4px;
width: 160px;
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;
}
#tooltip2 {
position: absolute;
z-index: 2;
background: #fff;
border-radius: 4px;
width: 160px;
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;
}
#tooltip2 p {
margin: 0;
}
#tooltip2 p.value {
font-weight: bold;
}
#initial {
font-size: 1.2rem;
float: left;
}
#initial2 {
font-size: 1.2rem;
float: left;
}
.container {
width: 1200px;
height: 1800px;
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;
}
.axis path,
.axis line {
fill: none;
stroke:black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 9px;
}
.axis2 path,
.axis2 line {
fill: none;
stroke:black;
shape-rendering: crispEdges;
}
.axis2 text {
font-family: sans-serif;
font-size: 9px;
}
g.highlight rect {
fill: Maroon;
}
.barBase {
stroke: #888;
opacity: 0.2;
}
.barLight {
stroke: black;
opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment