"Utilize d3.js to selectively filter through a nested array of objects based on specific object

Question

"Utilize d3.js to selectively filter through a nested array of objects based on specific object

I have collected a dataset of meteorite landings and organized the data into four keys based on type:

  var dataByType = d3.nest()
    .key(function(d) {
          return d.rectype;
    })
    .entries(dataset); // original dataset

You can see the resulting structure here: data

https://i.sstatic.net/aiYHt.png

Now, my goal is to create new arrays by filtering the nested data. I want each filtered array to only include objects within a specified mass range.
I attempted the following:

// Filter small meteorites
var lightWeight = dataByType.forEach(function(d){
      d.values.filter(function (object) {
            var mass = object.mass;
            return mass <= 100;
      });
  });

However, this code snippet returns "undefined".

Nesting the data has proven challenging for me. Can you help me identify where I went wrong?
Thank you in advance

javascript arrays d3.js filter

Answer 1

Answer №1

It seems like the issue lies in overwriting lightWeight during each iteration of the forEach loop. Instead, consider creating lightWeight as its own object and then adding the necessary keys within the loop:

const lightWeight = {};

dataByType.forEach(function(d){
  lightWeight[d.key] = d.values.filter(function (object) {
    var mass = object.mass;
    return mass <= 100;
  });
});

Check out this CodePen example which should achieve the desired functionality: https://codepen.io/benjaminwfox/pen/veBjrP?editors=0012

Answer 2

It seems like the issue lies in overwriting lightWeight during each iteration of the forEach loop. Instead, consider creating lightWeight as its own object and then adding the necessary keys within the loop:

const lightWeight = {};

dataByType.forEach(function(d){
  lightWeight[d.key] = d.values.filter(function (object) {
    var mass = object.mass;
    return mass <= 100;
  });
});

Check out this CodePen example which should achieve the desired functionality: https://codepen.io/benjaminwfox/pen/veBjrP?editors=0012

Answer 3

Answer №2

I'm not sure about the specifics of your dataset, but is it possible that the lightWeight value is not being returned in the final output?

Answer 4

I'm not sure about the specifics of your dataset, but is it possible that the lightWeight value is not being returned in the final output?

Answer 5

Answer №3

It seems like you might be unsure about the specific criteria for filtering, but consider using map instead of forEach. Make sure to return d in the anonymous function.

For example:

var filteredData = dataByType.map(function(d) {
    d.filteredValues = d.values.filter(function (object) {
        return object.mass <= 100;
    });
    return d;
});

Answer 6

It seems like you might be unsure about the specific criteria for filtering, but consider using map instead of forEach. Make sure to return d in the anonymous function.

For example:

var filteredData = dataByType.map(function(d) {
    d.filteredValues = d.values.filter(function (object) {
        return object.mass <= 100;
    });
    return d;
});

Answer 7

Answer №4

If you have data in the same format as described, where each item has a key property and a values array, you can filter the values array by the mass property of each entry using a combination of .map() and .filter() methods.

Here is how your code should look:

var lightWeight = data.map(function(d){
    var obj = {};
    obj.key = d.key;
    obj.values = d.values.filter(function (object) {
            return object.mass <= 100;
    });
    return obj;
});

By implementing this code, you will obtain the desired results.

Answer 8

If you have data in the same format as described, where each item has a key property and a values array, you can filter the values array by the mass property of each entry using a combination of .map() and .filter() methods.

Here is how your code should look:

var lightWeight = data.map(function(d){
    var obj = {};
    obj.key = d.key;
    obj.values = d.values.filter(function (object) {
            return object.mass <= 100;
    });
    return obj;
});

By implementing this code, you will obtain the desired results.

"Utilize d3.js to selectively filter through a nested array of objects based on specific object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JQuery Keyup event is not functioning as expected

Executing the command causes an error when res.download() is called, resulting in a request

Making changes to a variable or option through the props in a different file

How can I iterate over an array in JavaScript to create posts for an HTML feed using Bootstrap?

Extracting information from within Ajax's Jsonp

I have a website hosted on Heroku and I am looking to add a blog feature to it. I initially experimented with Butter CMS, but I found it to be too pricey for my budget. Any suggestions on

Oops! Looks like there's an issue with the NextJS Custom Carousel bug. The error message reads: ReferenceError: document is not defined and is unable to read properties of undefined (

Is there a way to send numerous results using these ajax functions through a POST request?

Transitioning create-react-app from JavaScript to Typescript

A status code of 200 indicates a successful login, which then leads to a 401 status code upon making a

Fetching database entries upon page load instead of using the keyup function in JavaScript

The promise is unexpectedly fulfilled ahead of schedule without returning the expected value from an AXIOS call

Conceal a dataLabel for a particular series in Highcharts

Increasing the size of elements with jQuery animate method

Adjust picture based on the MaterialUI slider's value

Implementing functions within a loop with the help of requirejs

How can I create a customized placeholder effect for the Paytm login page text box?

Exploring ways to analyze data that shares similarities within a JSON object document

Sorry, we encountered a snipcart issue: The public API key was not found. To fix this, please ensure that the attribute data-api-key is

What causes the text field and checkbox to move downward as I enter text?