//move element to front on mouseover
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
var svg_width=1000, svg_height=550;
var margin = {
'top': 50,
'right': 50,
'bottom': 50,
'left': 50
};
var map_width = svg_width - (margin.left + margin.right),
map_height = svg_height - (margin.top + margin.bottom);
// Various formatting rules used
var format = d3.time.format("%d-%b-%y"),
yearFormat = d3.time.format('%Y'),
monthFormat = d3.time.format('%m'),
monthName = d3.time.format('%B'),
dateDisplay = d3.time.format('%Y-%m'),
color_scale = d3.scale.category20()
numberFormat = d3.format(',');
queue()
.defer(d3.json, "WorldMap.json")
.defer(d3.csv, "GlobalFloodsRecord.csv")
.await(function(error, world_json, floods_data) {
var countries = world_json['features'];
console.log(countries);
// Only add events with dates
var clean_data = []
floods_data.forEach(function(d){
d['Began'] = format.parse(d['Began']);
d['Ended'] = format.parse(d['Ended']);
if (d['Began']) {
d['Year'] = yearFormat(d['Began']);
d['Month'] = monthFormat(d['Began']);
}
if (d['Year']) {
clean_data.push(d)
}
})
floods_data = clean_data
// Group by years, then months
var nested_data = d3.nest()
.key(function(d){ return d['Year']; })
.key(function(d){ return d['Month']; })
.entries(floods_data);
// Scales for the data
var max_disp = d3.max(floods_data, function(d){ return +d['Displaced']; });
var disp_scale = d3.scale.log().domain([1, max_disp]).range([5, 35]);
var time_extent = d3.extent(floods_data, function(d){ return d['Began']; }),
time_scale = d3.time.scale().domain(time_extent).range([0, map_width]),
time_axis = d3.svg.axis().scale(time_scale).orient('bottom').tickFormat(yearFormat).ticks(10);
// Append map elements
var svg = d3.select("#map")
.append('svg')
.attr("viewBox", "0 0 " + svg_width + " " + svg_height)
.style("max-width", svg_width + "px")
.attr("preserveAspectRatio", "xMidYMid meet")
.attr('id', 'svg');
var map = svg.append("g")
.attr('class', 'svg-map')
.attr('transform', "translate(" + margin.left + ", " + margin.top + ")");
var floods = svg.append("g")
.attr('class', 'svg-flood')
.attr('transform', "translate(" + margin.left + ", " + margin.top + ")");
var flood_circles = floods.selectAll('circle')
// Project the map
var projection = d3.geo.mercator()
.center([1, 32])
.scale(140),
path = d3.geo.path().projection(projection);
// Draw the world map
map.selectAll("path")
.data(countries)
.enter()
.append("path")
.attr('d', path)
.attr('class', function(d){
return "country-" + d['properties']['formal_en'];
})
.style('fill', '#e1e1e1')
.style('stroke', '#ffffff');
// Draws the flood events for a given year/month combination
function draw_floods(year, month) {
if (nested_data[year]['values'][month]['values']) {
var temp_circles = flood_circles
.data(nested_data[year]['values'][month]['values'])
.enter()
.append('circle')
.attr('class', 'flood-circles')
.style('fill', '#3182bd')
.on('mouseover', function(d){
var parentOffset = $('.container').offset();
d3.select(this).moveToFront();
d3.select(this).style('opacity', .8);
d3.select('#tooltip')
.style('visibility','visible')
.style('top', d3.event.pageY + 10 + 'px')
.style('left', d3.event.pageX + 20 + 'px')
.html(tooltip_text(d))
.transition().style('opacity', .9);
})
.on('mouseout', function(d){
d3.select(this).style('opacity', .5);
d3.select('#tooltip')
.transition().style('opacity', 0);
});
temp_circles = temp_circles.transition()
.attr('r', 1)
.attr('cx', function(d){
return projection([d['Centroid X'],d['Centroid Y']])[0];
})
.attr('cy', function(d){
return projection([d['Centroid X'],d['Centroid Y']])[1];
})
.style('opacity', 0.5);
var temp_circles = temp_circles
.transition()
.attr('r', function(d){
if (disp_scale(d['Displaced']) > 0) {
return disp_scale(d['Displaced']);;
}
else {
return 3;
}
});
d3.select('#current-month')
.html(''+ monthName(new Date(2016,month+1,6)) +'
'+(year+1985))
return temp_circles;
}
};
// Formatting text inside the tooltip
function tooltip_text(d) {
text = '