|
var svg = d3.select('svg'); |
|
|
|
var first = true; |
|
|
|
var global_data; |
|
|
|
var selected_aspect = 'GNI'; |
|
|
|
var continent_color = d3.scale.ordinal() |
|
.domain(['Oceania','Europe','America','Asia','Africa','World']) |
|
.range(["#1F77B4","#FF7F0E","#2CA02C","#D62728","#8C564B","#fff"]); |
|
|
|
// header |
|
|
|
var header = svg.append('rect') |
|
.attr({ |
|
width: 960, |
|
height: 30, |
|
fill: 'lightgrey' |
|
}); |
|
|
|
// scatterplot |
|
|
|
var scatterplot_W = 400; |
|
var scatterplot = svg.append('g') |
|
.attr({ |
|
transform: 'translate(500,55)' |
|
}); |
|
|
|
var legend = svg.selectAll('.legend') |
|
.data(continent_color.domain()) |
|
.enter().append('g') |
|
.attr('class', 'legend') |
|
.attr('transform', function(d, i) { return 'translate(' + ((i*65)+220) + ', 8)'; }) |
|
.on('click', function(d){ |
|
d3.selectAll('.legend').classed("selected", false); |
|
d3.select(this).classed("selected", true); |
|
draw_charts(global_data, d, selected_aspect) |
|
}); |
|
|
|
legend.append('rect') |
|
.attr('x', scatterplot_W - 12) |
|
.attr('width', 12) |
|
.attr('height', 12) |
|
.style('fill', continent_color); |
|
|
|
legend.append('text') |
|
.attr('x', scatterplot_W - 18) |
|
.attr('y', 6) |
|
.attr('dy', '.35em') |
|
.style('text-anchor', 'end') |
|
.text(function(d) { return d; }); |
|
|
|
var scatter_GNI = d3.scale.linear() |
|
.range([scatterplot_W,0]); |
|
|
|
var scatter_selected_aspect = d3.scale.linear() |
|
.range([scatterplot_W,0]); |
|
|
|
var scatter_HDI = d3.scale.linear() |
|
.range([0,scatterplot_W]); |
|
|
|
// slopegraph |
|
|
|
var D = 350; |
|
var slopegraph = svg.append('g') |
|
.attr({ |
|
transform: 'translate(40,55)' |
|
}); |
|
|
|
var slopegraph_selected_aspect = d3.scale.linear() |
|
.range([scatterplot_W,0]); |
|
|
|
var slopegraph_HDI = d3.scale.linear() |
|
.range([scatterplot_W,0]); |
|
|
|
var select_countries = d3.select("body").append("div") |
|
.attr("class","select_countries") |
|
.append("select") |
|
|
|
var select_aspect = d3.select("body").append("div") |
|
.attr("class","select_aspect") |
|
.append("select") |
|
|
|
select_aspect.append('option') |
|
.text('GNI') |
|
.attr('value','GNI') |
|
|
|
select_aspect.append('option') |
|
.text('LIFE') |
|
.attr('value','LIFE') |
|
|
|
slopegraph.append('line') |
|
.attr({ |
|
x1: 0, |
|
y1: 0, |
|
x2: 0, |
|
y2: scatterplot_W, |
|
stroke: '#CCC' |
|
}); |
|
|
|
slopegraph.append('line') |
|
.attr({ |
|
x1: D, |
|
y1: 0, |
|
x2: D, |
|
y2: scatterplot_W, |
|
stroke: '#CCC' |
|
}); |
|
|
|
select_countries.on('input', function(){ |
|
select(this.value); }); |
|
|
|
select_aspect.on('input', function(){ |
|
d3.selectAll('.legend').classed('selected', false) |
|
draw_charts(global_data, "World", this.value) |
|
selected_aspect = this.value |
|
}); |
|
|
|
|
|
d3.csv('visual_analytics.csv', function(data) { |
|
|
|
data.forEach(function(d){ |
|
d.HDI_value = +(d.HDI_value).replace(',','.'); |
|
d.GNI_value = +(d.GNI_value).replace(',','.'); |
|
d.LIFE_value = +(d.LIFE_value).replace(',','.'); |
|
}); |
|
|
|
global_data = data; |
|
|
|
draw_charts(data, "World", selected_aspect) |
|
}); |
|
|
|
function draw_charts(data, continent, selected_aspect) { |
|
console.log(data) |
|
select(""); |
|
select_countries.node().value = "Select country"; |
|
|
|
legend.selectAll('.legend rect') |
|
.classed('selected', function(d){ return d == continent }); |
|
|
|
scatter_HDI |
|
.domain([d3.min(data, function(d){ return d.HDI_value; }), d3.max(data, function(d){ return d.HDI_value; })]); |
|
|
|
scatter_selected_aspect |
|
.domain([d3.min(data, function(d){ return d[selected_aspect + '_value']; }), d3.max(data, function(d){ return d[selected_aspect + '_value']; })]); |
|
|
|
slopegraph_HDI |
|
.domain([d3.min(data, function(d){ return d.HDI_value; }), d3.max(data, function(d){ return d.HDI_value; })]); |
|
|
|
slopegraph_selected_aspect |
|
.domain([d3.min(data, function(d){return d[selected_aspect + '_value']; }), d3.max(data, function(d){ return d[selected_aspect + '_value']; })]); |
|
|
|
d3.selectAll('.title').remove(); |
|
|
|
var title_selected_aspect = slopegraph.append('text') |
|
.attr({ |
|
class: 'title', |
|
x: 0, |
|
y: 415, |
|
}) |
|
.text(selected_aspect); |
|
|
|
var title_HDI = slopegraph.append('text') |
|
.attr({ |
|
class: 'title', |
|
x: D-20, |
|
y: 415, |
|
}) |
|
.text('HDI'); |
|
|
|
|
|
// Axes |
|
var axis_scatter_GNI = d3.svg.axis() |
|
.scale(scatter_selected_aspect) |
|
.orient('left') |
|
.tickFormat(d3.format('s')); |
|
|
|
d3.selectAll('.axis').remove(); |
|
|
|
scatterplot.append('g') |
|
.attr('class', 'y axis') |
|
.call(axis_scatter_GNI) |
|
.append('text') |
|
.attr('class', 'label') |
|
.attr('transform', 'rotate(-90)') |
|
.attr('y', 6) |
|
.attr('dy', '.71em') |
|
.style('text-anchor', 'end') |
|
.text(function (d) { |
|
if (selected_aspect == "GNI") { |
|
return selected_aspect +' ($)' |
|
} else { |
|
return selected_aspect +' (years)' |
|
} |
|
}); |
|
|
|
var axis_scatter_HDI = d3.svg.axis() |
|
.scale(scatter_HDI) |
|
.orient('bottom'); |
|
|
|
scatterplot.append('g') |
|
.attr('class', 'x axis') |
|
.attr('transform', 'translate(0,' + scatterplot_W + ')') |
|
.call(axis_scatter_HDI) |
|
.append('text') |
|
.attr('class', 'label') |
|
.attr('x', scatterplot_W) |
|
.attr('y', -6) |
|
.style('text-anchor', 'end') |
|
.text('HDI'); |
|
|
|
|
|
if (continent == "World") { |
|
data = data |
|
} else { |
|
data = data.filter(function(d) { return d.Continent == continent; }); |
|
}; |
|
|
|
// dots |
|
dots = scatterplot.selectAll('.dot') |
|
.data(data, function(d) { |
|
return d.Country; |
|
}); |
|
|
|
var enter_dots = dots.enter().append('circle') |
|
.attr({ |
|
class: 'dot', |
|
r: 2, |
|
fill: function(d) { return continent_color(d.Continent); } |
|
|
|
}) |
|
.on('mouseover', function(d){ |
|
highlight(d.Country); |
|
}) |
|
.on('mouseout', function(d){ |
|
highlight(""); |
|
}) |
|
.on('click', function(d){ |
|
select(d.Country); |
|
}); |
|
|
|
enter_dots.append('title'); |
|
|
|
dots.select('title') |
|
.text(function(d){ return d.Country + '\nHDI ' + d.HDI_value + '\n' + selected_aspect + ' ' + (d[selected_aspect + '_value']) +''; }); |
|
|
|
dots.transition(1000) |
|
.attr({ |
|
cx: function(d) { return scatter_HDI(d.HDI_value); }, |
|
cy: function(d) { console.log(selected_aspect); return scatter_selected_aspect(d[selected_aspect + '_value']); }, |
|
}) |
|
|
|
dots.exit().remove(); |
|
|
|
|
|
var lines_transparent = slopegraph.selectAll('.transparent') |
|
.data(data, function(d) { return d.Country; }); |
|
|
|
var enter_lines_transparent = lines_transparent.enter().append('line') |
|
.attr({ |
|
class: 'transparent', |
|
x1: 0, |
|
x2: D |
|
}); |
|
|
|
lines_transparent.append('title'); |
|
|
|
lines_transparent.select('title') |
|
.text(function(d){ return d.Country + '\nHDI ' + d.HDI_value + '\n' + selected_aspect + ' ' + (d[selected_aspect + '_value']) +''; }); |
|
|
|
lines_transparent |
|
.attr({ |
|
y1: function(d){ return slopegraph_selected_aspect(d[selected_aspect + '_value']); }, |
|
y2: function(d){ return slopegraph_HDI(d.HDI_value);}, |
|
stroke: function(d){ return continent_color(d.Continent); } |
|
}) |
|
.on('mouseover', function(d){ |
|
highlight(d.Country); |
|
}) |
|
.on('mouseout', function(d){ |
|
highlight(""); |
|
}) |
|
.on('click', function(d){ |
|
select(d.Country); |
|
}); |
|
|
|
lines_transparent.exit().remove(); |
|
|
|
|
|
// slopegraph |
|
|
|
// lines |
|
var lines = slopegraph.selectAll('.line') |
|
.data(data, function(d) { return d.Country }); |
|
|
|
var enter_lines = lines.enter().append('line') |
|
.attr({ |
|
class: 'line', |
|
x1: 0, |
|
x2: D |
|
}) |
|
|
|
enter_lines.append('title') |
|
.text(function(d){ return d.Country + '\nHDI ' + d.HDI_value + '\n' + selected_aspect + ' ' + (d[selected_aspect + '_value']) +''; }); |
|
|
|
lines.transition(1000) |
|
.attr({ |
|
y1: function(d){ return slopegraph_selected_aspect(d[selected_aspect + '_value']); }, |
|
y2: function(d){ return slopegraph_HDI(d.HDI_value);}, |
|
stroke: function(d){ return continent_color(d.Continent); } |
|
}); |
|
|
|
lines.exit().remove(); |
|
|
|
var text_HDI = slopegraph.selectAll(".text_HDI") |
|
.data(data); |
|
|
|
var text_HDI_enter = text_HDI.enter().append("text") |
|
.attr("class","text text_HDI") |
|
.attr("x", D+3) |
|
.attr("font-family", "sans-serif") |
|
.attr("font-size", "9px") |
|
.attr('opacity',0) |
|
|
|
text_HDI |
|
.attr("y", function(d) { return slopegraph_HDI(d.HDI_value);}) |
|
.text(function(d){ return d["HDI_value"]; }); |
|
|
|
|
|
var text_selected_aspect = slopegraph.selectAll(".text_selected_aspect") |
|
.data(data); |
|
|
|
var text_selected_aspect_enter = text_HDI.enter().append("text") |
|
.attr("class","text text_selected_aspect") |
|
.attr("x", -5) |
|
.attr("font-family", "sans-serif") |
|
.attr("font-size", "9px") |
|
.attr('text-anchor', 'end') |
|
.attr('opacity',0) |
|
.attr("y", function(d) { return slopegraph_selected_aspect(d[selected_aspect + '_value']);}) |
|
.text(function(d){ return d[selected_aspect + '_value']; }); |
|
|
|
text_selected_aspect |
|
.attr("y", function(d) { return slopegraph_selected_aspect(d[selected_aspect + '_value']);}) |
|
.text(function(d){ return d[selected_aspect + '_value']; }); |
|
|
|
|
|
option_countries = select_countries.selectAll("option") |
|
.data([{ Country:'Select country' }].concat(data.sort(function(a,b){ |
|
if (a.Country > b.Country) { |
|
return 1 |
|
} else { |
|
return -1 |
|
} |
|
}))); |
|
|
|
enter_select = option_countries.enter() |
|
.append("option"); |
|
|
|
option_countries |
|
.attr("value", function(d){ return d.Country; }) |
|
.text(function(d){ return d.Country; }); |
|
|
|
option_countries.exit().remove(); |
|
|
|
} |
|
|
|
function highlight(what) { |
|
scatterplot.selectAll('.dot') // cambia nome a sta cosa! :D |
|
.classed('highlighted', function(d){ return d.Country == what;}); |
|
|
|
slopegraph.selectAll('.line') // cambia nome a sta cosa! :D |
|
.classed('highlighted', function(d){ return d.Country == what;}); |
|
|
|
slopegraph.selectAll('.text_HDI') |
|
.classed('highlighted', function(d){ return d.Country == what;}); |
|
|
|
slopegraph.selectAll('.text_selected_aspect') |
|
.classed('highlighted', function(d){ return d.Country == what;}); |
|
|
|
} |
|
|
|
function select(what) { |
|
scatterplot.selectAll('.dot') // cambia nome a sta cosa! :D |
|
.classed('selected', function(d){ return d.Country == what; }); |
|
|
|
slopegraph.selectAll('.line') // cambia nome a sta cosa! :D |
|
.classed('selected', function(d){ return d.Country == what; }); |
|
|
|
slopegraph.selectAll('.text_HDI') |
|
.classed('selected', function(d){ return d.Country == what; }); |
|
|
|
slopegraph.selectAll('.text_selected_aspect') |
|
.classed('selected', function(d){ return d.Country == what; }); |
|
select_countries.node().value = what; |
|
} |
|
|
|
function myBrowser() { |
|
if(navigator.userAgent.indexOf("Chrome") != -1 ) |
|
{ |
|
} else { |
|
alert('Si consiglia l\'utilizzo di Google Chrome per la visualizzazione della pagina'); |
|
} |
|
} |