Getting data from JSON for D3.js

Question

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

Robin Mackenzie · Accepted Answer · 2020-12-28 10:55:32Z

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)
    })
  );

Collectives™ on Stack Overflow

Getting data from JSON for D3.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related