jashcny/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>

	<style>
	@import url(https://fonts.googleapis.com/css?family=Lato:400,700italic);
	@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);

	th {
	padding-left: 70px;
	padding-right: 60px;
	text-align: justify;
	font-size: 16px;
	color: rgb(46,	151,	223	);
	}

	td {
	font-size: 14px;
	padding-left: 30px;
	padding-right: 40px;
	padding-bottom: 5px;
	padding-top: 5px;
	text-align: center;
	}

	th, td {
    	border-bottom: 1px solid #ddd;
	}

	#table {
	margin-top: 80px;
	padding-left: 220px;
	font-family: 'Roboto', sans-serif;
	}

	tr:nth-child(even) {background-color: #f2f2f2}

	h1 {
	font-family: 'Lato', sans-serif;
	font-size: 37px;
	text-align: center;
	padding-left: 100px;
	padding-right: 100px;
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 50px;
	}

	p {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	margin-left: 180px;
	margin-right: 160px;
  	word-spacing: 1px;
	}

    	#unit{
	padding-left: 42px;
	font-size: 15px;
	color: rgb(51,	51,	51);
	}

	#source {
	margin-top: 35px;
	}

	a {
    	color: rgb(51,	51,	51);
	}

    	a:hover {
	color:  rgb(233, 42, 58);
	}


        </style>
	<meta charset="utf-8">
	<title>Preschool Program Spending by state</title>

	</head>
	    <body>
		<h1> Overall spending for state preschool programs and spending per pupil in state programs, by state: School year 2012-13</h1>
		   <p> This table shows the spending of state preschool programs, in ascending order of percentage. The "percentage" row calculates the percentage of state per preschool child spending in terms of the state overall expenditure.</p>
	       	   <p> According to the survey, ten states include Hawaii, Idaho, Indiana, Mississippi, Montana, New Hampshire, North Dakota, South Dakot, Utah and Wyoming did not have state-funded  preshool programs in the years of 2012 and 2013.</p>
	           <p id="source"><a href="http://nces.ed.gov/pubs2014/2014078.pdf" ><b>Source:</b> U.S. Department of Education, National Center for Education Statistics, State of Preschool 2012-13.</a></p>

		<div id="table"> </div>
		   <p id="unit">(All currency results in U.S. dollar)</p>


              </body>

		<script type="text/javascript" src="https://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("preschool.csv", function(error, data) {

				if (error) {
					console.log("Had an error loading file.");
				}

				data.forEach(function(d, i){
					// now we add another data object value, a calculated value.
					d.percent= (d.PerPupil / d.OverallSpending)*(100);
					d.Percentage= d.percent.toFixed(4);
				});

				console.log(data);

				// the tabulate function wants the second argument to be your columns in your data that will be in the table.
				// third argument is the element to put it into on the page
				data.sort(function(a,b) {
    		return a.Percentage-b.Percentage;
				});


				var regionTable = tabulate(data,
					                        ["State","OverallSpending","PerPupil", "Percentage"],
					                        "#table");

				// Excercises for you if you want: Fix the names in the data and table so they look nicer.
				// Sort the data by whatever you think is most interesting. What problem does that cause?
				// Add a style sheet to make this table look nice!

			});

		</script>

</html>

## preschool.csv

          
            State
            OverallSpending
            PerPupil

            
              Alabama
              19087000
              4898

            
              Alaska
              2500000
              7246

            
              Arizona
              13212000
              2028

            
              Arkansas
              111000000
              5514

            
              California
              588454000
              4541

            
              Colorado
              42182000
              2159

            
              Connecticut
              93065000
              9810

            
              Delaware
              5728000
              6795

            
              District of Columbia
              175096000
              14690

            
              Florida
              390360000
              2242

            
              Georgia
              293940000
              3599

            
              Illinois
              241161000
              3189

            
              Iowa
              71234000
              2674

            
              Kansas
              18417000
              2163

            
              Kentucky
              75374000
              3621

            
              Louisiana
              91804000
              4620

            
              Maine
              11681000
              2296

            
              Maryland
              128993000
              4386

            
              Massachuset
              52887000
              3966

            
              Michigan
              109275000
              4452

            
              Missouri
              7595000
              2067

            
              Nebraska
              13288000
              2397

            
              New Mexico
              19215000
              3604

            
              New York
              373011000
              3069

            
              North Carolin
              146678000
              4960

            
              Ohio
              22385000
              3927

            
              Oklahoma
              144859000
              3611

            
              Oregon
              61000000
              8491

            
              Pennsylvania
              145529000
              5680

            
              Rhode Island
              1336000
              9278

            
              South Caroli
              35709000
              1300

            
              Tennessee
              85807000
              4611

            
              Texas
              753338000
              3310

            
              Vermont
              22470000
              3778

            
              Virginia
              64953000
              3756

            
              Washington
              55981000
              6672

            
              West Virginia
              92946000
              5894

            
              Wisconsin
              167264000
              3366

