Old school D3 from simpler times

All examples By author By category About

arnicas

Full window Github gist

Week4 homework1 - Scale Fix

forked from sunnyuxuan's block: Week4 homework1

<!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 https://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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript" src="stupidtable.js"></script>
		
<script type="text/javascript">
    
d3.csv("week4.csv", function(error, myData) {
				if (error) {
					console.log("Loading file has errors.");
				}
    
var myArray = [];
var allPercent = [];
    
        myData.forEach(function(d, i){
					d.Percent = d.Year2014 / d.Total ;
                    d.Percent = d.Percent * 100;
                    d.Percent = d3.round(d.Percent,1);
                    
        myArray.push([d.Place, d.Year2013, d.Year2014, d.Percent]);
                    
        allPercent.push(d.Percent); 
				});
    
          console.log(allPercent);
          
   
    var table = d3.select("#table").append("table");
    var header = table.append("thead").append("tr");
    
    var headerObjs = [
        { label: "Place", sort_type: "string" },
        { label: "Year2013", sort_type: "int" },
        { label: "Year2014", sort_type: "int" },
        { label: "Percent", sort_type: "float" },
    ];
         myArray.sort(function(a,b){
                    return +b.Percent - +a.Percent
                });
    
     header.selectAll("th")
            .data(headerObjs)
            .enter()
        .append("th")
        .attr("data-sort", function(d){
      return d.sort_type;})
        .text(function(d) { return d.label; });
        
      var tablebody = table.append("tbody");
        table.attr("style","margin: auto","padding:10px;");
        
       var rows = tablebody
        .selectAll("tr")
        .data(myArray)
        .enter()
        .append("tr");

var color3 = d3.scale.linear().domain(d3.extent(allPercent)).range(["#0052cc",
                                                               "#cce0ff"]);

var cells = rows.selectAll("td")
       .data(function(d){return d;})
        .enter()
        .append("td")
        .style("background-color",function(d,i){
        if (i === 3){
            return color3(d);
        }
        })
    
        .text(function(d) { return d; });
              
                
           $("table").stupidtable();

});
</script>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js