|
<!DOCTYPE html> |
|
|
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Horizontal Bar - Dynamic Domain</title> |
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> |
|
|
|
<style type="text/css"> |
|
|
|
|
|
|
|
svg { |
|
background-color: white; |
|
} |
|
|
|
rect { |
|
fill: #80ccff; |
|
} |
|
|
|
rect:hover { |
|
fill:#ffff00; |
|
} |
|
|
|
.labels { |
|
font: 14px sans-serif; |
|
fill: #4da6ff; |
|
|
|
} |
|
|
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: grey; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.axis text { |
|
font-family: sans-serif; |
|
font-size: 14px; |
|
fill:grey; |
|
} |
|
|
|
.xlabel { |
|
font-family: sans-serif; |
|
font-size: 14px; |
|
fill: grey; |
|
} |
|
|
|
</style> |
|
</head> |
|
|
|
<body> |
|
|
|
<h1 style="color:#007fff; margin-left:100px;">TOP 10 Places of Origin of International Students</h1> |
|
|
|
<p style="width: 800px; margin-left:50px; font-size:18px;">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; margin-left:50px;">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> |
|
</body> |
|
|
|
<script type="text/javascript"> |
|
|
|
var fullwidth = 1000, |
|
fullheight = 600; |
|
|
|
var margin = {top:20, right:50,bottom:45,left:100}; |
|
|
|
var width = fullwidth - margin.left - margin.right, |
|
height = fullheight - margin.top - margin.bottom; |
|
|
|
var x = d3.scale.linear() |
|
.range([0, width]); |
|
|
|
var y = d3.scale.ordinal() |
|
.rangeRoundBands([ 0, height], 0.2); |
|
|
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(x) |
|
.orient("bottom"); |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(y) |
|
.orient("left") |
|
.innerTickSize([0]); |
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", fullwidth) |
|
.attr("height", fullheight) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
|
|
|
|
|
|
d3.csv("week5.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,35]); |
|
y.domain(data.map(function(d) { return d.Place;})); |
|
|
|
|
|
var bar = svg.selectAll("rect") |
|
.data(data) |
|
.enter() |
|
.append("rect"); |
|
|
|
bar.attr("x", 0) |
|
.attr("y", function(d) { return y(d.Place); }) |
|
.attr("width", function(d) { return x( +d.Percent); }) |
|
.attr("height", y.rangeBand()) |
|
.style("fill", function(d){ |
|
if (d.Place === "China"){ |
|
return "#008ae6" |
|
}}) |
|
.append("title") |
|
.text(function(d){return d.Place + d.Percent + "%" + "of Total"; }); |
|
|
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform","translate(0," + height + ")") |
|
.call(xAxis) |
|
|
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.call(yAxis); |
|
|
|
svg.append("text") |
|
.attr("class", "xlabel") |
|
.attr("transform", "translate(" + width/2 + " ," + |
|
height + ")") |
|
.style("text-anchor", "middle") |
|
.attr("dy", "35") |
|
.text("Percent"); |
|
|
|
svg.selectAll("text.labels") |
|
.data(data) |
|
.enter() |
|
.append("text") |
|
.classed("labels", true) |
|
.text(function(d) { return +d.Percent}) |
|
.attr("x", function(d,i){return x( +d.Percent) + 10}) |
|
.attr("y", function(d,i){return y(d.Place) + 25;}) |
|
|
|
}); |
|
|
|
|
|
|
|
</script> |
|
|
|
</body> |
|
</html> |
