D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
lmelgar
Full window
Github gist
Week 9: "JS homework".
<!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("deaths_04yearsold_excerpt.csv", function(error, data) { if (error) { console.log(error); } console.log(data); var illnesses = d3.keys(data[0]).filter(function(key) { return key !== "Country" && key !== "Year"; }); console.log("keys", illnesses); //TODO: how do you get all the keys that are not country or year? data.forEach(function(d) { var sum = 0; illnesses.forEach(function(i) { sum += +d[i]; }); d.total = sum; }); // TODO: how would you use the illnesses list to get the total for each row's illnesses? use a forEach. console.log("totals", data); var countryNames = d3.map(data, function(d){ return d.Country; }) .keys(); //TODO: // How would you use a map to get the country names out of the original data file? Returns an array of string keys for every entry in this map. The order of the returned keys is arbitrary. countryNames.sort(d3.ascending); 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(data); console.log("nest By country", nestByCountry[0]); var nestByYear = d3.nest() .key(function(d) { return outputFormat(dateFormat.parse(d.Year)); }) .sortValues(function(a,b) { return outputFormat.parse(a.Year) - outputFormat.parse(b.Year) 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); var years = nestByYear.map(function(d) { return d.key; })// TODO: use a map function on the nestByYear to get the years as strings in an array. console.log(years); var maxMalariaFor2013 = d3.max(nestByYear[nestByYear.length-1].values, function(d) { /*return d3.max(d.values, function(d) { return +d.Malaria; });*/ return +d.Malaria; }) //TODO: find the max malaria in 2013 using the nestByYear results, using maps, filters, d3.max, d3.keys, d3.values, etc. There are several ways. console.log("Nigeria:", maxMalariaFor2013); var nestByCountryYear = d3.nest() .key (function(d) { return d.Country; }) .key (function(d) { return outputFormat(dateFormat.parse(d.Year)); }) // TODO: nest by country, then by year. .entries(data); console.log("by country then year", nestByCountryYear[0]); }); </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js