Skip to content

Instantly share code, notes, and snippets.

@sunnyuxuan

sunnyuxuan/Week4 homework3.readme

Last active February 8, 2016 21:04
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 sunnyuxuan/a7438a9f5290e35798d9 to your computer and use it in GitHub Desktop.
Save sunnyuxuan/a7438a9f5290e35798d9 to your computer and use it in GitHub Desktop.
Download ZIP
week4 homework3
Raw
index.html
<!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>
Raw
Week4 homework3.readme
Using the model in d3_dynamic_domain.html, make your own barchart for your own data. Pick one of your numeric columns, and resize the SVG container to fit it. You can adjust range etc. as you like. Add text to the page saying what it is showing.
Raw
week4.csv
Place Year2013 Year2014 Total
China 274439 304040 974926
India 102673 132888 974926
South Korea 68047 63710 974926
Saudi Arabia 53919 59945 974926
Canada 28304 27240 974926
Brazil 13286 23675 974926
Taiwan 21266 20993 974926
Japan 19334 19064 974926
Vietnam 16579 18722 974926
Mexico 14779 17052 974926
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment