Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

Commit

Permalink
Search functionality implemented
Browse files Browse the repository at this point in the history
  • Loading branch information
Miguel Barrenechea committed Nov 30, 2015
1 parent ce60d54 commit 433e86d
Show file tree
Hide file tree
Showing 7 changed files with 637 additions and 314 deletions.
52 changes: 46 additions & 6 deletions app/assets/javascripts/countries/views/CountryPantropicalView.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
define([
'backbone',
'd3',
'countries/views/pantropical/PantropicalTotalEmissionsView',
'countries/views/pantropical/vis',
'chosen',

], function(Backbone, PantropicalTotalEmissionsView) {
], function(Backbone, d3, PantropicalTotalEmissionsView, vis, chosen) {

'use strict';

Expand All @@ -18,14 +20,16 @@ define([
'change #year-drop-left' : '_set_year',
'change #year-drop-right' : '_set_year',
'click .btn-submit' : '_submityears',
'click #play-pause' : '_play_pause'
'click #play-pause' : '_play_pause',
'change #pantropical-search' : '_search_country'
},

initialize: function() {
//I can't find who is giving display:block to country tab...
$('#vis').find('.country').hide();
this._cacheVars();
this._setRankingAverage();
this._setAutocomplete();
},

_setRankingAverage: function() {
Expand All @@ -36,6 +40,7 @@ define([
this.$years = $('#year-picker');
this.$yearsPickerLabel = $('#year-picker-label');
this.$play_pause = $('#play-pause');
this.$search = $('#pantropical-search');
},

switch_view: function(e) {
Expand Down Expand Up @@ -89,15 +94,15 @@ define([

$.each(options, function() {
value = this.value;

if (value < self.year_left) {
$(this).addClass('is-disabled');
$(this).attr('disabled', true);

// $opositeSelector.val(self.year_left)
} else {
$(this).removeClass('is-disabled');
$(this).attr('disabled', false);
$(this).attr('disabled', false);
}
})

Expand All @@ -114,15 +119,15 @@ define([
// $opositeSelector.val(self.year_right)
} else {
$(this).removeClass('is-disabled');
$(this).attr('disabled', false);
$(this).attr('disabled', false);
}
})
}
},

_change_year: function(e, year_moved) {
var year = (e) ? e.currentTarget.value : year_moved;

this.$yearsPickerLabel.val(year);
this._setLabelPosition(year);

Expand Down Expand Up @@ -174,6 +179,41 @@ define([
if (this.$yearsPickerLabel.val() <= this.$years.attr('max'))
target.removeClass('is-playing').addClass('stop');
}
},

_setAutocomplete: function() {
this.$search.chosen({
width: '100%',
});
d3.csv("/pantropicalTESTING_isos.csv", _.bind(function(data) {
this.$search.html('<option value="">Select country</option>');
var options = _.compact(_.map(_.sortBy(data, 'Country'), function(d){
if (parseFloat(d.Average).toFixed(3) > 0.003) {
return '<option value="'+d.FIPS_CNTRY+'">'+d.Country+'</option>';
}
return null;
}));
this.$search.append(options.join('')).trigger('chosen:updated');
}, this ));
},

_search_country: function(e) {
d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); };
var iso = $(e.currentTarget).val();
if(!!iso) {
_.each($('#svg_vis').find('.bubble'), function(b){
if(iso === $(b).data('iso')) {
$(b).attr("opacity",'1');
d3.select(b).moveToFront();
} else {
$(b).attr("opacity",'0.25');
}
})
} else {
_.each($('#svg_vis').find('.bubble'), function(b){
$(b).attr("opacity",'1');
})
}
}

});
Expand Down
28 changes: 15 additions & 13 deletions app/assets/javascripts/countries/views/pantropical/vis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ function addCommas(nStr) {
};

return _this.nodes.push(node);
}
}
};
})(this));
return this.nodes.sort(function(a, b) {
Expand All @@ -226,7 +226,7 @@ function addCommas(nStr) {
return d.id;
});
that = this;
this.circles.enter().append("circle").attr("r", 0).attr("fill", (function(_this) {
this.circles.enter().append("circle").attr("class", "bubble").attr("r", 0).attr("fill", (function(_this) {
return function(d) {
return _this.fill_color(d.group);
};
Expand All @@ -236,6 +236,8 @@ function addCommas(nStr) {
};
})(this)).attr("id", function(d) {
return "bubble_" + d.id;
}).attr("data-iso", function(d) {
return d.iso;
}).on("mouseenter", function(d, i) {
var el = d3.select(this);
var xpos = ~~el.attr('cx') - 115;
Expand Down Expand Up @@ -356,8 +358,8 @@ function addCommas(nStr) {
return _this.circles.each(_this.mandatorySort(e.alpha)).each(_this.buoyancy(e.alpha)).attr("cx", function(d) {
return d.x;
}).attr("cy",
function(d) {
return d.y;
function(d) {
return d.y;
})
};
})(this));
Expand Down Expand Up @@ -406,8 +408,8 @@ function addCommas(nStr) {
return _this.circles.each(_this.mandatorySort(e.alpha)).each(_this.buoyancy(e.alpha)).attr("cx", function(d) {
return d.x;
}).attr("cy",
function(d) {
return d.y;
function(d) {
return d.y;
})
};
})(this));
Expand Down Expand Up @@ -455,7 +457,7 @@ function addCommas(nStr) {
var that = this;
var circles = that.circles;
var style_string;

circles
.attr("r", function(d) {
id = d.id;
Expand All @@ -466,13 +468,13 @@ function addCommas(nStr) {
break;
}
}

return that.radius_scale(value * 1.6);
})
.each( function(d) {
var coordinates = [];
var label_text = "";

//Avoid non-NYDF and NYDF bubles.
values_array = values_array
.filter(function (i) {
Expand Down Expand Up @@ -509,7 +511,7 @@ function addCommas(nStr) {
window.location.href = url;
})
.on("mouseenter",function() {
d3.event.stopPropagation();
d3.event.stopPropagation();
});

return circles;
Expand All @@ -529,7 +531,7 @@ function addCommas(nStr) {
if ( order === 1 && radius < 47.5 || order === 2 && radius < 47.5 || order === 3 && radius < 47.5) {
var y_coord_country = 'y="' + (coordinates[1]+60) + '" ';
var y_coord_data = 'y="' + (coordinates[1]+80) + '" ';
}
}

if ( radius > 47.5 ) {
var y_coord_country = 'y="' + (coordinates[1]) + '" ';
Expand All @@ -552,7 +554,7 @@ function addCommas(nStr) {
y_coord_data +
'data-url=countries/'+ iso +
' text-anchor="middle">' +
parseFloat(data*100).toFixed(3) + '%' +
parseFloat(data*100).toFixed(3) + '%' +
'</text>';

$('.bubble-label').on('click', function(e) {
Expand Down Expand Up @@ -666,7 +668,7 @@ function addCommas(nStr) {
if (sorted_index === 0 ) {
offset_x = 225
}

if (sorted_index === 3 ) {
offset_x = 260
}
Expand Down
6 changes: 5 additions & 1 deletion app/assets/stylesheets/countries.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,13 @@
@import "modules/widgets/*";
@import "modules/widgets/charts/*";

// Pantropical: we should remove this to another tab
@import "modules/pantropical/m-pantropical";

// Common
@import "states";
@import "modules/common/*";
@import "modules/common/m-fixed-header";
@import "modules/common/m-toolbar";

// Layouts
@import "layouts/countries";
Expand Down

0 comments on commit 433e86d

Please sign in to comment.