Reputation: 25
There is a set of data that comes dynamically from the server and looks like this:
dataSet = [
{vid: "General uneven corrosion", mk: "Visual measurement control", ver: "95"},
{vid: "General uneven corrosion", mk: "Ultrasonic thickness measurement", ver: "95"},
{vid: "General uneven corrosion", mk: "Ultrasonic flaw detection", ver: "80"},
{vid: "General uneven corrosion", mk: "Radiographic control", ver: "80"},
{vid: "General uneven corrosion", mk: "Eddy current control", ver: "60"},
{vid: "General uneven corrosion", mk: "Magnetic control", ver: "20"},
{vid: "General uneven corrosion", mk: "Metallographic research", ver: "20"},
{vid: "Increase in strength characteristics", mk: "Mechanical property studies", ver: "80"},
{vid: "Increase in strength characteristics", mk: "Coercimetry", ver: "40"},
{vid: "Increase in strength characteristics", mk: "Metallographic research", ver: "40"},
{vid: "Increase in hardness", mk: "Mechanical property studies", ver: "95"},
{vid: "Increase in hardness", mk: "Coercimetry", ver: "60"},
{vid: "Increase in hardness", mk: "Metallographic research", ver: "40"},
{vid: "Decreased ductility", mk: "Coercimetry", ver: "60"},
{vid: "Decreased ductility", mk: "Mechanical property studies", ver: "60"},
{vid: "Decreased ductility", mk: "Acoustic emission control", ver: "60"},
{vid: "Decreased ductility", mk: "Magnetic control", ver: "60"},
{vid: "Decreased ductility", mk: "Eddy current control", ver: "40"},
{vid: "Decreased ductility", mk: "Metallographic research", ver: "40"},
{vid: "Decreased ductility", mk: "Visual measurement control", ver: "20"}
];
To plot a grouped bar chart graph using D3, I need to transform the data into the following array of objects:
data = [
{State: "General uneven corrosion", Visual measurement control: 95, Ultrasonic thickness measurement: 95, Ultrasonic flaw detection: 80, Radiographic control: 80, Eddy current control: 60, Magnetic control: 20, Metallographic research: 20, Mechanical property studies: 0, Coercimetry: 0, Acoustic emission control: 0},
{State: "Increase in strength characteristics", Visual measurement control: 0, Ultrasonic thickness measurement: 0, Ultrasonic flaw detection: 0, Radiographic control: 0, Eddy current control: 0, Magnetic control: 0, Metallographic research: 40, Mechanical property studies: 80, Coercimetry: 40, Acoustic emission control: 0},
{State: "Increase in hardness", Visual measurement control: 0, Ultrasonic thickness measurement: 0, Ultrasonic flaw detection: 0, Radiographic control: 0, Eddy current control: 0, Magnetic control: 0, Metallographic research: 40, Mechanical property studies: 95, Coercimetry: 60, Acoustic emission control: 0},
{State: "Decreased ductility", Visual measurement control: 20, Ultrasonic thickness measurement: 0, Ultrasonic flaw detection: 0, Radiographic control: 0, Eddy current control: 40, Magnetic control: 60, Metallographic research: 40, Mechanical property studies: 60, Coercimetry: 60, Acoustic emission control: 60},
columns: ["State", "Visual measurement control", "Ultrasonic thickness measurement", "Ultrasonic flaw detection", "Radiographic control", "Eddy current control", "Magnetic control", "Metallographic research", "Mechanical property studies", "Coercimetry", "Acoustic emission control"]
y: "Detectability"
];
This is where the every State takes on a unique value of vid and every object of final data array contains set of mk. For each object, the order of mk in set is the same, and the value of each mk corresponds to the initial dataSet, or takes 0 if there is no data for this species.
I can get arrays of unique values of a particular key,
let allMk = []
dataSet.forEach(item => {
allMk.push(item.mk)
});
let allMkUni = new Set (allMk)
but I do not understand how to correctly convert objects to the desired form. Help please. Thanks
Upvotes: 0
Views: 75
Reputation: 97130
Probably easiest to reduce()
to an intermediate object, and then map()
the entries to an array:
const data = [
{vid: "General uneven corrosion", mk: "Visual measurement control", ver: "95"},
{vid: "General uneven corrosion", mk: "Ultrasonic thickness measurement", ver: "95"},
{vid: "General uneven corrosion", mk: "Ultrasonic flaw detection", ver: "80"},
{vid: "General uneven corrosion", mk: "Radiographic control", ver: "80"},
{vid: "General uneven corrosion", mk: "Eddy current control", ver: "60"},
{vid: "General uneven corrosion", mk: "Magnetic control", ver: "20"},
{vid: "General uneven corrosion", mk: "Metallographic research", ver: "20"},
{vid: "Increase in strength characteristics", mk: "Mechanical property studies", ver: "80"},
{vid: "Increase in strength characteristics", mk: "Coercimetry", ver: "40"},
{vid: "Increase in strength characteristics", mk: "Metallographic research", ver: "40"},
{vid: "Increase in hardness", mk: "Mechanical property studies", ver: "95"},
{vid: "Increase in hardness", mk: "Coercimetry", ver: "60"},
{vid: "Increase in hardness", mk: "Metallographic research", ver: "40"},
{vid: "Decreased ductility", mk: "Coercimetry", ver: "60"},
{vid: "Decreased ductility", mk: "Mechanical property studies", ver: "60"},
{vid: "Decreased ductility", mk: "Acoustic emission control", ver: "60"},
{vid: "Decreased ductility", mk: "Magnetic control", ver: "60"},
{vid: "Decreased ductility", mk: "Eddy current control", ver: "40"},
{vid: "Decreased ductility", mk: "Metallographic research", ver: "40"},
{vid: "Decreased ductility", mk: "Visual measurement control", ver: "20"}
];
const result = Object.entries(data.reduce((a, {vid, mk, ver}) => {
a[vid] = a[vid] || {};
a[vid][mk] = ver;
return a;
}, {})).map(([k, v]) => ({State: k, ...v}));
console.log(result)
Upvotes: 1