|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> /* set the CSS */ |
|
.overlay { |
|
fill: none; |
|
pointer-events: all; |
|
} |
|
|
|
.focus circle { |
|
fill: none; |
|
stroke: steelblue; |
|
} |
|
|
|
.axis--x path { |
|
<!--display: none;--> |
|
} |
|
|
|
.line { |
|
fill: none; |
|
stroke: steelblue; |
|
stroke-width: 1.5px; |
|
} |
|
|
|
div.tooltip { |
|
position: absolute; |
|
text-align: center; |
|
width: 60px; |
|
height: 28px; |
|
padding: 2px; |
|
font: 12px sans-serif; |
|
background: lightsteelblue; |
|
border: 0px; |
|
border-radius: 8px; |
|
pointer-events: none; |
|
} |
|
|
|
</style> |
|
<body> |
|
<div> |
|
<select id="countrySelection" onchange="updateCountry()"> |
|
<option value="bolivia">Bolivia</option> |
|
<option value="brazil">Brazil</option> |
|
<option value="chile">Chile</option> |
|
<option value="colombia">Colombia</option> |
|
<option value="ecuador">Ecuador</option> |
|
<option value="guyana">Guyana</option> |
|
<option value="paraguay">Paraguay</option> |
|
<option value="peru">Peru</option> |
|
<option value="suriname">Suriname</option> |
|
<option value="uruguay">Uruguay</option> |
|
<option value="venezuela">Venezuela</option> |
|
</select> |
|
</div> |
|
<!-- load the d3.js library --> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script> |
|
//Select |
|
//var select = d3.select("#countries").property("value"); |
|
|
|
//Graph |
|
var margin = {top: 20, right: 20, bottom: 30, left: 50}, |
|
width = 900 - margin.left - margin.right, |
|
height = 500 - margin.top - margin.bottom; |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", 960) |
|
.attr("height", 500) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left +", "+margin.top+")"); |
|
|
|
var parseTime = d3.timeParse("%Y"), |
|
bisectDate = d3.bisector(function(d) { return d.date; }).left; |
|
|
|
var x = d3.scaleTime().rangeRound([0, width]); |
|
|
|
var y = d3.scaleLinear().rangeRound([height, 0]); |
|
|
|
var z = d3.scaleOrdinal(d3.schemeCategory10); |
|
|
|
var line = d3.line() |
|
//.curve(d3.curveBasis) //makes a smooth line |
|
.x(function(d) {return x(d.date);}) |
|
.y(function(d) {return y(d.rates);}); |
|
/* |
|
d3.csv("bolivia.csv", function(d){ |
|
d.date = parseTime(d.date); |
|
d.sanitation = +d.sanitation; |
|
return d; |
|
}, function(error, data){ |
|
if (error) throw error; |
|
|
|
x.domain(d3.extent(data, function(d){return d.date;})); |
|
y.domain(d3.extent(data, function(d){return d.sanitation;})); |
|
|
|
svg.append("g") |
|
.attr("transform", "translate(0,"+height+")") |
|
.call(d3.axisBottom(x)) |
|
.select(".domain"); |
|
|
|
svg.append("g") |
|
.call(d3.axisLeft(y)); |
|
|
|
svg.append("path") |
|
.datum(data) |
|
.attr("fill", "none") |
|
.attr("stroke", "steelblue") |
|
.attr("stroke-linejoin", "round") |
|
.attr("stroke-linecap", "round") |
|
.attr("stroke-width", 1.5) |
|
.attr("d", line); |
|
|
|
var focus = svg.append("g") |
|
.attr("class", "focus") |
|
.style("display", "none"); |
|
|
|
focus.append("circle") |
|
.attr("r", 4.5); |
|
|
|
focus.append("text") |
|
.attr("x", 9) |
|
.attr("dy", ".35em"); |
|
svg.append("rect") |
|
.attr("class", "overlay") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.on("mouseover", function() { focus.style("display", null); }) |
|
.on("mouseout", function() { focus.style("display", "none"); }) |
|
.on("mousemove", mousemove); |
|
|
|
function mousemove() { |
|
var x0 = x.invert(d3.mouse(this)[0]), |
|
i = bisectDate(data, x0, 1), |
|
d0 = data[i - 1], |
|
d1 = data[i], |
|
d = x0 - d0.date > d1.date - x0 ? d1 : d0; |
|
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.sanitation) + ")"); |
|
focus.select("text").text(d.sanitation); |
|
} |
|
|
|
}); |
|
*/ |
|
|
|
d3.csv("bolivia.csv", type, function(error,data){ |
|
if(error) throw error; |
|
|
|
var categories = data.columns.slice(1).map(function(id){ |
|
return { |
|
id: id, |
|
values: data.map(function(d){ |
|
return {date: d.date, rates: d[id]}; |
|
}) |
|
} |
|
}); |
|
|
|
x.domain(d3.extent(data, function(d){return d.date;})); |
|
|
|
y.domain([ |
|
d3.min(categories, function(c){return d3.min(c.values, function(d){return d.rates});}), |
|
d3.max(categories, function(c){return d3.max(c.values, function(d){return d.rates});}) |
|
]); |
|
|
|
//z.domain(categories.map(function(c){return c.id;})); |
|
|
|
svg.append("g") |
|
.attr("class", "x-axis") |
|
.attr("transform", "translate(0,"+height+")") |
|
.call(d3.axisBottom(x)); |
|
|
|
svg.append("g") |
|
.attr("class", "y-axis") |
|
.call(d3.axisLeft(y)) |
|
.append("text") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y", 10) |
|
.attr("x", -6) |
|
.attr("fill", "#000000") |
|
.text("Percentage of Population(%)"); |
|
|
|
|
|
|
|
var category = svg.selectAll(".category") |
|
.data(categories) |
|
.enter().append("g") |
|
.attr("class", "category") |
|
|
|
category.append("path") |
|
.attr("class", "line") |
|
.attr("d", function(d){return line(d.values);}) |
|
.style("stroke", function(d){return z(d.id);}); |
|
|
|
category.append("text") |
|
.attr("class", "label") |
|
.datum(function(d){return {id: d.id, value: d.values[d.values.length - 1]};}) |
|
.attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates)+")";}) |
|
.attr("x", 10) |
|
.attr("dy", "0.5em") |
|
.style("font", "10px sans-serif") |
|
.text(function(d){return d.id;}); |
|
|
|
/*category.selectAll("circle") |
|
.data(function(d){return d.values;}) |
|
.enter().append("g") |
|
.append("circle") |
|
.attr("class", "points") |
|
.attr("r", 3) |
|
.attr("cx", function(d){return x(d.date);}) |
|
.attr("cy", function(d){return y(d.rates);}) |
|
.style("fill", function(d){return z(d.id);});*/ |
|
|
|
/* |
|
category.selectAll("text") |
|
.data(function(d){return d.values;}) |
|
.enter().append("g") |
|
.append("text") |
|
.attr("x", function(d){return x(d.date);}) |
|
.attr("y", function(d){return y(d.rates);}) |
|
.attr("class", "pointLabels") |
|
.attr("text-anchor", "middle") |
|
.text(function(d){return d.rates});*/ |
|
|
|
var focus = svg.append("g") |
|
.attr("class", "focus") |
|
.style("display", "none"); |
|
|
|
focus.append("circle") |
|
.attr("r", 3.5) |
|
|
|
focus.append("line") |
|
.attr("class", "y") |
|
.attr("stroke", "black") |
|
//.attr("stroke-dasharray", "3,3") |
|
.style("opacity", 0.5) |
|
.attr("y1", 0) |
|
.attr("y2", height); |
|
|
|
focus.append("text") |
|
.attr("x", 9) |
|
.attr("dy", ".35em"); |
|
|
|
svg.append("rect") |
|
.attr("class", "overlay") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.on("mouseover", function() { focus.style("display", null); }) |
|
.on("mouseout", function() { focus.style("display", "none"); }) |
|
.on("mousemove", mousemove); |
|
|
|
function mousemove() { |
|
var x0 = x.invert(d3.mouse(this)[0]), |
|
i = bisectDate(data, x0, 1, data.length), |
|
d0 = data[i - 1], |
|
d1 = data[i], |
|
d = x0 - d0.date > d1.date - x0 ? d1 : d0, |
|
rate = d3.max([+d.diarrhoea]); |
|
|
|
focus.attr("transform", "translate(" + x(d.date) + "," + y(rate) + ")"); |
|
//focus.select("text").text(d.sanitation); |
|
} |
|
|
|
}); |
|
|
|
function updateCountry(){ |
|
var country = d3.select("#countrySelection").property("value"); |
|
console.log(country); |
|
d3.csv(country+".csv",type,function(error,data){ |
|
if(error) throw error; |
|
|
|
var categories = data.columns.slice(1).map(function(id){ |
|
return { |
|
id: id, |
|
values: data.map(function(d){ |
|
return {date: d.date, rates: d[id]}; |
|
}) |
|
} |
|
}); |
|
|
|
x.domain(d3.extent(data, function(d){return d.date;})); |
|
|
|
y.domain([ |
|
d3.min(categories, function(c){return d3.min(c.values, function(d){return d.rates});}), |
|
d3.max(categories, function(c){return d3.max(c.values, function(d){return d.rates});}) |
|
]); |
|
|
|
z.domain(categories.map(function(c){return c.id;})); |
|
|
|
var svg = d3.select("body"); |
|
|
|
//console.log(categories); |
|
|
|
svg.selectAll(".line").data(categories).attr("d", function(d){return line(d.values);}).transition().duration(750); |
|
|
|
svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750); |
|
|
|
svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750); |
|
|
|
}); |
|
} |
|
|
|
function type(d, _, columns){ |
|
d.date = parseTime(d.date); |
|
for (var i = 1, n = columns.length, c; i < n; ++i)d[c = columns[i]] = +d[c]; |
|
return d; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
</body> |
