|
<!DOCTYPE html> |
|
|
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Bar Chart</title> |
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> |
|
|
|
<style type="text/css"> |
|
|
|
.chart rect { |
|
fill: #4da6ff; |
|
} |
|
|
|
.chart rect:hover { |
|
fill:#80bfff; |
|
} |
|
|
|
.chart text { |
|
font: 10px sans-serif; |
|
fill: #4da6ff; |
|
text-anchor: end; |
|
} |
|
|
|
tr:hover { |
|
background-color: #99c2ff; |
|
color:white; |
|
} |
|
|
|
</style> |
|
</head> |
|
|
|
<body> |
|
|
|
<h1 style="color:#007fff; margin-left:50px;">TOP 10 Places of Origin of International Students</h1> |
|
|
|
<p style="width: 800px;">According to the Open Doors International Student data portal, <strong style="color:#007fff;">974,926</strong> |
|
international students studied at U.S. colleges and universities in 2014-2015. Among these international students, <strong style="color:#007fff;">58%</strong> of them are come from China, India, South Korea and Saudi Arabia.</p> |
|
<p style="color:grey; width: 800px;">Source: Institute of International Education. (2001). "Leading Places of Origin of International Students, 2013-2014." Open Doors Report on International Educational Exchange. Retrieved from http://www.iie.org/opendoors</p> |
|
|
|
<svg class="chart"></svg> |
|
|
|
</body> |
|
|
|
<script type="text/javascript"> |
|
var width = 700, |
|
|
|
barHeight = 20, |
|
height = 650; |
|
|
|
var x = d3.scale.linear() |
|
.range([0, width]); |
|
|
|
var chart = d3.select(".chart") |
|
.attr("width", 900) |
|
|
|
|
|
d3.csv("week4.csv", function(error, data) { |
|
|
|
if (error) { |
|
console.log(error); |
|
} |
|
data.forEach(function(d, i){ |
|
d.Percent = d.Year2014 / d.Total ; |
|
d.Percent = d.Percent * 100; |
|
d.Percent = d3.round(d.Percent,1); |
|
data.sort(function(a, b) { |
|
return d3.descending(+a.Percent, +b.Percent); |
|
}); |
|
}); |
|
|
|
x.domain([0, d3.max(data, function(d) { return +d.Percent; })]); |
|
|
|
|
|
chart.attr("height", barHeight * data.length + 200); |
|
|
|
var bar = chart.selectAll("g") |
|
.data(data) |
|
.enter().append("g") |
|
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); |
|
|
|
bar.append("rect") |
|
.attr("x", 0) |
|
.attr("y", function(d, i) { return i * 15; }) |
|
.attr("width", function(d) { return x( +d.Percent); }) |
|
.attr("height", barHeight - 1) |
|
.append("title") |
|
.text(function(d){return d.Place + d.Percent + "%" + "of Total"; }); |
|
|
|
bar.append("text") |
|
.attr("x", function(d) { return x( +d.Percent) + 30; }) |
|
.attr("y", function(d, i) { return i * 15 + 8; } ) |
|
.attr("dy", ".35em") |
|
.style("font-size", "14") |
|
.text(function(d) { return +d.Percent; }); |
|
|
|
bar.append("text") |
|
.attr("x", function(d) { return x( +d.Percent) -3;}) |
|
.attr("y", function(d, i) { return i * 15 + 8; } ) |
|
.attr("dy", ".35em") |
|
.style("fill","white") |
|
.style("font-size", "10") |
|
.text(function(d) { return d.Place; }); |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
</script> |
|
|
|
</body> |
|
</html> |
