yan2014/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Loading CSV Data with D3</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1>Eastern Asia Improved the Most</h1>
<p>This table shows regional access to improved water over 15 years. </p>
<p>Source: WHO/UNICEF (2015) Progress on Sanitation and Drinking Water: 2015 Update</p>
<div id="table"></div>

</body>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

<!-- load the function file you need before you call it... -->
<script type="text/javascript" src="tabulate.js"></script>

<script type="text/javascript">
    //Load in contents of CSV file, and do things to the data.
    d3.csv("water_improvement_data.csv", function(error, myData) {
        if (error) {
            console.log("Had an error loading file.");
        }
        // We'll be using simpler data as values, not objects.
        var myArray = [];
        myData.forEach(function(d, i){
            // now we add another data object value, a calculated value.
            // here we are making strings into numbers using type coercion
            d.year1990 = +d.year1990;
            d.year2015 = +d.year2015;
            d.difference = d.year2015 - d.year1990;
            if (d.name === "Developing regions") {
                d.name = "Developing Regions";
            }
            if (d.name === "Developed regions") {
                d.name = "Deveoloped Regions";
            }
            // Add a new array with the values of each:
            myArray.push([d.name, d.year1990, d.year2015, d.difference]);
        });
        console.log(myData);
        console.log(myArray);
        //sort data by difference
        myArray.sort(function (a, b) {
            return a[3]-b[3];
        });
        // You could also have made the new array with a map function!
        //using colors and fonts from the UNICEF Style Guide
        var table = d3.select("#table").append("table");
        var header = table.append("thead").append("tr");
        header
                .selectAll("th")
                .data(["Region", "1990", "2015", "Difference"])
                .enter()
                .append("th")
                .text(function(d) { return d; });
        var tablebody = table.append("tbody");
        rows = tablebody
                .selectAll("tr")
                .data(myArray)
                .enter()
                .append("tr");
        // We built the rows using the nested array - now each row has its own array.
        cells = rows.selectAll("td")
            // each row has data associated; we get it and enter it for the cells.
                .data(function(d) {
                    console.log(d);
                    return d;
                })
                .enter()
                .append("td")
                .text(function(d) {
                    return d;
                });
    });
</script>

</html>

## main.css
body{
    font-family: Arial;
}
h1{
    color: #0099FF;
}
p{
    color: #000000;
}
tr{
    background-color: #FF8448;

}
td{
    background-color: #0099FF;

}
table{
    color: #FFFFFF;
}

## tabulate.js
/**
 * Created by shiyan on 9/13/15.
 */
/*
 Code by Shawn Allen (@shawnbot) repro'd in d3noob's book,
 http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.html,
 but with minor modification by Lynn.
 */

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

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

    // create a row for each object in the data
    var rows = tbody.selectAll("tr")
        .data(data)
        .enter()
        .append("tr");

    // create a cell in each row for each column
    // At this point, the rows have data associated.
    // So the data function accesses it.
    var cells = rows.selectAll("td")
        .data(function(row) {
            // he does it this way to guarantee you only use the
            // values for the columns you provide.
            return columns.map(function(column) {
                // return a new object with a value set to the row's column value.
                return {value: row[column]};
            });
        })
        .enter()
        .append("td")
        .text(function(d) { return d.value; });
    return table;
}

