Skip to content

Instantly share code, notes, and snippets.

@BMPMS

BMPMS/index.html

Last active December 14, 2016 17:16
Show Gist options
  • Save BMPMS/4dd4bc5f067bf9da63df93b80b7361f2 to your computer and use it in GitHub Desktop.
Save BMPMS/4dd4bc5f067bf9da63df93b80b7361f2 to your computer and use it in GitHub Desktop.
Download ZIP
2015 PISA
Raw
index.html
<!DOCTYPE html>
<html>
<title>PISA 2015 Visualisation</title>
<link rel="stylesheet" type="text/css" href="pisa.css" media="screen" />
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="pisa.js"></script>
</head>
<body>
<table id='maint' width='100%' cellspacing="0" cellpadding="0" style='table-layout: fixed'>
<tr id='title'>
<td colspan='11' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PISA 2015 Educational Survey: How does the world compare?</td>
<td colspan='1' style='color:white; font-size:14px; text-align: right;'><span id='skip'>Skip Intro</span>&nbsp;&nbsp;</td>
</tr>
<tr id='subjects'>
<td colspan='4' id='maths'>MATHS</td>
<td colspan='4' id='reading'>READING</td>
<td colspan='4' id='science'>SCIENCE</td>
</tr>
<tr id='categories'>
<td colspan='3' id='ranking'>ranking</td>
<td colspan='3' id='low'>low achievers</td>
<td colspan='3' id='high'>top performers</td>
<td colspan='3' id='progress'>progress</td>
</tr>
<tr><td colspan='12' id='map'></td></tr>
<tr id='catexp'><td colspan='12'><br>
<b>ranking:</b> from 1st to last based on the average test score for the given subject<br>
<b>top performers:</b> higher than average % of pupils performing at top levels (5 and 6).<br>
<b>low achievers:</b> higher than average % of pupils performing at low levels (below 2)<br>
<b>progress:</b> higher average score than previous years</td></tr>
<tr id='exp'><td colspan='12'><br>The PISA survey (https://www.oecd.org/pisa/) has run every 3 years since 2000 assessing students between 15 years 3 months and 16 years 2 months. The complete survey includes 7 hours of test material, each student takes a different 2 hour combination of these tests. <br><br>
The 2015 data was released today. This year there are 70 countries involved. Here's the same viz with the new data.
<br><br></td></tr>
</table>
<script type="text/javascript">
/*
Use D3 to load the GeoJSON file
*/
d3.json("new_world_countries.json", draw);
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
new_world_countries.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
pisa.css
#title{
text-align: center;
font: normal normal normal 24px/1 Helvetica, arial, sans-serif;
color:black;
background-color: lightgrey;
height: 45px;
margin: 0;
width: 100%;
}
#subjects{
text-align: center;
font: normal normal normal 24px/1 Helvetica, arial, sans-serif;
color:white;
height: 45px;
margin: 0;
width: 100%;
}
#categories{
text-align: center;
font: normal normal normal 24px/1 Helvetica, arial, sans-serif;
color:black;
border-style: solid;
border
border-color: grey;
height: 45px;
margin: 0.5;
width: 100%;
border-collapse: collapse;
}
#ranking,#high,#low,#progress{
border-color: grey;
border-style: solid;
border-width: thin;
}
#maths{
background-color: blue;
}
#skip{
color: blue;
}
#reading{
background-color: red;
}
#science{
background-color: green;
}
#catexp{
text-align: center;
font: normal normal normal 12px/1 Helvetica, arial, sans-serif;
color:black;
background-color: lightgrey;
}
#exp{
text-align: center;
font: normal normal normal 10px/1 Helvetica, arial, sans-serif;
color:black;
background-color: lightgrey;
}
body{
text-align: center;
background-color: white;
}
select{
font: normal normal normal 14px/1 Helvetica, arial, sans-serif;
}
svg{
text-align: center;
background-color: white;
}
Raw
pisa.js
function draw(geo_data) {
//country and subject ranking arrays (populated from data)
var countries = [];
var mathsranks = {};
var readingranks = {};
var scienceranks = {};
function openPopup (d) {
var cindex = countries.indexOf(d.properties.name)
if(cindex !== -1) {
var left = (screen.width/2)-(800/2);
var top = (screen.height/2)-(600/2);
specs = 'toolbar=no, location=no, directories=no, status=no, menubar=no,'
specs = specs + ' scrollbars=no, resizable=no, copyhistory=no, width=700, '
specs = specs + 'height=530, top='+top+', left='+left
url = 'popup.html?country=' + d.properties.name
title = 'PISA statistics for ' + d.properties.name
window.open(url, title, specs);
}
}
//draw svg, projection and world map
var svg = d3.select("#map")
.append("svg")
.attr("width", 1000)
.attr("height", 430)
.append('g')
.attr('class', 'map');
var projection = d3.geo.mercator()
.scale(170)
.translate([1000 / 2.4, 430 / 1.6]);
var path = d3.geo.path().projection(projection);
var map = svg.selectAll('path')
.data(geo_data.features)
.enter()
.append('path')
.attr('d', path)
.attr('class','feature')
.style('fill', 'white')
.style('stroke', 'grey')
.style('stroke-width', 0.5)
.on('click',openPopup);
start_animation()
function plot_points(data) {
//variables used by change_map function
var subject = '';
var category = '';
var colour = 'white';
//build countries and subject rankings arrays from data.
data.forEach(function(d) {
countries.push(d['country']);
mathsranks[d['maths_ranking']] = d['country'];
readingranks[d['reading_ranking']] = d['country'];
scienceranks[d['science_ranking']] = d['country'];
});
//sets all countries to grey or white depending on whether part
function blank(d) {
var cindex = countries.indexOf(d.properties.name)
if(cindex !== -1) {
return 'lightGrey';
} else {
return 'white';
}
}
function getcountry(d){
//used change_map function to label individual countries
var cindex = countries.indexOf(d.properties.name)
if(cindex !== -1) {
return d.properties.name;
} else {
return '';
}
}
function progress(cindex, fieldname){
//progress category - colours country correctly according to subject if on the list
if (data[cindex][fieldname] > 0){
return colours[subject];
} else {
return 'lightGrey';
}
}
function highlow(cindex, fieldname){
//high or low performance categories - colours country correctly according to subject if on the list
if (data[cindex][fieldname] == 'True'){
return colours[subject];
} else {
return 'lightGrey';
}
}
function ranking(cindex, fieldname){
//ranking category - colours and gradients countries correctly according to subject if on the list
var new_colour = d3.scale.linear()
.domain([1, 59])
.range([colour, "white"]);
return new_colour(data[cindex][fieldname]);
}
function fill_colour(d){
//returns appropriate fill colour using functions above if necessary
var cindex = countries.indexOf(d.properties.name)
var fieldname = subject + '_' + category
if( cindex !== -1) {
if (category == 'ranking') {
return ranking(cindex,fieldname)
}
if (category == 'low'){
return highlow(cindex,fieldname)
}
if (category == 'high'){
return highlow(cindex,fieldname)
}
if (category == 'progress'){
return progress(cindex,fieldname)
} else {
return 'white';
}
} else {
return 'white';
}
}
var subjects =['maths','reading','science'];
var categories =['ranking','high','low','progress'];
var colours = {maths:"blue", reading:"red",science:"green"};
function choose_subject(subject){
// highlights the subject just selected and sets others to background color grey
if (subject != ''){
substr = '#' + subject
d3.select(substr)
.style('background-color', colours[subject]);
}
for (s in subjects) {
substr = '#' + subjects[s]
if (subjects[s] != subject){
d3.select(substr)
.style('background-color', 'grey');
}
}
}
function choose_category(category){
// highlights the category just selected and sets others to background color grey
if (category != ''){
substr = '#' + category
d3.select(substr)
.style('background-color', 'yellow');
}
for (c in categories) {
substr = '#' + categories[c]
if (categories[c] != category){
d3.select(substr)
.style('background-color', 'white');
}
}
}
function change_map(new_subject, new_category){
// changes the map, either on request or as part of the animation
choose_subject(new_subject)
choose_category(new_category)
subject = new_subject
category = new_category
colour = colours[subject]
svg.selectAll('path')
.style('fill', fill_colour)
.append("svg:title")
.text(getcountry);
}
function update(loopint) {
//animation loop
if(loopint==1){
change_map('reading','ranking')
}
if(loopint==2){
change_map('science','ranking')
}
if(loopint==3){
change_map('maths','low')
}
if(loopint==4){
change_map('reading','low')
}
if(loopint==5){
change_map('science','low')
}
if(loopint==6){
change_map('maths','high')
}
if(loopint==7){
change_map('reading','high')
}
if(loopint==8){
change_map('science','high')
}
if (loopint==9){
change_map('maths','progress')
}
if (loopint==10){
change_map('reading','progress')
}
if (loopint==11){
change_map('science','progress')
}
if(loopint>11){
clearInterval(subj_interval);
after_animation()
}
}
function skipit(){
//called by Skip Intro button.
clearInterval(subj_interval);
after_animation()
d3.select('#skip')
.style('visibility','hidden')
}
d3.select('#skip')
.on('click',function(){skipit()})
change_map('maths', 'ranking')
var loopint = 1;
var subj_interval = setInterval(function() {
update(loopint);
loopint++;
},2500)
function add_instructions(){
//add instructions after animation has run its course
x = document.getElementById("maint").offsetWidth
x = (x - 600)/2
svg.append('rect').transition().duration(500).attr('width', 600)
.attr('height', 135)
.attr('x', x)
.attr('y', 50)
.style('fill', 'lightYellow')
.attr('stroke', 'black')
svg.append('rect').transition().duration(500).attr('width', 420)
.attr('height', 50)
.attr('x', x+90)
.attr('y', 210)
.style('fill', 'MistyRose')
.attr('stroke', 'black')
svg.selectAll('rect').on('click',function(){hide_instructions()})
var msg = []
msg.push("In 2010, there were 9 consistent high performers: China, South Korea, Japan, Singapore,")
msg.push('Australia, New Zealand, Finland, Canada and Leichtenstein. Six of which are ')
msg.push('in the top 10: China, South Korea, Japan, Singapore, Finland and Leichtenstein.')
msg.push(' ')
msg.push('The UK was around average on all subjects but this is only 3% off low achievement.')
msg.push('Is it the same for 2015? Explore the graphic and find out')
msg.push(' ')
msg.push(' ')
msg.push('Click on SUBJECT + CATEGORY to see the map again.')
msg.push('Click on a COUNTRY for more detailed statistics.')
y = 70
for (m in msg){
svg.append('text').text(msg[m])
.attr('x', x+10)
.attr('y', y)
.style("font-size","16px")
.style('font-family','Helvetica, arial, sans-serif')
.style('text-align','center')
.attr('fill', 'black')
y = y + 20;
if (m == 7){
x = x + 90
}
}
svg.selectAll('text').on('click',function(){hide_instructions()})
}
function hide_instructions(){
svg.selectAll('rect').style('visibility','hidden')
svg.selectAll('text').style('visibility','hidden')
}
function after_animation(){
//make all subjects, categories and map blank
choose_subject('')
choose_category('')
svg.selectAll('path')
.style('fill', blank)
.append("svg:title")
.text(getcountry);
add_instructions()
//set up subject and category buttons
d3.select('#maths')
.on('click',function(){subject_click('maths')})
d3.select('#reading')
.on('click',function(){subject_click('reading')})
d3.select('#science')
.on('click',function(){subject_click('science')})
d3.select('#low')
.on('click',function(){category_click('low')})
d3.select('#high')
.on('click',function(){category_click('high')})
d3.select('#ranking')
.on('click',function(){category_click('ranking')})
d3.select('#progress')
.on('click',function(){category_click('progress')})
var subjectvalue= "";
var categoryvalue = "";
function subject_click(subject){
hide_instructions()
choose_subject(subject)
subjectvalue = subject
if (categoryvalue != ""){
change_map(subjectvalue,categoryvalue)
}
}
function category_click(category){
hide_instructions()
choose_category(category)
categoryvalue= category
if (subjectvalue != ""){
change_map(subjectvalue,categoryvalue)
}
}
};
};
function start_animation(){
d3.csv("pisa_map_data.csv", function(d) {
d['maths_meanscore'] = +d['maths_meanscore'] ;
d['maths_lowperform'] = +d['maths_lowperform'] ;
d['maths_highperform'] = +d['maths_highperform'] ;
d['maths_progress'] = +d['maths_progress'] ;
d['maths_ranking'] = +d['maths_ranking'] ;
d['reading_meanscore'] = +d['reading_meanscore'] ;
d['reading_lowperform'] = +d['reading_lowperform'] ;
d['reading_highperform'] = +d['reading_highperform'] ;
d['reading_progress'] = +d['reading_progress'] ;
d['reading_ranking'] = +d['reading_ranking'] ;
d['science_meanscore'] = +d['science_meanscore'] ;
d['science_lowperform'] = +d['science_lowperform'] ;
d['science_highperform'] = +d['science_highperform'] ;
d['science_progress'] = +d['science_progress'] ;
d['science_ranking'] = +d['science_ranking'] ;
return d;
}, plot_points);
}
};
Raw
pisa_map_data.csv
country maths_lowperform maths_highperform maths_meanscore maths_progress reading_lowperform reading_highperform reading_meanscore reading_progress science_lowperform science_highperform science_meanscore science_progress overall_meanscore maths_ranking reading_ranking science_ranking overall_ranking maths_low maths_high reading_low reading_high science_low science_high
55 Singapore 7.6 34.8 564.0 1.2 11.1 18.4 535.0 4.5 9.6 24.2 556.0 6.9 551.6666666666666 1 1 1 1 False True False True False True
31 Japan 10.7 20.3 532.0 1.0 12.9 10.8 516.0 -1.8 9.6 15.3 538.0 2.8 528.6666666666666 3 7 2 2 False True False True False True
10 China 11.0 25.5 541.3 1.3 15.0 9.0 506.6 2.3 11.5 11.4 525.5 0.3 524.4666666666667 2 11 6 3 False True False True False True
18 Estonia 11.2 14.2 520.0 2.3 10.6 11.0 519.0 9.2 8.8 13.5 534.0 2.2 524.3333333333334 6 5 3 4 False True False True False True
8 Canada 14.4 15.1 516.0 -4.3 10.7 14.0 527.0 1.3 11.1 12.4 528.0 -2.3 523.6666666666666 7 2 5 5 False True False True False True
19 Finland 13.6 11.7 511.0 -9.7 11.1 13.7 526.0 -4.8 11.5 14.3 531.0 -10.6 522.6666666666666 9 3 4 6 False True False True False True
34 South Korea 15.5 20.9 524.0 -2.9 13.7 12.7 517.0 -11.1 14.4 10.6 516.0 -1.9 519.0 4 6 8 7 False True False True False True
57 Slovenia 16.1 13.5 510.0 1.7 15.1 8.9 505.0 11.0 15.0 10.6 513.0 -1.5 509.3333333333333 11 13 9 8 False True False True False True
28 Ireland 15.0 9.8 504.0 0.1 10.2 10.7 521.0 12.8 15.3 7.1 503.0 -0.4 509.3333333333333 15 4 16 9 False False False True False False
45 Netherlands 16.7 15.5 512.0 -5.8 18.1 10.9 503.0 -2.7 18.5 11.1 509.0 -4.9 508.0 8 14 12 10 False True False True False True
23 Germany 17.2 12.9 506.0 1.7 16.2 11.7 509.0 5.8 17.0 10.6 509.0 -1.7 508.0 13 10 14 11 False True False True False True
60 Switzerland 15.8 19.2 521.0 -1.0 20.0 7.8 492.0 -4.3 18.5 9.8 506.0 -2.0 506.3333333333333 5 26 15 12 False True False False False True
46 New Zealand 21.6 11.4 495.0 -7.9 17.3 13.6 509.0 -5.9 17.4 12.8 513.0 -6.7 505.6666666666667 19 9 10 13 False True False True False True
47 Norway 17.1 10.6 502.0 1.2 14.9 12.2 513.0 5.0 18.7 8.0 498.0 3.1 504.3333333333333 16 8 21 14 False False False True False True
16 Denmark 13.6 11.7 511.0 -1.9 15.0 6.5 500.0 2.5 15.9 7.0 502.0 1.7 504.3333333333333 10 16 17 15 False True False False False False
50 Poland 17.2 12.2 504.0 5.0 14.4 8.2 506.0 2.5 16.3 7.3 501.0 2.9 503.6666666666667 14 12 19 16 False True False False False False
5 Belgium 20.1 15.9 507.0 -5.0 19.5 9.3 499.0 -3.5 19.8 9.0 502.0 -2.7 502.6666666666667 12 18 18 17 False True False True False True
3 Australia 22.0 11.3 494.0 -7.7 18.1 11.0 503.0 -5.9 17.6 11.2 510.0 -5.7 502.3333333333333 22 15 11 18 False True False True False True
69 Vietnam 19.1 9.3 495.0 -16.8 13.8 2.7 487.0 -21.4 5.9 8.3 525.0 -3.8 502.3333333333333 18 29 7 19 False False False False False True
66 United Kingdom 21.9 10.6 492.0 -0.7 17.9 9.2 498.0 1.6 17.4 10.9 509.0 -1.5 499.6666666666667 26 20 13 20 False False False True False True
51 Portugal 23.8 11.4 492.0 7.2 17.2 7.5 498.0 4.4 17.4 7.4 501.0 7.6 497.0 27 21 20 21 True True False False False False
59 Sweden 20.8 10.4 494.0 -5.4 18.4 10.0 500.0 1.3 21.6 8.5 493.0 -4.0 495.6666666666667 21 17 28 22 False False False True True True
20 France 23.5 11.4 493.0 -3.6 21.5 12.5 499.0 1.7 22.1 8.0 495.0 0.0 495.6666666666667 24 19 24 23 True True True True True True
4 Austria 21.8 12.5 497.0 -1.8 22.5 7.2 485.0 -4.9 20.8 7.7 495.0 -4.9 492.3333333333333 17 32 23 25 False True True False False False
54 Russia 18.9 8.8 494.0 5.9 16.2 6.6 495.0 17.5 18.2 3.7 487.0 2.9 492.0 20 25 30 26 False False False False False False
58 Spain 22.2 7.2 486.0 0.5 16.2 5.5 496.0 7.0 18.3 5.0 493.0 2.1 491.6666666666667 30 24 26 27 False False False False False False
15 Czech Republic 21.7 10.4 492.0 -5.8 22.0 7.9 487.0 4.6 20.7 7.3 493.0 -5.2 490.6666666666667 25 28 25 28 False False True False False False
67 United States 29.4 5.9 470.0 -2.0 19.0 9.6 497.0 -1.4 20.3 8.5 496.0 1.8 487.6666666666667 37 23 22 29 True False False True False True
36 Latvia 21.4 5.2 482.0 0.1 17.7 4.3 488.0 1.9 17.2 3.8 490.0 1.1 486.6666666666667 32 27 29 30 False False False False False False
30 Italy 23.3 10.5 490.0 7.1 21.0 5.7 485.0 -0.4 23.2 4.1 481.0 2.0 485.3333333333333 28 31 32 31 True False True False True False
39 Luxembourg 25.8 10.0 486.0 -1.6 25.6 8.1 481.0 4.6 25.9 6.9 483.0 -0.3 483.3333333333333 31 34 31 32 True False True False True False
26 Iceland 23.6 10.3 488.0 -6.7 22.1 6.6 482.0 -9.5 25.3 3.8 473.0 -7.0 481.0 29 33 36 33 True False True False True False
13 Croatia 32.0 5.6 464.0 0.1 19.9 5.9 487.0 5.5 24.6 3.9 475.0 -4.8 475.3333333333333 39 30 35 34 True False False False True False
38 Lithuania 25.4 6.9 478.0 -2.2 25.1 4.4 472.0 2.1 24.7 4.2 475.0 -3.2 475.0 34 36 34 35 True False True False True False
25 Hungary 28.0 8.1 477.0 -4.0 27.5 4.3 470.0 -12.3 26.0 4.6 477.0 -8.9 474.6666666666667 35 37 33 36 True False True False True False
29 Israel 32.1 8.9 470.0 10.1 26.6 9.2 479.0 2.5 31.4 5.8 467.0 5.4 472.0 38 35 37 37 True False True True True False
41 Malta 29.1 11.8 479.0 9.5 35.6 5.6 447.0 2.8 32.5 7.6 465.0 2.1 463.6666666666667 33 42 38 38 True True True False True False
56 Slovakia 27.7 7.8 475.0 -5.6 32.1 3.5 453.0 -12.4 30.7 3.6 461.0 -10.2 463.0 36 40 39 39 True False True False True False
24 Greece 35.8 3.9 454.0 1.1 27.3 4.0 467.0 -8.1 32.7 2.1 455.0 -5.9 458.6666666666667 41 38 41 40 True False True False True False
33 Kazakhstan 32.2 4.2 460.0 27.0 41.3 0.8 427.0 18.6 28.1 1.8 456.0 28.0 447.6666666666667 40 50 40 41 True False True False True False
2 Argentina 45.1 2.4 432.7 23.4 31.8 2.4 450.3 29.8 31.2 1.7 453.7 31.6 445.56666666666666 46 41 42 42 True False True False True False
9 Chile 49.4 1.4 423.0 3.5 28.4 2.3 459.0 4.6 34.8 1.2 447.0 2.4 443.0 48 39 43 43 True False True False True False
40 Malaysia 37.5 2.0 446.0 25.2 37.2 0.4 431.0 11.8 33.7 0.6 443.0 13.3 440.0 42 48 45 44 True False True False True False
7 Bulgaria 42.1 4.4 441.0 9.3 41.5 3.6 432.0 1.2 37.9 2.9 446.0 4.2 439.6666666666667 44 47 44 45 True False True False True False
53 Romania 39.9 3.3 444.0 10.5 38.7 2.0 434.0 4.4 38.5 0.7 435.0 6.0 437.6666666666667 43 45 47 46 True False True False True False
14 Cyprus 42.6 3.2 437.0 -2.6 35.6 3.1 443.0 -6.0 42.1 1.6 433.0 -5.1 437.6666666666667 45 43 49 47 True False True False True False
65 United Arab Emirates 48.7 3.7 427.0 -6.5 40.4 3.0 434.0 -8.2 41.8 2.8 437.0 -11.6 432.6666666666667 47 46 46 48 True False True False True False
68 Uruguay 52.4 1.7 418.0 -2.6 39.0 2.5 437.0 5.3 40.8 1.3 435.0 1.0 430.0 52 44 48 49 True False True False True False
64 Turkey 51.4 1.1 420.0 1.9 40.0 0.6 428.0 -17.8 44.5 0.3 425.0 1.5 424.3333333333333 50 49 52 50 True False True False True False
62 Trinidad and Tobago 52.3 2.5 417.0 1.6 42.5 2.4 427.0 5.4 45.8 1.4 425.0 7.2 423.0 53 52 53 51 True False True False True False
43 Moldova 50.3 1.7 420.0 13.3 45.8 1.2 416.0 16.9 42.2 0.7 428.0 9.1 421.3333333333333 49 56 50 52 True False True False True False
44 Montenegro 51.9 1.5 418.0 6.2 41.9 1.4 427.0 9.6 51.0 0.5 411.0 0.7 418.6666666666667 51 51 59 53 True False True False True False
12 Costa Rica 62.5 0.3 400.0 -5.8 40.3 0.7 427.0 -9.4 46.4 0.1 420.0 -6.7 415.6666666666667 59 53 55 54 True False True False True False
42 Mexico 56.6 0.3 408.0 5.3 41.7 0.3 423.0 -0.8 47.8 0.1 416.0 1.7 415.6666666666667 56 55 57 55 True False True False True False
0 Albania 53.3 1.1 413.0 17.8 50.3 1.0 405.0 10.3 41.7 0.4 427.0 18.3 415.0 55 60 51 56 True False True False True False
61 Thailand 53.8 1.4 415.0 0.6 50.0 0.3 409.0 -6.1 46.7 0.5 421.0 2.1 415.0 54 57 54 57 True False True False True False
11 Colombia 66.3 0.3 390.0 5.4 42.8 1.0 425.0 5.8 49.0 0.4 416.0 8.0 410.3333333333333 61 54 58 58 True False True False True False
52 Qatar 58.7 2.2 402.0 26.3 51.6 1.6 402.0 14.9 49.8 1.7 418.0 20.9 407.3333333333333 58 61 56 59 True False True False True False
22 Georgia 57.1 1.6 404.0 14.6 51.7 1.1 401.0 16.2 50.8 0.9 411.0 23.1 405.3333333333333 57 62 60 60 True False True False True False
32 Jordan 67.5 0.3 380.0 -1.2 46.3 0.3 408.0 1.6 49.8 0.2 409.0 -4.6 399.0 64 58 61 61 True False True False True False
27 Indonesia 68.6 0.7 386.0 3.6 55.4 0.2 397.0 -2.3 56.0 0.1 403.0 2.8 395.3333333333333 63 64 62 62 True False True False True False
6 Brazil 70.3 0.9 377.0 6.2 51.0 1.4 407.0 -2.3 56.6 0.7 401.0 2.7 395.0 65 59 63 63 True False True False True False
49 Peru 66.2 0.4 387.0 10.4 53.9 0.3 398.0 13.9 58.5 0.1 397.0 13.7 394.0 62 63 64 64 True False True False True False
37 Lebanon 60.2 2.0 396.0 0.0 70.4 0.8 347.0 0.0 62.6 0.4 386.0 0.0 376.3333333333333 60 69 66 65 True False True False True False
63 Tunisia 74.8 0.5 367.0 3.8 71.6 0.1 361.0 -21.5 65.9 0.0 386.0 0.0 371.3333333333333 67 65 65 66 True False True False True False
21 Macedonia 70.2 0.8 371.0 0.0 70.7 0.2 352.0 0.0 62.9 0.2 384.0 0.0 369.0 66 67 67 67 True False True False True False
35 Kosovo 77.7 0.0 362.0 0.0 76.9 0.0 347.0 0.0 67.7 0.0 378.0 0.0 362.3333333333333 68 70 68 68 True False True False True False
1 Algeria 81.0 0.1 360.0 0.0 79.0 0.0 350.0 0.0 70.8 0.0 376.0 0.0 362.0 69 68 69 69 True False True False True False
17 Dominican Republic 90.5 0.0 328.0 0.0 72.1 0.1 358.0 0.0 85.7 0.0 332.0 0.0 339.3333333333333 70 66 70 70 True False True False True False
Raw
popup.css
table{
border-collapse: collapse;
}
table,th,td{
border: 0px solid lightGrey;
}
#country{
text-align: center;
font: normal normal normal 24px/1 Helvetica, arial, sans-serif;
background-color: lightGrey;
margin: 0 auto;
}
svg{
text-align: center;
}
#mathsdiv{
text-align: center;
font: normal normal normal 14px/1 Helvetica, arial, sans-serif;
color: blue;
}
#readingdiv{
text-align: center;
font: normal normal normal 14px/1 Helvetica, arial, sans-serif;
color: red;
}
#sciencediv{
text-align: center;
font: normal normal normal 14px/1 Helvetica, arial, sans-serif;
color: green;
}
#myheader{
margin: 0 auto;
text-align: center;
font: normal normal normal 16px/1 Helvetica, arial, sans-serif;
color: #000000;
font-weight: bold;
}
#subject{
margin: 2 auto;
text-align: left;
font: normal normal normal 14px/1 Helvetica, arial, sans-serif;
font-weight: bold;
}
#mathspiechart{
text-align: center;
vertical-align: middle;
}
#pie{
font: normal normal normal 10px/1 Helvetica, arial, sans-serif;
text-align: center;
vertical-align: middle;
}
#averages{
font: normal normal normal 10px/1 Helvetica, arial, sans-serif;
text-align: left;
vertical-align: baseline;
}
#mathsarrow,#readingarrow,#sciencearrow {
text-align: center;
vertical-align: middle;
font: normal normal normal 10px/1 Helvetica, arial, sans-serif;
}
#mathsbarchart{
text-align: center;
vertical-align: middle;
}
#readingbarchart{
text-align: center;
vertical-align: middle;
}
#sciencebarchart{
text-align: center;
vertical-align: middle;
}
#readingpiechart{
text-align: center;
vertical-align: middle;
}
#sciencepiechart{
text-align: center;
vertical-align: middle;
Raw
popup.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css" media="screen" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
<script>
function drawpie(subject, low, high){
var middle = 100-low-high
var pie_data = [
{'subject':subject,'percent': low,'type' : 'under2'},
{'subject':subject,'percent': middle,'type' : 'level34'},
{'subject':subject,'percent': high,'type' : 'level56'}
];
svgname = '#' + subject + 'piechart';
var svg = dimple.newSvg(svgname, '150px', '80px');
var myPChart = new dimple.chart(svg, pie_data);
var colours = {maths:"blue", reading:"red", science:"green"};
var lightercolours = {maths:"#0099FF", reading:"FF9999", science:"66CC66"};
myPChart._assignedColors['under2'] = new dimple.color(lightercolours[subject]);
myPChart._assignedColors['level34'] = new dimple.color('lightGrey');
myPChart._assignedColors['level56'] = new dimple.color(colours[subject]);
myPChart.addMeasureAxis("p", "percent");
myPChart.setBounds(20,18,'75%','75%');
var s = myPChart.addSeries("type", dimple.plot.pie);
s.getTooltipText = function (e) {
mystr = e.pValue + '%'
return [
mystr
];
};
myPChart.draw();
};
function drawbar(subject, myscore, myranking){
chartname = '#' + subject + 'barchart'
var svg = dimple.newSvg(chartname,'300px','120px');
oecd_mean = {'maths':494, 'reading':496, 'science':501}
var data = [
{'subject':subject,'score': myscore,'oecd_average': oecd_mean[subject]}
];
var colours = {maths:"blue", reading:"red", science:"green"};
var myChart = new dimple.chart(svg, data);
myChart.defaultColors = [
new dimple.color(colours[subject]),
new dimple.color("darkGrey")
];
var y = myChart.addCategoryAxis("y", "subject");
var x = myChart.addMeasureAxis("x", "score");
var o = myChart.addMeasureAxis("x", "oecd_average");
var s = myChart.addSeries("subject", dimple.plot.bar);
var oecd = myChart.addSeries("oecd_average", dimple.plot.bubble, [o, y]);
debugger;
y.hidden = true;
o.hidden = true;
myChart.setBounds(10, 30,'90%','40%');
o.overrideMax = 620;
x.overrideMax = 620;
x.showGridlines = false;
x.ticks = 3;
myChart.draw();
x.titleShape.remove();
//I've kept this line long as I'd argue it makes the code more readable
if (myranking == 1 || myranking == 21 || myranking == 31 || myranking == 41 || myranking == 51){
ranking = "overall ranking: " + myranking + "st";
} else if (myranking == 2 || myranking == 22 || myranking == 32 ||
myranking == 42 || myranking == 52){
ranking = "overall ranking: " + myranking + "nd";
} else if (myranking == 3 || myranking == 23 || myranking == 33 ||
myranking == 43 || myranking == 53){
ranking = "overall ranking: " + myranking + "rd";
} else {
ranking = "overall ranking: " + myranking + "th";
}
svg.append("text")
.attr("y", 60)
.attr("x", 100)
.style("text-anchor", "middle")
.style("font-size", "14px")
.style("font-family", "Helvetica, arial, sans-serif")
.style("fill", "#ecf0f1")
.text(ranking);
};
function drawgraphs(d){
//these lines are better longer too?
drawbar('maths', parseInt(d[0]['maths_meanscore']), parseInt(d[0]['maths_ranking']))
drawbar('reading', parseInt(d[0]['reading_meanscore']), parseInt(d[0]['reading_ranking']))
drawbar('science', parseInt(d[0]['science_meanscore']), parseInt(d[0]['science_ranking']))
drawpie('maths', parseInt(d[0]['maths_lowperform']), parseInt(d[0]['maths_highperform']))
drawpie('reading', parseInt(d[0]['reading_lowperform']), parseInt(d[0]['reading_highperform']))
drawpie('science', parseInt(d[0]['science_lowperform']), parseInt(d[0]['science_highperform']))
function progress(prog,subject,colour){
imagename = subject + "img"
divname = subject + "div"
imagelink ='http://github.com/BMPMS/Udacity/blob/master/'
//longer lines there because of pesky image links.
if (prog < 0){
if (subject == 'maths'){
newimg = "https://cloud.githubusercontent.com/assets/18613602/16158271/765b7b46-34b4-11e6-8a75-615cd7c3f49f.gif"
}
if (subject == 'science'){
newimg = 'https://cloud.githubusercontent.com/assets/18613602/16158464/3a24983c-34b5-11e6-8b1f-382e64cc04b6.gif'
}
if (subject == 'reading'){
newimg = 'https://cloud.githubusercontent.com/assets/18613602/16158470/3ecb2428-34b5-11e6-8fd5-3ba3c41ce0fa.gif'
}
document.getElementById(imagename).src=newimg;
}
if (prog == 0){
newimg = "https://cloud.githubusercontent.com/assets/18613602/16158463/3a240886-34b5-11e6-8333-3a66db8aeb86.gif"
document.getElementById(imagename).src=newimg;
}
if (prog > 0){
if (subject == 'maths'){
newimg = "https://cloud.githubusercontent.com/assets/18613602/16158458/360f6844-34b5-11e6-845e-a222b3aadcfa.gif"
}
if (subject == 'science'){
newimg = 'https://cloud.githubusercontent.com/assets/18613602/16158465/3a279b68-34b5-11e6-8641-888d4e78b753.gif'
}
if (subject == 'reading'){
newimg = 'https://cloud.githubusercontent.com/assets/18613602/16158469/3ec8e82a-34b5-11e6-95a5-f71c2a34cbed.gif'
}
document.getElementById(imagename).src=newimg;
}
document.getElementById(divname).innerHTML = prog;
};
progress(d[0]['maths_progress'], 'maths', 'blue');
progress(d[0]['reading_progress'], 'reading', 'red');
progress(d[0]['science_progress'], 'science', 'green');
}
function getcountry(cvalue){
mycountry = cvalue;
if (mycountry.indexOf("%20") !== -1){
mycountry = mycountry.split('%20');
var text = '';
for (i = 0; i < mycountry.length; i++) {
text += mycountry[i] + " ";
}
mycountry = text.trim();
}
return mycountry;
}
function startpopup(){
d3.csv("pisa_map_data.csv", function(d) {
mycountry = getcountry(window.location.search.split('=')[1]);
if (mycountry.indexOf("%20") !== -1){
mycountry = mycountry.split('%20');
var text = '';
for (i = 0; i < mycountry.length; i++) {
text += mycountry[i] + " ";
}
mycountry = text.trim();
}
if (d.country == mycountry){
d['maths_meanscore'] = +d['maths_meanscore'] ;
d['maths_lowperform'] = +d['maths_lowperform'] ;
d['maths_highperform'] = +d['maths_highperform'] ;
d['maths_progress'] = +d['maths_progress'] ;
d['maths_ranking'] = +d['maths_ranking'] ;
d['reading_meanscore'] = +d['reading_meanscore'] ;
d['reading_lowperform'] = +d['reading_lowperform'] ;
d['reading_highperform'] = +d['reading_highperform'] ;
d['reading_progress'] = +d['reading_progress'] ;
d['reading_ranking'] = +d['reading_ranking'] ;
d['science_meanscore'] = +d['science_meanscore'] ;
d['science_lowperform'] = +d['science_lowperform'] ;
d['science_highperform'] = +d['science_highperform'] ;
d['science_progress'] = +d['science_progress'] ;
d['science_ranking'] = +d['science_ranking'] ;
return d;
}
}, drawgraphs);
}</script>
</head>
<script>
startpopup()
</script>
<body>
<table height="100%" width="100%">
<tbody>
<tr style="height: 8%;">
<td id='country'colspan=4 >
<script>
mycountry = getcountry(window.location.search.split('=')[1]);
document.getElementById('country').innerHTML = mycountry.toUpperCase();
</script>
</td>
</tr>
<tr style="height: 9%;">
<td id='myheader' width="12%">
</td>
<td id='myheader' width="48%">
average score</td>
<td id='myheader' width="25%">
academic level
</td>
<td id='myheader' width="15%">
progress
</td>
</tr>
<tr style="height: 25%;">
<td style='color: blue;' id='subject'>&nbsp;MATHS</td>
<td id="mathsbarchart" ></td>
<td id='pie'><div id="mathspiechart"></div><br><span style='color: #0099FF;'>
low (under Level 2)</span><br><span style='color:lightGrey'>
mid range (level 2 to 4)</span>
<br><span style='color: Blue;'>high (Level 5 and 6)</span><br></td>
<td id='mathsarrow'><img id='mathsimg' width='30px' height='30px'><br><br>
<div id='mathsdiv'></div><br><br></td>
</tr>
<tr style="height: 25%;">
<td style='color: red;' id='subject'>&nbsp;READING</td>
<td id="readingbarchart" ></td>
<td id='pie'><div id="readingpiechart"></div><br><br>
<span style='color: #FF9999;'>low (under Level 2)</span><br>
<span style='color:lightGrey'>mid range (level 2 to 4)</span><br>
<span style='color: red;'>high (Level 5 and 6)</span><br></td>
<td id='readingarrow'><img id='readingimg' width='30px' height='30px'><br><br>
<div id='readingdiv'></div><br><br></td>
</tr>
<tr style="height: 25%;">
<td style='color: green;'id='subject'>&nbsp;SCIENCE</td>
<td id="sciencebarchart"></td>
<td id='pie'><div id="sciencepiechart"></div><br><br>
<span style='color: #66CC66;'>low (under Level 2)</span><br>
<span style='color:lightGrey'>mid range (level 2 to 4)</span><br>
<span style='color: green;'>high (Level 5 and 6)</span><br></td>
<td id='sciencearrow'><img id='scienceimg' width='30px' height='30px'><br><br>
<div id='sciencediv'></div><br><br></td>
</tr>
<tr>
<td colspan=4 height='8%' id='averages'>
<br>
<b>OECD average academic levels:</b>
maths (low 23%, high 12.6%), reading (low 18%, high 9%), science (low 18%, high 8%)<br>
<b>OECD average progress:</b>maths -0.3%, reading 0.3%, science 0.5%
</
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment