How do I filter data in D3 based on several variables within JSON data?

Question

I am new to D3.js and need some help. I currently have some json data that kind of looks like this, there are multiple instances within the data where a variety of course titles and atendances appear but i just used two to show as an example... (there are more fields but these are the one that are key to the question.

{
"Course_title": "Adv Mech Eng",
"Attendance_record": 0.89,
"Last_attendance": "2018-10-19 09:00:00.000",
},
{
 "Course_title": "Comp Sci",
 "Attendance_record": 0.50,
 "Last_attendance": "2018-10-19 15:59:59.999"
 }

I wanted to know how do i filter or manipulate the data, such that it gives me the mean attendance for each individual course title, within the last like 30 days for instance.

d3.json('attendance_data.json', function(data) {
var avg_data = d3.nest()
    .key(function (d) {
        return d.Course_title
    })
    .rollup(function (v) {
        return d3.mean(v, function (d) {
            return d.Attendance_record;
        });
    })
    .entries(data);
console.log(JSON.stringify(avg_data));
return avg_data;

I have no idea how to do the date element however, but i have tried the above code as a part implementation, and i cant seem to use it so i can input it into my d3 chart code.

Please can someone help, as i am new to d3 and have been stuck on it now for a few days.

Answer 1

You could use d3.utcParse to read a date parameter. There is also option filter to mine courses by date.

The code to retrieve the date 30 days ago is from another SO post: how-to-get-30-days-prior-to-current-date

Here is an example:

d3.json('attendance_data.json', function(data) {

  //Date today and 30 days ago
  var dateToday = new Date()
  var date30daysAgo = new Date(new Date().setDate(dateToday.getDate()-30))

  // Parser to "Last_attendance"
  var parserDate = d3.utcParse("%Y-%m-%d %H:%M:%S.%L")

  //Courses occurring in the last 30 days
  var selectedCourses = data.filter(function(d){
    return parserDate(d.Last_attendance) > new Date(date30daysAgo);
  })

  var avg_data = d3.nest()
    .key(function (d) {
      return d.Course_title //group by couse title
    })
    .rollup(function (courses) {
      return d3.mean(courses, function (d) {
        return d.Attendance_record;//mean of attendance
      });
    })
    .entries(selectedCourses);

 
  console.log(JSON.stringify(avg_data));

})

<script src="https://d3js.org/d3.v4.min.js"></script>