Skip to content

Instantly share code, notes, and snippets.

@yan2014

yan2014/index.html

Last active October 22, 2015 18:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yan2014/47e20086272f8d492a0a to your computer and use it in GitHub Desktop.
Save yan2014/47e20086272f8d492a0a to your computer and use it in GitHub Desktop.
Download ZIP
Week 5: Scatter plots
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primary Education</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<div>
<h1>Predicting survival rate to last grade of primary education using difference between poorest and richest for families</h1>
<p>Primary education is a starting point for educating children. It is a challenge to protect children from dropping out of school during primary education.</p>
<p>
The scatter plot shows that there is a positive line between survival rate to last grade of primary education and difference between poorest and richest for families.As showed in the trend line, the larger the difference, the higher the survival rate.
The line confirmed a common sense that we need money to pay for children's education.It shows more than that. It is not only about money, but also about the ability for a family to make money. The scatter plot shows that the positive effect existed across
many years. During these years, we have helped raising money to pay for the education. We need to investigate more on why the positive effect still exists.
</p>
<p>Data source: <a href="http://data.unicef.org/education/overview.html"> http://data.unicef.org/education/overview.html</a></p>
</div>
</body>
<script src="main.js"></script>
</html>
Raw
main.css
body{
height: 1000px;
width: 1000px;
margin: auto;
}
h1{
color:#0099ff;
}
Raw
main.js
/**
* Created by shiyan on 9/25/15.
*/
//Write a text snippet that explains it and identifies the source of the data. Use UNICEF styling.
var height=600;
var width=800;
var margin={top:20,bottom:45,left:150,right:30};
var dotRadius=5;
var xScale=d3.scale.linear()
.range([margin.left,width-margin.left-margin.right]);
var yScale=d3.scale.linear()
.range([height-margin.bottom, margin.top]);
var xAxis=d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(2);
var yAxis=d3.svg.axis()
.scale(yScale)
.orient("left")
.tickSize(2);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("primary education1.csv", function(data) {
xScale.domain(
d3.extent(data,function(d){
return +d.difference;
})
);
yScale.domain(
d3.extent(data,function(d){
return +d.total;
})
);
var circles=svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d.difference);
})
.attr("cy", function(d) {
return yScale(d.total);
})
.attr("r", dotRadius)
.attr("fill",function(d){
if(d.year==="2012") {return "#8DC63F";}
else if(d.year>="2005"&& d.year<=2010) {return "#ff9900"}
else{return "#999999";}
})
.append("title")
.text(function(d) {
return d.country+"("+d.difference+","+ d.total+")";
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call( xAxis);
svg.append("text")
.attr("class", "labelX")
.attr("transform", "translate(" + (width / 2) + " ," + (height-3) + ")")
.style("text-anchor", "middle")
.text("difference between difference and richest");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.left + ",0)")
.call(yAxis);
svg.append("text")
.attr("class", "labelY")
.attr("y", margin.left)
.attr("x",0-(height / 2))
.attr("transform", "rotate(-90)")
.attr("dy", "-1.5em")
.style("text-anchor", "middle")
.text("Survival rate to last grade of primary education - Percentage");
// draw legend
var color=[{name:"2005-2010",color:"#ff9900"},{name:"2011",color:"#999999"},{name:"2012",color:"#8DC63F"}];
var legend = svg.selectAll(".legend")
.data(color)
.enter()
.append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
// draw legend colored circles
legend.append("circle")
.attr("cx", width - 15)
.attr("cy", 9)
.attr("r",dotRadius)
.style("fill", function(d){return d.color;});
// draw legend text
legend.append("text")
.attr("x", width - 36)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d.name;})
// the equalition for trend line is: y=slope*x+intercept
var myArray = [];
var a0=0;
var b0=0
var b1=0;
var c1=0;
data.forEach(function(d, i){
myArray.push([+d.difference, +d.total]);
a0=myArray[i][0]*myArray[i][1]+a0;
b0=myArray[i][0]+b0;
b1=myArray[i][1]+b1;
c1=myArray[i][0]*myArray[i][0]+c1;
});
var a=myArray.length*a0;
var b=b0*b1;
var c=myArray.length*c1;
var d=b0*b0;
var slope = (a - b) / (c - d)
var e=b1;
var f=slope*b0;
var intercept=(e - f) / myArray.length;
var x1 = -58;
var y1 = -58*slope+intercept;
var x2 = 24;
var y2 = slope*24+intercept;
var trendData = [[x1,y1,x2,y2]];
var trendline = svg.selectAll(".trendline")
.data(trendData);
trendline.enter()
.append("line")
.attr("class", "trendline")
.attr("x1", function(d) { return xScale(d[0]); })
.attr("y1", function(d) { return yScale(d[1]); })
.attr("x2", function(d) { return xScale(d[2]); })
.attr("y2", function(d) { return yScale(d[3]); })
.attr("stroke", "grey")
.attr("stroke-width", 1);
});
Raw
primary education1.csv
country year total Male Female Poorest Second Middle Fourth Richest ratio difference
Afghanistan 2011 84 85 84 83 86 85 85 84 0.988095238 -1
Albania 2009 100 99 100 99 100 100 100 100 0.99 -1
Algeria 2006 93 93 93 88 93 93 95 97 0.907216495 -9
Angola 2001 83 84 82 72 76 80 85 93 0.774193548 -21
Argentina 2012 97 95 98 93 96 99 99 99 0.939393939 -6
Armenia 2005 100 100 100 100 100 100 100 100 1 0
Azerbaijan 2006 100 100 100 100 100 100 100 100 1 0
Bangladesh 2006 94 92 95 90 91 95 95 97 0.927835052 -7
Belarus 2012 100 100 100 100 100 100 100 100 1 0
Belize 2011 97 96 97 94 95 99 96 100 0.94 -6
Benin 2006 89 91 87 86 83 89 91 95 0.905263158 -9
Bhutan 2010 94 91 96 90 92 93 96 97 0.927835052 -7
Bolivia (Plurinational State of) 2008 96 97 95 90 97 98 98 99 0.909090909 -9
Bosnia and Herzegovina 2012 100 99 100 100 100 100 98 100 1 0
Burkina Faso 2006 89 87 91 88 81 82 87 97 0.907216495 -9
Burundi 2005 82 83 81 73 78 80 85 90 0.811111111 -17
Cambodia 2006 92 92 92 90 87 92 95 96 0.9375 -6
Cameroon 2011 95 95 96 86 96 97 98 99 0.868686869 -13
Central African Republic 2010 81 83 79 63 78 77 89 90 0.7 -27
Chad 2010 89 93 86 91 87 88 91 93 0.978494624 -2
Colombia 2010 95 94 96 90 95 95 98 98 0.918367347 -8
Comoros 2000 19 17 21 28 14 26 17 15 1.866666667 13
Congo 2005 93 93 92 90 92 90 94 96 0.9375 -6
Costa Rica 2011 93 93 94 84 95 94 95 100 0.84 -16
C?te d'Ivoire 2006 90 92 88 85 88 91 89 96 0.885416667 -11
Democratic Republic of the Congo 2010 75 77 73 73 71 76 69 89 0.820224719 -16
Dominican Republic 2007 78 77 79 64 78 80 87 87 0.735632184 -23
Egypt 2008 99 99 99 97 99 100 99 100 0.97 -3
Ethiopia 2005 84 81 87 79 80 87 81 88 0.897727273 -9
Gambia 2010 95 97 94 91 96 97 95 97 0.93814433 -6
Georgia 2005 98 98 99 97 98 98 100 99 0.97979798 -2
Ghana 2011 100 100 99 99 99 100 100 100 0.99 -1
Guinea 2005 96 97 96 93 95 94 99 97 0.958762887 -4
Guinea-Bissau 2010 79 83 77 66 70 82 88 93 0.709677419 -27
Guyana 2009 100 100 100 100 99 100 100 98 1.020408163 2
Haiti 2012 88 88 88 86 85 88 88 94 0.914893617 -8
Honduras 2012 84 82 86 72 80 85 95 97 0.742268041 -25
India 2006 95 95 94 89 94 95 97 100 0.89 -11
Iraq 2011 96 97 94 93 95 95 96 99 0.939393939 -6
Jamaica 2011 99 100 99 97 100 100 100 100 0.97 -3
Kenya 2009 96 96 97 89 97 97 98 100 0.89 -11
Kyrgyzstan 2012 100 100 100 100 99 100 100 99 1.01010101 1
Lao People's Democratic Republic 2012 95 95 95 93 94 92 98 100 0.93 -7
Lesotho 2005 84 81 88 71 76 80 93 98 0.724489796 -27
Liberia 2007 76 80 72 68 67 65 78 88 0.772727273 -20
Madagascar 2009 89 88 89 80 86 88 91 96 0.833333333 -16
Malawi 2010 79 80 79 67 74 79 84 91 0.736263736 -24
Maldives 2009 99 99 100 99 99 98 100 100 0.99 -1
Mali 2010 90 93 94 86 91 95 95 97 0.886597938 -11
Mauritania 2011 78 79 77 68 78 80 77 86 0.790697674 -18
Mongolia 2010 99 98 99 98 98 99 99 100 0.98 -2
Montenegro 2006 97 96 98 91 100 97 97 100 0.91 -9
Mozambique 2008 60 64 56 47 49 50 61 85 0.552941176 -38
Myanmar 2010 93 94 93 83 94 95 97 99 0.838383838 -16
Namibia 2007 89 89 89 82 91 87 92 98 0.836734694 -16
Nepal 2006 95 95 95 92 94 94 99 96 0.958333333 -4
Nicaragua 2001 56 50 63 31 47 56 73 89 0.348314607 -58
Niger 2012 92 92 92 90 94 87 90 96 0.9375 -6
Nigeria 2011 97 97 97 95 97 98 99 96 0.989583333 -1
Peru 2012 87 87 88 83 86 89 89 93 0.892473118 -10
Philippines 2003 90 87 93 79 86 95 98 99 0.797979798 -20
Republic of Moldova 2005 100 100 100 100 100 100 100 99 1.01010101 1
Rwanda 2005 76 74 78 69 76 76 76 80 0.8625 -11
Sao Tome and Principe 2009 84 85 83 79 72 86 83 99 0.797979798 -20
Senegal 2011 90 92 87 87 91 93 85 92 0.945652174 -5
Serbia 2010 99 98 100 93 100 99 100 100 0.93 -7
Sierra Leone 2010 93 93 92 93 88 94 94 93 1 0
Somalia 2006 85 86 83 63 62 76 87 92 0.684782609 -29
South Sudan 2010 65 67 62 37 43 61 62 75 0.493333333 -38
State of Palestine 2010 100 100 100 99 100 100 99 100 0.99 -1
Sudan 2010 82 84 81 65 80 79 86 94 0.691489362 -29
Suriname 2010 96 95 97 93 96 95 98 99 0.939393939 -6
Swaziland 2010 93 92 93 90 90 95 91 95 0.947368421 -5
Syrian Arab Republic 2006 99 99 99 98 99 99 99 99 0.98989899 -1
Tajikistan 2005 100 100 100 100 100 100 99 100 1 0
Thailand 2012 100 100 100 100 100 99 99 100 1 0
The former Yugoslav Republic of Macedonia 2011 99 98 100 93 100 100 100 100 0.93 -7
Timor-Leste 2010 91 91 90 97 97 98 90 73 1.328767123 24
Togo 2010 90 94 85 89 92 91 88 87 1.022988506 2
Trinidad and Tobago 2006 98 97 99 98 98 96 100 98 1 0
Tunisia 2012 97 97 96 93 97 95 100 99 0.939393939 -6
Turkey 2004 95 97 92 89 94 92 98 100 0.89 -11
Uganda 2006 72 71 73 61 65 64 76 85 0.717647059 -24
Ukraine 2012 100 100 100 100 100 100 100 100 1 0
United Republic of Tanzania 2005 91 91 91 85 91 87 91 98 0.867346939 -13
Uzbekistan 2006 100 100 99 100 100 99 99 100 1 0
Vanuatu 2007 88 86 91 70 97 85 94 97 0.721649485 -27
Venezuela (Bolivarian Republic of) 2000 82 80 85 60 89 81 90 96 0.625 -36
Viet Nam 2011 99 100 99 99 99 100 100 100 0.99 -1
Yemen 2006 73 75 71 69 65 61 84 88 0.784090909 -19
Zambia 2007 87 88 85 79 87 87 82 96 0.822916667 -17
Zimbabwe 2009 82 80 85 75 78 88 80 95 0.789473684 -20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment