interactive-vis-course/Week3/d3_new_obj_data.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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	</head>
	<body>

		<h1>Loading CSV and processing the data into new objects.</h1>
		<p>Look in the console!</p>
		<p>If you open the console after loading, you'll need to reload the page.</p>

		<script type="text/javascript">

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

			var total1990 = 0;
			var total2015 = 0;

			d3.csv("data/water_improvement_data.csv", function(error, data) {

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

				// Here we set up an array that's empty.  We will put objects into it.
				var myobjs = [];


				// Your arguments for forEach are the item and it's number in the array:
				data.forEach(function(d, i){

					// NB: it's much more common to see (d, i) as shorthand in D3 code.

					console.log("source data", i, d);

					// here we are putting in values only for the items we care about.
					myobjs.push({
					  region: d.name,
					  difference: d.year2015 - d.year1990
					});
					console.log("my obj", i, myobjs[i]);
				});

				console.log("original data", data);
				console.log("new data objects", myobjs);

				// let's also fix some capitals -- we could do this in the CSV of course.

				myobjs.forEach(function(d) {
					if (d.region === "Developing regions") {
						d.region = "Developing Regions";
					}
					if (d.region === "Developed regions") {
						d.region = "Developed Regions";
					}
				});

				console.log("fixed myobjs", myobjs[12], myobjs[11]);

			});

		</script>

	</body>
</html>