allValues = data.map((d) => d.value)
uniqueValues = _.uniq(allValues)
sortedUniqueValues = uniqueValues.sort((a, b) => a - b)
updatedData = data.map((d) => ({
...d,
calculatedPercentile:
(sortedUniqueValues.indexOf(d.value) + 1) / sortedUniqueValues.length
}))
dataSorted = [...updatedData].sort((a, b) => a.value - b.value)
dataRawPercentile = dataSorted.map((d, i) => ({
...d,
rawPercentile: (i + 1) / dataSorted.length
}))
dataRawPercentileGrouped = d3.groups(dataRawPercentile, (d) =>
d.value.toString()
)
finalData = dataRawPercentileGrouped.reduce((memo, [i, g]) => {
let meanPercentile = d3.mean(g, (d) => d.rawPercentile);
let calculated = g.map((d) => ({
...d,
meanPercentile
}));
return [...memo, ...calculated];
}, [])
d3 = require("d3-array@^2.10")
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
