interactive-vis-course/Week9/js_homework.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>

<meta charset="utf-8">
<body>

  <h2>Look in the console.</h2>

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

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

  if (error) {
    console.log(error);
}

console.log(data);

var illnesses = d3.keys(data[0]).filter(function (d) {
    // TODO: how do you get all the keys that are not country or year?
});
console.log("keys", illnesses);

  data.forEach(function(d) {
      var sum = 0;
      // TODO: how would you use the illnesses list to get the total for each row's illnesses? use a forEach.
      d.total = sum;
    });

console.log("totals", data);

var countryNames = //TODO: // How would you use a map to get the country names out of the original data file?

countryNames.sort(//TODO: sort them alphabetically)

console.log(countryNames);

var dateFormat = d3.time.format("Year %Y");
var outputFormat = d3.time.format("%Y");

var nestByCountry = d3.nest()
  .key(function(d) {return d.Country;})
  .sortKeys(d3.ascending)
  .entries(//TODO: what goes in here?);

console.log("nest By country", nestByCountry[0]);

var nestByYear = d3.nest()
  .key(function(d) {
    return outputFormat(dateFormat.parse(d.Year));})
  .sortKeys(function(a,b) {
    console.log(a, b);
    // TODO: How would you sort these?  think about using your date formats, and check what a and b are.
  })
  .entries(data);

  console.log("nest By Year", nestByYear[0]);

  var years = // TODO: use a map function on the nestByYear to get the years as strings in an array.

  console.log(years);

  var maxMeaslesFor2013 = //TODO: find the max measles in 2012 using the nestByYear results, using maps, filters, d3.max, d3.keys, d3.values, etc.  There are several ways.

  console.log(maxMeaslesFor2012);

  var nestByCountryYear = d3.nest()
  // TODO: nest by country, then by year.
    .entries(data);

  console.log("by country then year", nestByCountryYear[0]);


  d3.csv("data/co2_emissions.csv", do_stuff);  // fill in do_stuff below:


}); // end d3.csv on illnesses


function do_stuff(error, data) {

  var years =  // write some code to get an array of all the years from the columns in the data set.

  var countries = // write some code to get all the country names (consider map).

    // what is another way to write data[0].countryName?

  console.log(data[0] // fill it in here)

  // how do you get the last object in the data array?

  console.log(data // fill it in here)

  var totals = [];
  data.forEach( // write a loop to calculate the total for each country across all the years.
    // make an object that has { country: countryName, total: totals} for each country and add it to the array totals.
    );

  console.log(totals.length, totals[0], totals[0].country, totals[0].total);

  // TODO: Write a JS function that would calculate what percentage of the total country's year emissions are -- e.g., if Algeria's 1961 value is 6065.218, what percent of the total is that?

  // Extra credit (5): for each country's data, calculate the percent of total emissions that each year is responsible for, using your function. Save this in an object along with the original value. console.log it too.

} // end of do_stuff


</script>
</body>