// render the table
// var peopleTable = tabulate(data, ["date", "close"]);

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## water_improvement_data.csv

          
            name
            year1990
            year2015

            
              Sub-Saharan Africa
              48
              68

            
              Northern Africa
              87
              93

            
              Eastern Asia
              68
              96

            
              Eastern Asia without China
              96
              98

            
              Southern Asia
              73
              93

            
              Southern Asia without India
              79
              89

            
              South Eastern Asia
              72
              90

            
              Western Asia
              85
              95

            
              Oceania
              50
              56

            
              Latin American and the Caribbean
              85
              95

            
              Caucasus and Central Asia
              87
              89

            
              Developed regions
              98
              99

            
              Developing regions
              70
              89

            
              Least Developed Countries
              51
              69

            
              World
              76
              91
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Loading CSV Data with D3</title>
	<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>
	<h1>Eastern Asia Improved the Most</h1>
	<p>This table shows regional access to improved water over 15 years. </p>
	<p>Source: WHO/UNICEF (2015) Progress on Sanitation and Drinking Water: 2015 Update</p>
	<div id="table"></div>

	</body>

	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

	<!-- load the function file you need before you call it... -->
	<script type="text/javascript" src="tabulate.js"></script>

	<script type="text/javascript">
	//Load in contents of CSV file, and do things to the data.
	d3.csv("water_improvement_data.csv", function(error, myData) {
	if (error) {
	console.log("Had an error loading file.");
	}
	// We'll be using simpler data as values, not objects.
	var myArray = [];
	myData.forEach(function(d, i){
	// now we add another data object value, a calculated value.
	// here we are making strings into numbers using type coercion
	d.year1990 = +d.year1990;
	d.year2015 = +d.year2015;
	d.difference = d.year2015 - d.year1990;
	if (d.name === "Developing regions") {
	d.name = "Developing Regions";
	}
	if (d.name === "Developed regions") {
	d.name = "Deveoloped Regions";
	}
	// Add a new array with the values of each:
	myArray.push([d.name, d.year1990, d.year2015, d.difference]);
	});
	console.log(myData);
	console.log(myArray);
	//sort data by difference
	myArray.sort(function (a, b) {
	return a[3]-b[3];
	});
	// You could also have made the new array with a map function!
	//using colors and fonts from the UNICEF Style Guide
	var table = d3.select("#table").append("table");
	var header = table.append("thead").append("tr");
	header
	.selectAll("th")
	.data(["Region", "1990", "2015", "Difference"])
	.enter()
	.append("th")
	.text(function(d) { return d; });
	var tablebody = table.append("tbody");
	rows = tablebody
	.selectAll("tr")
	.data(myArray)
	.enter()
	.append("tr");
	// We built the rows using the nested array - now each row has its own array.
	cells = rows.selectAll("td")
	// each row has data associated; we get it and enter it for the cells.
	.data(function(d) {
	console.log(d);
	return d;
	})
	.enter()
	.append("td")
	.text(function(d) {
	return d;
	});
	});
	</script>

	</html>
	body{
	font-family: Arial;
	}
	h1{
	color: #0099FF;
	}
	p{
	color: #000000;
	}
	tr{
	background-color: #FF8448;

	}
	td{
	background-color: #0099FF;

	}
	table{
	color: #FFFFFF;
	}
	/**
	* Created by shiyan on 9/13/15.
	*/
	/*
	Code by Shawn Allen (@shawnbot) repro'd in d3noob's book,
	http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.html,
	but with minor modification by Lynn.
	*/

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

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

	// create a row for each object in the data
	var rows = tbody.selectAll("tr")
	.data(data)
	.enter()
	.append("tr");

	// create a cell in each row for each column
	// At this point, the rows have data associated.
	// So the data function accesses it.
	var cells = rows.selectAll("td")
	.data(function(row) {
	// he does it this way to guarantee you only use the
	// values for the columns you provide.
	return columns.map(function(column) {
	// return a new object with a value set to the row's column value.
	return {value: row[column]};
	});
	})
	.enter()
	.append("td")
	.text(function(d) { return d.value; });
	return table;
	}

	// render the table
	// var peopleTable = tabulate(data, ["date", "close"]);
name	year1990	year2015
Sub-Saharan Africa	48	68
Northern Africa	87	93
Eastern Asia	68	96
Eastern Asia without China	96	98
Southern Asia	73	93
Southern Asia without India	79	89
South Eastern Asia	72	90
Western Asia	85	95
Oceania	50	56
Latin American and the Caribbean	85	95
Caucasus and Central Asia	87	89
Developed regions	98	99
Developing regions	70	89
Least Developed Countries	51	69
World	76	91