interactive-vis-course/Week4/d3_tabulate_function_sortable.html at gh-pages · arnicas/interactive-vis-course · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Sortable Table with D3 and JQuery</title>

	</head>

	<style>
		th {
			cursor: pointer;
		}
	</style>

	<body>

		<h1>Loading CSV and making a table!</h1>
		<p>This version uses a D3 function and then a jquery plugin to add sorting.</p>
		<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>

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

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

		<script type="text/javascript">

			//Load in contents of CSV file, and do things to the data.

			d3.csv("data/water_improvement_data.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.Difference = d.year2015 - d.year1990;
					// I'm adding attributes with the names I want as column headers,
					// because of how the tabulate function works, and because I want prettier column names.
					d["1990"] = d.year1990; // you can't use dot notation with a number
					d["2015"] = d.year2015;
					d.Region = d.name;
				});

				console.log(data);

				// Notice here I am giving it prettier column names:

				var regionTable = tabulate(data,
					                        ["Region", "1990", "2015", "Difference"],
					                        ["Region", "1990", "2015", "Difference"],
					                        "#table");

				// Now we are adding attributes to the existing header cells here, for use
				// in the jquery function below.
				d3.selectAll("th")
					.data(["string", "int", "int", "int"])
					.attr("data-sort", function(d) {return d;});

				// Now that the table exists - we can use it with JQuery functions!
				$("table").stupidtable();

				// Notice that we had to add a CSS rule for this to be discoverable.

			});

		</script>

</body>
</html>