jashcny/index.html

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

		<meta charset="utf-8">
		<title>Preschool Program Spending by state</title>
</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: 65px;
		padding-right: 60px;
		text-align: justify;
		font-size: 16px;
		cursor:pointer;
	}

		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>

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


		<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="https://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="stupidtable.js"></script>

		<!-- load the function file you need before you call it... -->


		<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.");
				}

				var myArray = [];

				var allPercentage = [];

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


        myArray.push([d.State, d.OverallSpending, d.PerPupil, d.Percentage]);

				allPercentage.push(d.Percentage);

			});

			  console.log(allPercentage);


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


				var table = d3.select("#table").append("table");

        var header = table.append("thead").append("tr");

        var headerObjs = [
					{label:"State",sort_type:"string"},
					{label:"Overall Spending",sort_type:"int"},
					{label:"Per Pupil",sort_type:"int"},
					{label:"Percentage",sort_type:"float"},
				];

					 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");

					    rows = tablebody.selectAll("tr")
 	 						.data(myArray)
 	 						.enter()
 	 						.append("tr");

							console.log('Extent is ', d3.extent(allPercentage));


			var colorScale = d3.scale.linear()
				.domain(d3.extent(allPercentage))
				.range(["#B2D897", "#00994B"]);

			cells = rows.selectAll("td")
				// each row has data associated; we get it and enter it for the cells.
				.data(function(d) {
					return d;
				})
				.enter()
				.append("td")
				.style("background-color", function(d,i) {
					// for the last element in the row, we color the background:
					if (i === 3) {
						return colorScale(d);
					}
				})
				.text(function(d) {
					return d;
				});


		// jquery sorting applied to it - could be done with d3 and events.
		$("table").stupidtable();

		});
		</script>
</body>
</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

## stupidtable.js
// Stupid jQuery table plugin.

