CODEWITHSUNDEEP
javascriptd3.js
moys
moys

Reputation: 8033

Slicing data in d3.js

I have a data as below in a .csv file.

dataDescription 3-Aug-21    4-Aug-21    5-Aug-21    6-Aug-21    7-Aug-21
Latency_PRL 551.08  551.34  551.55  551.74  551.9
Supliment_PRL   552.5   552.8   553.3   553.65  553.95
Variant_PRL 582.52  583.06  583.38  583.68  584.02
Heat_PRL    870.37  870.63  870.37  870.2   870.42
Humidity_PRL    889.77  889.8   889.9   889.93  890.08
Latency_PS  117.69  120.1   122.08  123.84  125.53
Supliment_PS    100.14  101.2   103 104.27  105.36
Variant_PS  12.65   13.29   13.68   14.05   14.47
Heat_PS 7.37    7.67    7.38    719 7.43
Humidity_PS 34.57   34.63   34.94   35.03   35.51
Latency_Index   15012   32829   27850   24319   24716
Supliment_Index 12904   16613   21496   19396   16037
Variant_Index   2440    7363    4567    4282    4867
Heat_Index  3220    6619    4518    7487    12557
Humidity_Index  5605    6457    11978   11709   11532

This is actually 3 different tables in 1. If you look at the column dataDescription, you will notice that the first 5 rows have 'PRL' , the second 5 have 'PS' and the last five have 'Index'. So, first five rows is one set of data, the 2nd five the next set & so on.

I am able to read the data using the code below using d3.

d3.csv("info.csv").then((data) => console.log(data));

However, I am unable to filter this after so that I get the 5 rows I need. I tried the following code to filter but it does not seem to be working. I get undefined as output. Can anyone help me with this issue? Thanks.

let PRL= d3.csv("info.csv").then((data) => {
  data.filter((d) => {
    d.dataDescription.includes("PRL");
  });
});

PRL.then((data) => console.log(data));

Update With the help of suggestion from Michael, the code below seems to work but I get both the promise & the array when I console log it. I would like to have the variable abc as an array though.

const abc = d3.csv("info.csv").then((item) =>
  item
    .map((item) => {
      const values = item.dataDescription.split("_");
      return { attributeA: values[0], attributeB: values[1], ...item };
    })
    .filter((item) => item.attributeB === "PRL")
);

console.log(abc.then((data) => console.log(data)));

Output in console (13 is correct because my actual data has 13 rows instead of the dummy data put in this question)

If is do just console.log(abc);, I get only the promise

enter image description here

Upvotes: 1

Views: 343

Answers (1)

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

Split the first column into 2 atttributes and filter by one of them:

const data = d3.csvParse(csv)
  .map(item => {
    const values = item.dataDescription.split('_');
    return {attributeA: values[0], attributeB: values[1], ...item};
  })
  .filter(item => item.attributeB === 'PRL')


const csv = `dataDescription,3-Aug-21,4-Aug-21,5-Aug-21,6-Aug-21,7-Aug-21
Latency_PRL,551.08,551.34,551.55,551.74,551.9
Supliment_PRL,552.5,552.8,553.3,553.65,553.95
Variant_PRL,582.52,583.06,583.38,583.68,584.02
Heat_PRL,870.37,870.63,870.37,870.2,870.42
Humidity_PRL,889.77,889.8,889.9,889.93,890.08
Latency_PS,117.69,120.1,122.08,123.84,125.53
Supliment_PS,100.14,101.2,103 104.27,105.36
Variant_PS,12.65,13.29,13.68,14.05,14.47
Heat_PS,7.37,7.67,7.38,719,7.43
Humidity_PS,34.57,34.63,34.94,35.03,35.51
Latency_Index,15012,32829,27850,24319,24716
Supliment_Index,12904,16613,21496,19396,16037
Variant_Index,2440,7363,4567,4282,4867
Heat_Index,3220,6618,4518,7487,12557
Humidity_Index,5605,6457,11978,11709,11532`;

const data = d3.csvParse(csv)
  .map(item => {
    const values = item.dataDescription.split('_');
  return {A: values[0], B: values[1], ...item};
  })
  .filter(item => item.B === 'PRL')
console.log('DATA : ', data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Upvotes: 1

Related Questions