CODEWITHSUNDEEP
javascriptjsond3.js
Евгений Стужук
Евгений Стужук

Reputation: 25

Getting data from JSON for D3.js

I receive data from the server in this form:

jsonData = [{vid: "General uneven corrosion", ver: "95"}, 
 {vid: "General uneven corrosion", ver: "95"},
 {vid: "General uneven corrosion", ver: "80"},
 {vid: "General uneven corrosion", ver: "80"},
 {vid: "General uneven corrosion", ver: "60"},
 {vid: "General uneven corrosion", ver: "20"},
 {vid: "General uneven corrosion", ver: "20"},
 {vid: "Increase in strength characteristics", ver: "80"},
 {vid: "Increase in strength characteristics", ver: "40"},
 {vid: "Increase in strength characteristics", ver: "40"},
 {vid: "Increase in hardness", ver: "95"},
 {vid: "Increase in hardness", ver: "60"}
 {vid: "Increase in hardness", ver: "40"},
 {vid: "Decreased ductility", ver: "60"},
 {vid: "Decreased ductility", ver: "60"},
 {vid: "Decreased ductility", ver: "60"},
 {vid: "Decreased ductility", ver: "60"},
 {vid: "Decreased ductility", ver: "40"},
 {vid: "Decreased ductility", ver: "40"},
 {vid: "Decreased ductility", ver: "20"}]

For the graph, I need to transform the data into the following form:

    var data = [
  {
    state: 'General uneven corrosion',
    stats: [95,95,80,80,60,20,20]
  },
  {
    state: 'Increase in strength characteristics',
    stats: [80,40,40]
  },
  {
    state: 'Increase in hardness',
    stats: [95,60,40]
  },
  {
    state: 'Decreased ductility',
    stats: [60,60,60,60,40,40,20]
  }]

I filtered the received data:

var fltrd = []
                       
                       
fltrd.push(jsonData.filter(item => item.vid.includes(jsonData[0].vid)))   

for (let j=0; j < jsonData.length; j++) {
                            
 if (j > 0 && j < jsonData.length && jsonData[j - 1].vid !== jsonData[j].vid) {
     fltrd.push(jsonData.filter(item => item.vid.includes(jsonData[j].vid)))} 
}
console.log (fltrd)

...and got an array:

[[{vid: "General uneven corrosion", ver: "95"}, 
  {vid: "General uneven corrosion", ver: "95"},
  {vid: "General uneven corrosion", ver: "80"},
  {vid: "General uneven corrosion", ver: "80"},
  {vid: "General uneven corrosion", ver: "60"},
  {vid: "General uneven corrosion", ver: "20"},
  {vid: "General uneven corrosion", ver: "20"}], 
 [{vid: "Increase in strength characteristics", ver: "80"},
  {vid: "Increase in strength characteristics", ver: "40"},
  {vid: "Increase in strength characteristics", ver: "40"}],
 [{vid: "Increase in hardness", ver: "95"},
  {vid: "Increase in hardness", ver: "60"}
  {vid: "Increase in hardness", ver: "40"}],
 [{vid: "Decreased ductility", ver: "60"},
  {vid: "Decreased ductility", ver: "60"},
  {vid: "Decreased ductility", ver: "60"},
  {vid: "Decreased ductility", ver: "60"},
  {vid: "Decreased ductility", ver: "40"},
  {vid: "Decreased ductility", ver: "40"},
  {vid: "Decreased ductility", ver: "20"}]]

Please help to bring to the right form. Maybe I'm going the wrong way and better use the D3 methods? I have little experience, please help. Thank you

Upvotes: 2

Views: 62

Answers (1)

Robin Mackenzie
Robin Mackenzie

Reputation: 19319

You might be looking for d3.group:

jsonData = [
  {vid: "General uneven corrosion", ver: "95"}, 
  {vid: "General uneven corrosion", ver: "95"},
  {vid: "General uneven corrosion", ver: "80"},
  {vid: "General uneven corrosion", ver: "80"},
  {vid: "General uneven corrosion", ver: "60"},
  {vid: "General uneven corrosion", ver: "20"},
  {vid: "General uneven corrosion", ver: "20"},
  {vid: "Increase in strength characteristics", ver: "80"},
  {vid: "Increase in strength characteristics", ver: "40"},
  {vid: "Increase in strength characteristics", ver: "40"},
  {vid: "Increase in hardness", ver: "95"},
  {vid: "Increase in hardness", ver: "60"},
  {vid: "Increase in hardness", ver: "40"},
  {vid: "Decreased ductility", ver: "60"},
  {vid: "Decreased ductility", ver: "60"},
  {vid: "Decreased ductility", ver: "60"},
  {vid: "Decreased ductility", ver: "60"},
  {vid: "Decreased ductility", ver: "40"},
  {vid: "Decreased ductility", ver: "40"},
  {vid: "Decreased ductility", ver: "20"}
];

let grouped = d3.group(jsonData, d => d.vid);

let fltrd = Array.from(grouped, ([k, v]) => {
  return {
    "state": k,
    "stats": v.map(d => +d.ver)
  }
});

console.log(fltrd);
<script src="https://d3js.org/d3.v6.min.js"></script>

You can do this without D3 though:

let fltrd = [];

let groups = Array.from(new Set(jsonData.map(k => k.vid)))

groups.map(k => 
    fltrd.push({
      "state": k,
      "stats": jsonData.filter(j => j.vid == k).map(j => +j.ver)
    })
  );

Upvotes: 3

Related Questions