Skip to content

Instantly share code, notes, and snippets.

@ericd9799

ericd9799/.block

Last active April 12, 2018 00:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ericd9799/d93cdded30aa9eadae838171fcff945d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ericd9799/d93cdded30aa9eadae838171fcff945d to your computer and use it in GitHub Desktop.
Download ZIP
CS725 - HW9
Raw
.block
license: mit
Raw
bolivia.csv
date sanitation drinking diarrhoea
2000 18 53 24.4
2001 18 54 23.8
2002 19 56 23.1
2003 20 58 22.1
2004 20 60 21.2
2005 21 61 20.4
2006 21 63 19.5
2007 22 65 18.7
2008 23 67 16.6
2009 23 68 15.2
2010 24 70 14.4
2011 24 72 13.9
2012 25 74 13.4
2013 26 75 12.8
2014 26 77 13
2015 27 79 12.6
Raw
brazil.csv
date sanitation drinking diarrhoea
2000 36 74 15.2
2001 37 75 14.6
2002 39 76 14.8
2003 40 77 13.7
2004 42 78 13
2005 43 78 13.2
2006 45 79 12.3
2007 46 80 9.5
2008 48 81 9
2009 49 82 7.9
2010 51 82 6.8
2011 52 83 5.3
2012 54 84 5.6
2013 55 85 5.7
2014 57 86 5.1
2015 58 87 4.7
Raw
chile.csv
date sanitation drinking diarrhoea
2000 67 72 1.9
2001 69 74 1.1
2002 72 77 1.6
2003 74 79 2.4
2004 76 81 1.3
2005 78 83 1
2006 80 85 0.4
2007 82 87 0.7
2008 85 89 1.2
2009 87 91 0.8
2010 89 93 0.4
2011 91 95 0.2
2012 93 97 0
2013 96 99 0.3
2014 98 100 0.8
2015 99 100 1.1
Raw
colombia.csv
date sanitation drinking diarrhoea
2000 51 70 13.1
2001 52 71 9.1
2002 53 72 12.8
2003 55 73 13.7
2004 56 74 11.4
2005 58 75 10
2006 59 77 8.8
2007 61 78 9.4
2008 62 79 6.7
2009 63 80 6.9
2010 65 81 5.3
2011 66 82 4.3
2012 68 83 3.9
2013 69 84 3.7
2014 71 85 4
2015 72 86 4
Raw
ecuador.csv
date sanitation drinking diarrhoea
2000 53 72 5.8
2001 55 73 5.5
2002 57 73 5.2
2003 59 74 4.5
2004 60 74 4
2005 62 75 3.5
2006 64 75 3.1
2007 66 76 2.8
2008 68 76 2.8
2009 69 77 2.9
2010 71 78 3
2011 73 78 3.1
2012 75 79 3.2
2013 77 79 3.2
2014 79 80 2.8
2015 80 80 3.6
Raw
guyana.csv
date sanitation drinking diarrhoea
2000 75 86 26.7
2001 76 87 30.3
2002 77 87 22.6
2003 77 88 20.6
2004 78 88 10.6
2005 79 88 20.9
2006 79 89 24.7
2007 80 89 13.2
2008 80 90 14.9
2009 81 90 18
2010 82 91 16.2
2011 82 91 8.4
2012 83 92 10.2
2013 84 92 8.5
2014 84 93 11.1
2015 85 93 11.3
Raw
index.html
<!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;
}
.selectCountry {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<div>
<p>
Clean water and sanitation is key to human survival. Without these readily available, the chance for diseases increases. Most importantly, children are more susceptible to water-borne diseases since their immune system is developing. The number one water-borne disease is diarrhoeal diseases. In the graph below, we explore how access to basic drinking water and sanitation effects the proportion of children under 5 years dying because of diarrhoeal diseases in rural areas of South American countries.
</p>
</div>
<div class="selectCountry">
Select a country:
<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 src="https://d3js.org/d3-scale-chromatic.v1.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", 600)
.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("text")
.attr("x", width/2)
.attr("y", margin.bottom+450)
.attr("text-anchor", "middle")
.text("Years")
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(%)");
svg.append("g").attr("class", "title").append("text")
.attr("x", width/2)
.attr("y", 5 - margin.top/2)
.attr("text-anchor", "middle")
.style("font", "16px sans-serif")
.text("Access to Basic Drinking Water / Sanitation in Rural Areas vs. Mortality caused by Diarrhoeal Diseases for Children < 5 Years")
svg.append("g").attr("class", "source").append("text")
.attr("x", margin.left-70)
.attr("y", margin.bottom+460)
.attr("text-anchor", "start")
.style("font", "13px sans-serif")
.style("fill", "#808080")
.text("Source: World Health Organization")
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", 5)
.attr("dy", "0.75em")
.style("font", "13px sans-serif")
.text(function(d){return d.id;});
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
/*
focus.append("line")
.attr("class", "y")
.attr("stroke", "black")
.attr("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("y1", 0)
.attr("y2", height);*/
for(var i=0; i < 3; i++){
focus.append("g")
.attr("class", "focus"+i)
.attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")
.append("circle")
.attr("class", "highlight")
.style("stroke", "red")
.style("fill", "red")
.attr("r", 2);
svg.select(".focus"+i)
.append("text")
//.attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")
.attr("x", 30)
.attr("dy", ".35em");
}
/*
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);
//console.log(data);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]);
var i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
//console.log(i);
//focus.attr("transform", "translate(" + x(d.date) + "," + y(d.drinking) + ")");
//focus.select("text").text(d.drinking);
var series = [
{date: data[i].date, value: data[i].drinking},
{date: data[i].date, value: data[i].sanitation},
{date: data[i].date, value: data[i].diarrhoea}
];
for(var i=0; i < series.length; i++){
var selectedFocus = svg.selectAll(".focus"+i);
selectedFocus.attr("transform", "translate("+x(series[i].date)+","+y(series[i].value)+")");
selectedFocus.select("text").text(series[i].value);
}
}
});
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]};
})
}
});
//console.log(data);
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);
console.log(x(data[1].date)+","+y(data[1].drinking));
svg.select(".focus"+1).attr("transform", "translate("+x(data[1].date)+","+y(data[1].drinking)+")").transition().duration(750);
svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);
var series = [
{date: data[1].date, value: data[1].drinking},
{date: data[1].date, value: data[1].sanitation},
{date: data[1].date, value: data[1].diarrhoea}
];
console.log(series);
});
}
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>
Raw
paraguay.csv
date sanitation drinking diarrhoea
2000 52 52 18.3
2001 53 55 17.7
2002 55 58 17.4
2003 57 61 15.5
2004 59 64 14.3
2005 61 67 13.2
2006 63 70 12.5
2007 65 74 12.7
2008 67 77 13.1
2009 69 80 13.3
2010 71 83 13
2011 73 86 12.6
2012 75 89 12.3
2013 77 92 11.9
2014 79 95 11.2
2015 81 98 10.4
Raw
peru.csv
date sanitation drinking diarrhoea
2000 25 51 12.9
2001 27 53 13.1
2002 30 54 13.2
2003 32 55 13.8
2004 34 57 13.7
2005 36 58 13.8
2006 38 59 12.6
2007 41 61 11.5
2008 43 62 10.6
2009 45 64 10.2
2010 47 65 9.7
2011 49 66 9.4
2012 52 68 9.1
2013 54 69 9.1
2014 56 71 9
2015 58 72 8.9
Raw
suriname.csv
date sanitation drinking diarrhoea
2000 63 72 14.1
2001 63 73 5.9
2002 63 75 3.3
2003 63 76 5.5
2004 63 77 8.1
2005 63 79 2.7
2006 62 80 4.6
2007 62 81 4.4
2008 62 83 2.9
2009 62 84 5.2
2010 62 85 0
2011 62 87 2.6
2012 61 88 5.5
2013 61 88 4.9
2014 61 88 0
2015 61 88 3.5
Raw
uruguay.csv
date sanitation drinking diarrhoea
2000 85 72 6.2
2001 85 72 3.9
2002 85 72 3.8
2003 85 72 4.5
2004 85 72 4.9
2005 86 74 4.3
2006 87 76 0.6
2007 88 78 3.8
2008 89 80 3
2009 90 82 3.8
2010 90 84 4.9
2011 91 86 2.8
2012 92 88 1.4
2013 93 90 4.3
2014 94 92 2
2015 95 94 0.9
Raw
venezuela.csv
date sanitation drinking diarrhoea
2000 52 82 23.3
2001 54 82 21.2
2002 56 83 22.5
2003 57 83 27
2004 59 83 22
2005 60 84 21.7
2006 62 84 18.9
2007 63 84 16
2008 65 85 13
2009 66 85 11.5
2010 68 85 14.2
2011 69 86 13
2012 71 86 10.6
2013 72 86 10.8
2014 72 86 11.4
2015 72 86 11.4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment