|
|
|
|
|
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("There are 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 is around average on all subjects but this is only 3% off low achievement.') |
|
msg.push('Why are we doing so badly, particularly against our peers in Europe?') |
|
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); |
|
|
|
} |
|
|
|
}; |