## tabulate.js
/*
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"]);
	<!DOCTYPE html>
	<html lang="en">
	<head>

	<style>
	@import url(https://fonts.googleapis.com/css?family=Lato:400,700italic);
	@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);

	th {
	padding-left: 70px;
	padding-right: 60px;
	text-align: justify;
	font-size: 16px;
	color: rgb(46, 151, 223 );
	}

	td {
	font-size: 14px;
	padding-left: 30px;
	padding-right: 40px;
	padding-bottom: 5px;
	padding-top: 5px;
	text-align: center;
	}

	th, td {
	border-bottom: 1px solid #ddd;
	}

	#table {
	margin-top: 80px;
	padding-left: 220px;
	font-family: 'Roboto', sans-serif;
	}

	tr:nth-child(even) {background-color: #f2f2f2}

	h1 {
	font-family: 'Lato', sans-serif;
	font-size: 37px;
	text-align: center;
	padding-left: 100px;
	padding-right: 100px;
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 50px;
	}

	p {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	margin-left: 180px;
	margin-right: 160px;
	word-spacing: 1px;
	}

	#unit{
	padding-left: 42px;
	font-size: 15px;
	color: rgb(51, 51, 51);
	}

	#source {
	margin-top: 35px;
	}

	a {
	color: rgb(51, 51, 51);
	}

	a:hover {
	color: rgb(233, 42, 58);
	}


	</style>
	<meta charset="utf-8">
	<title>Preschool Program Spending by state</title>

	</head>
	<body>
	<h1> Overall spending for state preschool programs and spending per pupil in state programs, by state: School year 2012-13</h1>
	<p> This table shows the spending of state preschool programs, in ascending order of percentage. The "percentage" row calculates the percentage of state per preschool child spending in terms of the state overall expenditure.</p>
	<p> According to the survey, ten states include Hawaii, Idaho, Indiana, Mississippi, Montana, New Hampshire, North Dakota, South Dakot, Utah and Wyoming did not have state-funded preshool programs in the years of 2012 and 2013.</p>
	<p id="source"><a href="http://nces.ed.gov/pubs2014/2014078.pdf" ><b>Source:</b> U.S. Department of Education, National Center for Education Statistics, State of Preschool 2012-13.</a></p>

	<div id="table"> </div>
	<p id="unit">(All currency results in U.S. dollar)</p>


	</body>

	<script type="text/javascript" src="https://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("preschool.csv", function(error, data) {

	if (error) {
	console.log("Had an error loading file.");
	}

	data.forEach(function(d, i){
	// now we add another data object value, a calculated value.
	d.percent= (d.PerPupil / d.OverallSpending)*(100);
	d.Percentage= d.percent.toFixed(4);
	});

	console.log(data);

	// the tabulate function wants the second argument to be your columns in your data that will be in the table.
	// third argument is the element to put it into on the page
	data.sort(function(a,b) {
	return a.Percentage-b.Percentage;
	});


	var regionTable = tabulate(data,
	["State","OverallSpending","PerPupil", "Percentage"],
	"#table");

	// Excercises for you if you want: Fix the names in the data and table so they look nicer.
	// Sort the data by whatever you think is most interesting. What problem does that cause?
	// Add a style sheet to make this table look nice!

	});

	</script>

	</html>
State	OverallSpending	PerPupil
Alabama	19087000	4898
Alaska	2500000	7246
Arizona	13212000	2028
Arkansas	111000000	5514
California	588454000	4541
Colorado	42182000	2159
Connecticut	93065000	9810
Delaware	5728000	6795
District of Columbia	175096000	14690
Florida	390360000	2242
Georgia	293940000	3599
Illinois	241161000	3189
Iowa	71234000	2674
Kansas	18417000	2163
Kentucky	75374000	3621
Louisiana	91804000	4620
Maine	11681000	2296
Maryland	128993000	4386
Massachuset	52887000	3966
Michigan	109275000	4452
Missouri	7595000	2067
Nebraska	13288000	2397
New Mexico	19215000	3604
New York	373011000	3069
North Carolin	146678000	4960
Ohio	22385000	3927
Oklahoma	144859000	3611
Oregon	61000000	8491
Pennsylvania	145529000	5680
Rhode Island	1336000	9278
South Caroli	35709000	1300
Tennessee	85807000	4611
Texas	753338000	3310
Vermont	22470000	3778
Virginia	64953000	3756
Washington	55981000	6672
West Virginia	92946000	5894
Wisconsin	167264000	3366
	/*
	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"]);