@RyanWest @awee
I've combined the radar chart with a preceding treeselector data-driven object and it works like a charm.
But when I select variables that have positive and negative values, the spider layout gets compromised because it scales taking the maximum as a reference, instead of the data range like in this case.
I'm struggling to adapt de d3 java script code.
In the original version the relevant code section I'd say it the following:
// Create nest to help process tall data structure
const nestedData = d3
.nest()
.key(function(d) {
return d[1];
})
.entries(VA_MESSAGE.data);
const numMeasures = nestedData.length;
// Restructure metadata from data message
OLD_METADATA = METADATA;
DELTA_ANGLE = (2 * Math.PI) / numMeasures;
METADATA = {
category: VA_MESSAGE.columns[0].label,
metrics: {}
};
for (let i = 0; i < numMeasures; i++) {
METADATA.metrics[nestedData[i].key] = {
metric: nestedData[i].key,
angle: i * DELTA_ANGLE,
format: translateFormat(VA_MESSAGE.data[i][3]),
maximum: d3.max(VA_MESSAGE.data, function(d) {
if (d[1] == nestedData[i].key) {
return d[2];
} else {
return Number.MIN_VALUE;
}
})
};
}
// Restructure data from 2d array to array of objects
let datum, metric;
OLD_DATA = DATA;
DATA = [];
for (let i = 0; i < VA_MESSAGE.data.length / numMeasures; i++) {
// Iterate over each category
datum = {
category: VA_MESSAGE.data[i * numMeasures][0],
id: "id-" + VA_MESSAGE.data[i * numMeasures][0].replace(/[\W]/g, "_"),
metrics: []
};
for (let j = 0; j < numMeasures; j++) {
// Iterate over metrics
metric = {
category: datum.category,
metric: VA_MESSAGE.data[i * numMeasures + j][1],
measure: VA_MESSAGE.data[i * numMeasures + j][2],
scaledMeasure:
VA_MESSAGE.data[i * numMeasures + j][2] /
METADATA.metrics[VA_MESSAGE.data[i * numMeasures + j][1]].maximum
};
datum.metrics.push(metric);
}
DATA.push(datum);
}
I haven't found a function that takes the range so I try to substract the min value from the max value.
But the code derails if I put it like this:
for (let i = 0; i < numMeasures; i++) {
METADATA.metrics[nestedData[i].key] = {
metric: nestedData[i].key,
angle: i * DELTA_ANGLE,
format: translateFormat(VA_MESSAGE.data[i][3]),
maximum:
d3.max(VA_MESSAGE.data, function(d) {
if (d[1] == nestedData[i].key) {
return d[2];
} else {
return Number.MIN_VALUE;
}
})
-
d3.min(VA_MESSAGE.data, function(d) {
if (d[1] == nestedData[i].key) {
return d[2];
} else {
return Number.MIN_VALUE;
}
})
};
}
I'm not confortable at all with javascript.
Can someone help me out?
... View more
