//------------------------------ document.ready
$(function() {
if (typeof window.preprocessScreen == 'function')
preprocessScreen();
populateChoices();
setChoiceDialog();
localizedTitles(window.global.lang_switch_id ? window.global.lang_switch_id : "dummy");
var first = window.global.indicators[0].name;
var second = window.global.indicators[1].name;
$('#select_'+first).hide();
$('#legend_'+second).hide();
$('.choice').change(function(e){
var chosen = $(e.target).val();
var other = second;
if (chosen == second)
other = first;
$('#select_'+chosen).hide();
$('#legend_'+other).hide();
$('#select_'+other).show();
$('#legend_'+chosen).show();
$('#select_'+other+' select').val('all');
color(chosen, 'all');
});
$('#select_'+first).change(function(e){
color(second, $(e.target).val().replace('_option',''));
});
$('#select_'+second).change(function(e){
color(first, $(e.target).val().replace('_option',''));
});
loadSvgAndImportData(window.global.map_url, window.global.data_url);
});
//-------------------------------------- loadSvgAndImportData
function loadSvgAndImportData(svgurl, dataurl){
d3.xml(svgurl, "image/svg+xml", function(xml) {
var importedNode;
try{
importedNode = document.importNode(xml.documentElement, true);
}catch(e){
// IE case
importedNode = importNode(xml.documentElement, document);
}
$('#overall').append(importedNode);
if (typeof window.preprocessMap == 'function')
preprocessMap();
window.global.svgWidth = d3.select('#overall svg').attr('width');
window.global.svgHeight = d3.select('#overall svg').attr('height');
importData(dataurl);
});
}
//-------------------------------------- importData
function importData(dataurl){
d3.csv(dataurl, function(data) {
d3.selectAll('#' + window.global.region +' path')
.data(data)
.on('mouseover', function(d,i){
setResetStrokeWidth(this, 'set');
displayRegion(d, false);
})
.on('mouseout', function(d,i){
setResetStrokeWidth(this, 'reset');
displayRegion(window.global.overall, true);
});
// remove the font embedded in the svg text
d3.selectAll('text')
.attr('style', null);
var first = window.global.indicators[0].name;
color(first, 'all');
displayRegion(window.global.overall, true);
});
}
//-------------------------------------- setResetStrokeWidth
function setResetStrokeWidth(elem, action){
if (window.global.svg){
var suffix = "";
if (action == 'set')
suffix = "_sel";
d3.select(elem).attr('stroke-width',window.global.svg['stroke_width'+suffix] ? window.global.svg['stroke_width'+suffix] : "1");
}else{
if (action == 'set')
d3.select(elem).attr('stroke-width', "3");
else
d3.select(elem).attr('stroke-width', "1");
}
}
//-------------------------------------- populateChoices
function populateChoices(){
var first = window.global.indicators[0].name;
var second = window.global.indicators[1].name;
$('form').append('');
$('form').append('');
$('form').append('');
var levels;
for (var ind=0; ind < 2; ++ind){
var legend = 'legend_'+window.global.indicators[ind].name;
$('form').append('
');
levels = window.global.indicators[ind].levels;
for (var i=0, len = levels.length; i < len; ++i){
var level= levels[i][0];
$('#'+legend).append(' ');
}
}
for (var ind=0; ind < 2; ++ind){
var indicator = window.global.indicators[ind].name;
var select = 'select_'+indicator;
var choose = 'choose_'+indicator;
$('form').append('
');
// for some reason, need to insert dummy option for subsequent options to show up
$('#'+select).append('');
$('#'+select+' select').append('');
levels = window.global.indicators[ind].levels;
for (var i=0, len = levels.length; i < len; ++i){
var level= levels[i][0];
$('#'+select+' select').append('');
}
}
}
//--------------------------------------
function importNode(node, allChildren) {
// summary: Manually imports node to the provided document; to overcome the IE DOMException encountered upon appending the imported SVG
switch (node.nodeType) {
case document.ELEMENT_NODE:
var newNode = document.createElementNS(node.namespaceURI, node.nodeName);
if(node.attributes && node.attributes.length > 0) {
for(var i = 0, il = node.attributes.length; i < il; i++) {
newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i].nodeName));
}
}
if(allChildren && node.childNodes && node.childNodes.length > 0) {
for(var i = 0, il = node.childNodes.length; i < il; i++) {
newNode.appendChild(importNode(node.childNodes[i], allChildren));
}
}
return newNode;
break;
case document.TEXT_NODE:
case document.CDATA_SECTION_NODE:
case document.COMMENT_NODE:
return document.createTextNode(node.nodeValue);
break;
}
}
//-------------------------------------- color
function color(colorby, other_selection){
d3.selectAll('#' + window.global.region + ' path')
.attr('style', function (d){ return 'fill:'+window.global.colors[getColor(d, colorby, other_selection)];});
}
//-------------------------------------- displayRegion
function displayRegion(row, bOverall){
var na = getGlobalArrHashAttrib('titles', 'na', window.global.lang);
var first = window.global.indicators[0].name;
var second = window.global.indicators[1].name;
var other1 = window.global.other_vars[0];
var other2 = window.global.other_vars[1];
var lvlFirst = '';
var lvlSecond = '';
var valOther1 = na;
var valOther2 = na;
if (row[other1])
valOther1 = row[other1];
if (row[other2])
valOther2 = row[other2];
var region = getGlobalArrHashAttrib('titles', row.id, window.global.lang);
$('#'+window.global.region).text(region.replace('.','','g'));
if (!bOverall){
var na_descr = getGlobalArrHashAttrib('titles', 'na', window.global.lang);
lvlFirst = getLevel(row[first], first);
lvlFirst = lvlFirst == 'na' ? na_descr : getGlobalArrHashAttrib('titles', lvlFirst+'_option', window.global.lang);
lvlFirst = ' ('+lvlFirst +')';
lvlSecond = getLevel(row[second], second);
lvlSecond = lvlSecond == 'na' ? na_descr : getGlobalArrHashAttrib('titles', lvlSecond+'_option', window.global.lang);
lvlSecond = ' ('+lvlSecond +')';
}
// no need for value (lvl....) when no_range_compare is true meaning direct equality comparison
var data1 = window.global.indicators[0].no_range_compare ? lvlFirst : addCommas(row[first]) + lvlFirst;
var data2 = window.global.indicators[1].no_range_compare ? lvlSecond : addCommas(row[second])+ lvlSecond;
$('#'+first).text(data1);
$('#'+second).text(data2);
$('#'+other1).text(addCommas(valOther1));
$('#'+other2).text(addCommas(valOther2));
}
//-------------------------------------- getColor
function getColor(d, colorby, other_selection){
var other;
var first = window.global.indicators[0].name;
var second = window.global.indicators[1].name;
if (colorby == first)
other = second;
else
other = first;
if (matchOtherSelection(d, other, other_selection)){
return getLevel(d[colorby], colorby);
}else
return 'na';
}
//-------------------------------------- getLevel
function getLevel(amount, type){
var ind, levels;
if (type == window.global.indicators[0].name) // i.e. first indicator
ind = 0;
else
ind = 1;
levels = window.global.indicators[ind].levels;
if (amount == '')
return 'na';
else{
for (var i=0, len = levels.length; i < len; ++i){
if (compareLevels(levels, ind, i, amount))
return levels[i][0];
}
return 'na';
}
}
//-------------------------------------- matchOtherSelection
function matchOtherSelection(d, other, other_selection){
if (other_selection == 'all')
return true;
else{
var ind, levels;
if (other == window.global.indicators[0].name) // i.e. first indicator
ind = 0;
else
ind = 1;
levels = window.global.indicators[ind].levels;
var amount = d[other];
// now locate proper level in levels
for (var i=0, len = levels.length; i < len; ++i)
if (other_selection == levels[i][0]){
return compareLevels(levels, ind, i, amount);
}
return false;
}
}
//-------------------------------------- compareLevels
function compareLevels(levels, indicator, index, amount){
var low = levels[index][1];
var high = window.global.indicators[indicator].no_range_compare ? levels[index][1] : levels[index][2];
return (low != null ? amount >= low : true) && (high != null ? amount <= high : true);
}
//-------------------------------------- setChoiceDialog
/* This function and the next one, showIndicators, work in tandem. They allow the user to choose two indicators, first (primary_ind) and
* second (compare_ind). When both are chosen, switch.py is called with these two parameters (and window.global.lang). So whenever a
* visual wants to add this capability, the following needs to be done:
* 1. A link from ../cgi-bin/switch.py needs to be copied to the current folder (so that all files referred to in switch.py are found)
* 2. The hashtagged #first and #second named templates need to be strategically placed in the index file templated read and displayed by
* switch.py (the javascript code segment included in the prologue for switch.py gives an idea of the kinds of switches (i.e. text
* replacements) are done with the provided #first and #second templates
* 3. Additional parameters need to be supplied by appropriately placement of the following tags in the index file template for the choice
* behavior to work:
* 1.
*
*
*
*
*
*
*
*
*
*
*
*
*
* 2.
*
*
*/
function setChoiceDialog(){
$("#choice_dialog").dialog({
title: getGlobalArrHashAttrib('titles', 'choose_ind', window.global.lang),
autoOpen: false,
modal: true,
width: 500,
buttons: [
{
text: getGlobalArrHashAttrib('titles', 'ok', window.global.lang),
click: function() {
var first = $('#first_ind').attr('value');
var second = $('#second_ind').attr('value');
if (first != second){
$(this).dialog('close');
window.location.href = 'switch.py?first='+first+'&second='+second+'&index=index-template&lang='+window.global.lang;
}
}
},
{
text: getGlobalArrHashAttrib('titles', 'cancel', window.global.lang),
click: function(){
$(this).dialog('close');
}
}
]
});
// Populate Indicator choice dialog
showIndicators('primary_ind');
showIndicators('compare_ind');
$('#choose_ind').click(function(){
$("#choice_dialog").dialog( "open" )
});
}
//-------------------------------------- showIndicators
/* Works together with setChoiceDialog above. See detailed notes in the prologue for setChoiceDialog
*/
function showIndicators(div_id){
var bFirst = div_id == 'primary_ind';
var sel_type = bFirst ? 'first' : 'second';
$('#'+div_id).empty();
$('.choose_indicator a').unbind('click');
$('#'+div_id).append('
');
var indarr = [];
var select = $('#'+sel_type+'_ind').attr('value');
var first;
if (!bFirst)
first = $('#first_ind').attr('value');
for (var ind in window.global.overall)
if (window.global.overall.hasOwnProperty(ind) && ind != 'id' && (bFirst ? true : ind != first))
indarr.push([getGlobalArrHashAttrib('titles', ind, window.global.lang),ind]); // first element is description, second is id
indarr.sort();
for (var i=0, len=indarr.length; i < len; ++i)
$('#'+div_id).append('