index.html

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

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


## 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;
}

## week3 homework
Here is week3 homework

## week3.csv

        
        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