sunnyuxuan · February 2, 2016 19:27
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Week3 homework</title>
        <link rel="stylesheet" href="style.css">
 	</head>
 	<body>

 		<h1 style="color:#007fff; text-align: center;">TOP 10 Places of Origin of International Students</h1>
       
        <p>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>
 		
 		<div id="table" style="
    margin: auto;"> </div>

 <p style="color:grey;">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" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 		<script type="text/javascript" src="tabulate.js"></script>
 		
 		<script type="text/javascript">

        
    
 			d3.csv("week3.csv", function(error, data) {
 				if (error) {
 					console.log("Loading file has errors.");
 				}
                
                
 				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 +b.Percent - +a.Percent
                });
                
                
 				console.log(data);
 				var regionTable = tabulate(data,
            ["Place of Origin", "Year2013", "Year2014", "Percent"],
 					                        "#table");

            });
            
 		</script>

 </html>
diff --git a/style.css b/style.css
 <style>


 table{
 border: 1px solid #b3d9ff;
 border-collapse: collapse;
    width:100%;
 }

 th,td{
 text-align: center;
    border-bottom: 1px solid #b3d9ff;
 }


 th:nth-child(n+1){
    background:#00aaff;
    color:white;
 }

 tr:hover {
    background-color: #99ddff;
 }

 </style>

diff --git a/tabulate.js b/tabulate.js

 function tabulate(data, columns, id) {
    var table = d3.select(id).append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

 table.attr("style","margin: auto");

    thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th")
            .text(function(column) { return column; });

    var rows = tbody.selectAll("tr")
        .data(data)
        .enter()
        .append("tr");

    var cells = rows.selectAll("td")
        .data(function(row) {
            return columns.map(function(column) {
                return { value: row[column] };
            });
        })
        .enter()
        .append("td")
        .text(function(d) { return d.value; });
    return table;
 }
diff --git a/week3 homework b/week3 homework
 Here is week3 homework 
diff --git a/week3.csv b/week3.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Week3 homework</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<h1 style="color:#007fff; text-align: center;">TOP 10 Places of Origin of International Students</h1>

	<p>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>

	<div id="table" style="
	margin: auto;"> </div>

	<p style="color:grey;">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" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script type="text/javascript" src="tabulate.js"></script>

	<script type="text/javascript">



	d3.csv("week3.csv", function(error, data) {
	if (error) {
	console.log("Loading file has errors.");
	}


	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 +b.Percent - +a.Percent
	});


	console.log(data);
	var regionTable = tabulate(data,
	["Place of Origin", "Year2013", "Year2014", "Percent"],
	"#table");

	});

	</script>

	</html>
	<style>


	table{
	border: 1px solid #b3d9ff;
	border-collapse: collapse;
	width:100%;
	}

	th,td{
	text-align: center;
	border-bottom: 1px solid #b3d9ff;
	}


	th:nth-child(n+1){
	background:#00aaff;
	color:white;
	}

	tr:hover {
	background-color: #99ddff;
	}

	</style>

	function tabulate(data, columns, id) {
	var table = d3.select(id).append("table"),
	thead = table.append("thead"),
	tbody = table.append("tbody");

	table.attr("style","margin: auto");

	thead.append("tr")
	.selectAll("th")
	.data(columns)
	.enter()
	.append("th")
	.text(function(column) { return column; });

	var rows = tbody.selectAll("tr")
	.data(data)
	.enter()
	.append("tr");

	var cells = rows.selectAll("td")
	.data(function(row) {
	return columns.map(function(column) {
	return { value: row[column] };
	});
	})
	.enter()
	.append("td")
	.text(function(d) { return d.value; });
	return table;
	}
Place of Origin	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