What is the best approach to filter data in D3 by multiple variables within JSON data?

Question

What is the best approach to filter data in D3 by multiple variables within JSON data?

Seeking guidance with D3.js for my new project. I have JSON data containing course titles, attendance records, and last attendance dates. How can I filter or manipulate this data to calculate the mean attendance for each individual course title within the past 30 days?

{
"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 attempted using d3.nest() and d3.mean() functions, but struggling with incorporating the date element into the code for a d3 chart. Any assistance from experienced D3 users would be greatly appreciated!

javascript json d3.js

Answer 1

Answer №1

If you're looking to extract a date parameter, consider utilizing d3.utcParse function. Another useful tool is the filter option for sorting courses based on dates.

To retrieve the date from 30 days ago, refer to this resource shared in an SO post: how-to-get-30-days-prior-to-current-date

Check out the following example:

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

  //Current date and date 30 days ago
  var currentDate = new Date()
  var thirtyDaysAgo = new Date(new Date().setDate(currentDate.getDate()-30))

  // Creating parser for "Last_attendance"
  var parseDate = d3.utcParse("%Y-%m-%d %H:%M:%S.%L")

  // Filter data for courses occurring in the last 30 days
  var filteredCourses = data.filter(function(d){
    return parseDate(d.Last_attendance) > new Date(thirtyDaysAgo);
  })

  var avgData = d3.nest()
    .key(function (d) {
      return d.Course_title; // Grouping by course title
    })
    .rollup(function (courses) {
      return d3.mean(courses, function (d) {
        return d.Attendance_record; // Calculating mean attendance
      });
    })
    .entries(filteredCourses);

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

})

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

Answer 2

If you're looking to extract a date parameter, consider utilizing d3.utcParse function. Another useful tool is the filter option for sorting courses based on dates.

To retrieve the date from 30 days ago, refer to this resource shared in an SO post: how-to-get-30-days-prior-to-current-date

Check out the following example:

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

  //Current date and date 30 days ago
  var currentDate = new Date()
  var thirtyDaysAgo = new Date(new Date().setDate(currentDate.getDate()-30))

  // Creating parser for "Last_attendance"
  var parseDate = d3.utcParse("%Y-%m-%d %H:%M:%S.%L")

  // Filter data for courses occurring in the last 30 days
  var filteredCourses = data.filter(function(d){
    return parseDate(d.Last_attendance) > new Date(thirtyDaysAgo);
  })

  var avgData = d3.nest()
    .key(function (d) {
      return d.Course_title; // Grouping by course title
    })
    .rollup(function (courses) {
      return d3.mean(courses, function (d) {
        return d.Attendance_record; // Calculating mean attendance
      });
    })
    .entries(filteredCourses);

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

})

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

What is the best approach to filter data in D3 by multiple variables within JSON data?

Answer №1

Similar questions

Assistance is needed in integrating pinch zoom into the css3d_youtube demo in three.js. The trackball controls are causing issues with the

Exploring the Interplay of JSON Objects in SQL Server and C#

Having trouble getting rid of the border-bottom?

The returned state from setState(prev) seems to be in the opposite order when referencing another useState variable within a useEffect

Tips for sending formData (file upload) via jQuery ajax with MVC model

Error thrown by Jest: TypeError - req.headers.get function is not defined

Load remote JSON data into WordPress Advanced Custom Fields through the backend

Unveiling the significance behind the utilization of the.reduce() function in conjunction with Object.assign()

The counterpart to Ruby's `.select{ |x| condition }` in Javascript/ React.js would be to

Analyze the value of key.name against a string within a JSON reply

Issue encountered while attempting to deactivate certain foundation CSS and JavaScript files

What is the best way to incorporate the "child_process" node module into an Angular application?

Looking to showcase both input and output on a single PHP page?

The changes to the grid options do not reflect immediately on the UI Grid interface

Is it possible to retrieve the createdAt timestamp without displaying the 'GMT+0000 (Coordinated Universal Time)'?

Concealing Angular Flexslider until it is entirely loaded

formik does not support using the "new Date" function as an initial value

The AngularJS error message [$rootScope:infdig] is triggered when the number of $digest() iterations exceeds 10 due to a window

JS, Async (library), Express. Issue with response() function not functioning properly within an async context

The type unknown[] cannot be assigned to type React.ReactNode