(function($) {
  $.fn.stupidtable = function(sortFns) {
    return this.each(function() {
      var $table = $(this);
      sortFns = sortFns || {};
      sortFns = $.extend({}, $.fn.stupidtable.default_sort_fns, sortFns);
      $table.data('sortFns', sortFns);

      $table.on("click.stupidtable", "thead th", function() {
          $(this).stupidsort();
      });
    });
  };


  // Expects $("#mytable").stupidtable() to have already been called.
  // Call on a table header.
  $.fn.stupidsort = function(force_direction){
    var $this_th = $(this);
    var th_index = 0; // we'll increment this soon
    var dir = $.fn.stupidtable.dir;
    var $table = $this_th.closest("table");
    var datatype = $this_th.data("sort") || null;

    // No datatype? Nothing to do.
    if (datatype === null) {
      return;
    }

    // Account for colspans
    $this_th.parents("tr").find("th").slice(0, $(this).index()).each(function() {
      var cols = $(this).attr("colspan") || 1;
      th_index += parseInt(cols,10);
    });

    var sort_dir;
    if(arguments.length == 1){
        sort_dir = force_direction;
    }
    else{
        sort_dir = force_direction || $this_th.data("sort-default") || dir.ASC;
        if ($this_th.data("sort-dir"))
           sort_dir = $this_th.data("sort-dir") === dir.ASC ? dir.DESC : dir.ASC;
    }


    $table.trigger("beforetablesort", {column: th_index, direction: sort_dir});

    // More reliable method of forcing a redraw
    $table.css("display");

    // Run sorting asynchronously on a timout to force browser redraw after
    // `beforetablesort` callback. Also avoids locking up the browser too much.
    setTimeout(function() {
      // Gather the elements for this column
      var column = [];
      var sortFns = $table.data('sortFns');
      var sortMethod = sortFns[datatype];
      var trs = $table.children("tbody").children("tr");

      // Extract the data for the column that needs to be sorted and pair it up
      // with the TR itself into a tuple. This way sorting the values will
      // incidentally sort the trs.
      trs.each(function(index,tr) {
        var $e = $(tr).children().eq(th_index);
        var sort_val = $e.data("sort-value");

        // Store and read from the .data cache for display text only sorts
        // instead of looking through the DOM every time
        if(typeof(sort_val) === "undefined"){
          var txt = $e.text();
          $e.data('sort-value', txt);
          sort_val = txt;
        }
        column.push([sort_val, tr]);
      });

      // Sort by the data-order-by value
      column.sort(function(a, b) { return sortMethod(a[0], b[0]); });
      if (sort_dir != dir.ASC)
        column.reverse();

      // Replace the content of tbody with the sorted rows. Strangely
      // enough, .append accomplishes this for us.
      trs = $.map(column, function(kv) { return kv[1]; });
      $table.children("tbody").append(trs);

      // Reset siblings
      $table.find("th").data("sort-dir", null).removeClass("sorting-desc sorting-asc");
      $this_th.data("sort-dir", sort_dir).addClass("sorting-"+sort_dir);

      $table.trigger("aftertablesort", {column: th_index, direction: sort_dir});
      $table.css("display");
    }, 10);

    return $this_th;
  };

  // Call on a sortable td to update its value in the sort. This should be the
  // only mechanism used to update a cell's sort value. If your display value is
  // different from your sort value, use jQuery's .text() or .html() to update
  // the td contents, Assumes stupidtable has already been called for the table.
  $.fn.updateSortVal = function(new_sort_val){
  var $this_td = $(this);
    if($this_td.is('[data-sort-value]')){
      // For visual consistency with the .data cache
      $this_td.attr('data-sort-value', new_sort_val);
    }
    $this_td.data("sort-value", new_sort_val);
    return $this_td;
  };

  // ------------------------------------------------------------------
  // Default settings
  // ------------------------------------------------------------------
  $.fn.stupidtable.dir = {ASC: "asc", DESC: "desc"};
  $.fn.stupidtable.default_sort_fns = {
    "int": function(a, b) {
      return parseInt(a, 10) - parseInt(b, 10);
    },
    "float": function(a, b) {
      return parseFloat(a) - parseFloat(b);
    },
    "string": function(a, b) {
      return a.localeCompare(b);
    },
    "string-ins": function(a, b) {
      a = a.toLocaleLowerCase();
      b = b.toLocaleLowerCase();
      return a.localeCompare(b);
    }
  };
})(jQuery);
	<!DOCTYPE html>
	<html lang="en">
	<head>

	<meta charset="utf-8">
	<title>Preschool Program Spending by state</title>
	</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: 65px;
	padding-right: 60px;
	text-align: justify;
	font-size: 16px;
	cursor:pointer;
	}

	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>

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


	<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="https://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="stupidtable.js"></script>

	<!-- load the function file you need before you call it... -->


	<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.");
	}

	var myArray = [];

	var allPercentage = [];

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


	myArray.push([d.State, d.OverallSpending, d.PerPupil, d.Percentage]);

	allPercentage.push(d.Percentage);

	});

	console.log(allPercentage);


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


	var table = d3.select("#table").append("table");

	var header = table.append("thead").append("tr");

	var headerObjs = [
	{label:"State",sort_type:"string"},
	{label:"Overall Spending",sort_type:"int"},
	{label:"Per Pupil",sort_type:"int"},
	{label:"Percentage",sort_type:"float"},
	];

	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");

	rows = tablebody.selectAll("tr")
	.data(myArray)
	.enter()
	.append("tr");

	console.log('Extent is ', d3.extent(allPercentage));



	var colorScale = d3.scale.linear()
	.domain(d3.extent(allPercentage))
	.range(["#B2D897", "#00994B"]);

	cells = rows.selectAll("td")
	// each row has data associated; we get it and enter it for the cells.
	.data(function(d) {
	return d;
	})
	.enter()
	.append("td")
	.style("background-color", function(d,i) {
	// for the last element in the row, we color the background:
	if (i === 3) {
	return colorScale(d);
	}
	})
	.text(function(d) {
	return d;
	});


	// jquery sorting applied to it - could be done with d3 and events.
	$("table").stupidtable();

	});
	</script>
	</body>
	</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
	// Stupid jQuery table plugin.

	(function($) {
	$.fn.stupidtable = function(sortFns) {
	return this.each(function() {
	var $table = $(this);
	sortFns = sortFns \|\| {};
	sortFns = $.extend({}, $.fn.stupidtable.default_sort_fns, sortFns);
	$table.data('sortFns', sortFns);

	$table.on("click.stupidtable", "thead th", function() {
	$(this).stupidsort();
	});
	});
	};


	// Expects $("#mytable").stupidtable() to have already been called.
	// Call on a table header.
	$.fn.stupidsort = function(force_direction){
	var $this_th = $(this);
	var th_index = 0; // we'll increment this soon
	var dir = $.fn.stupidtable.dir;
	var $table = $this_th.closest("table");
	var datatype = $this_th.data("sort") \|\| null;

	// No datatype? Nothing to do.
	if (datatype === null) {
	return;
	}

	// Account for colspans
	$this_th.parents("tr").find("th").slice(0, $(this).index()).each(function() {
	var cols = $(this).attr("colspan") \|\| 1;
	th_index += parseInt(cols,10);
	});

	var sort_dir;
	if(arguments.length == 1){
	sort_dir = force_direction;
	}
	else{
	sort_dir = force_direction \|\| $this_th.data("sort-default") \|\| dir.ASC;
	if ($this_th.data("sort-dir"))
	sort_dir = $this_th.data("sort-dir") === dir.ASC ? dir.DESC : dir.ASC;
	}


	$table.trigger("beforetablesort", {column: th_index, direction: sort_dir});

	// More reliable method of forcing a redraw
	$table.css("display");

	// Run sorting asynchronously on a timout to force browser redraw after
	// `beforetablesort` callback. Also avoids locking up the browser too much.
	setTimeout(function() {
	// Gather the elements for this column
	var column = [];
	var sortFns = $table.data('sortFns');
	var sortMethod = sortFns[datatype];
	var trs = $table.children("tbody").children("tr");

	// Extract the data for the column that needs to be sorted and pair it up
	// with the TR itself into a tuple. This way sorting the values will
	// incidentally sort the trs.
	trs.each(function(index,tr) {
	var $e = $(tr).children().eq(th_index);
	var sort_val = $e.data("sort-value");

	// Store and read from the .data cache for display text only sorts
	// instead of looking through the DOM every time
	if(typeof(sort_val) === "undefined"){
	var txt = $e.text();
	$e.data('sort-value', txt);
	sort_val = txt;
	}
	column.push([sort_val, tr]);
	});

	// Sort by the data-order-by value
	column.sort(function(a, b) { return sortMethod(a[0], b[0]); });
	if (sort_dir != dir.ASC)
	column.reverse();

	// Replace the content of tbody with the sorted rows. Strangely
	// enough, .append accomplishes this for us.
	trs = $.map(column, function(kv) { return kv[1]; });
	$table.children("tbody").append(trs);

	// Reset siblings
	$table.find("th").data("sort-dir", null).removeClass("sorting-desc sorting-asc");
	$this_th.data("sort-dir", sort_dir).addClass("sorting-"+sort_dir);

	$table.trigger("aftertablesort", {column: th_index, direction: sort_dir});
	$table.css("display");
	}, 10);

	return $this_th;
	};

	// Call on a sortable td to update its value in the sort. This should be the
	// only mechanism used to update a cell's sort value. If your display value is
	// different from your sort value, use jQuery's .text() or .html() to update
	// the td contents, Assumes stupidtable has already been called for the table.
	$.fn.updateSortVal = function(new_sort_val){
	var $this_td = $(this);
	if($this_td.is('[data-sort-value]')){
	// For visual consistency with the .data cache
	$this_td.attr('data-sort-value', new_sort_val);
	}
	$this_td.data("sort-value", new_sort_val);
	return $this_td;
	};

	// ------------------------------------------------------------------
	// Default settings
	// ------------------------------------------------------------------
	$.fn.stupidtable.dir = {ASC: "asc", DESC: "desc"};
	$.fn.stupidtable.default_sort_fns = {
	"int": function(a, b) {
	return parseInt(a, 10) - parseInt(b, 10);
	},
	"float": function(a, b) {
	return parseFloat(a) - parseFloat(b);
	},
	"string": function(a, b) {
	return a.localeCompare(b);
	},
	"string-ins": function(a, b) {
	a = a.toLocaleLowerCase();
	b = b.toLocaleLowerCase();
	return a.localeCompare(b);
	}
	};
	})(jQuery);