I wanted to make a Ridgeline Plot, which changes, when using a dropdown menu to change the data.
Started with a simple attempt first, and first rows are fine, but one of them is kinda off.
The line is not closing on the same y-coord. like at the beginning of the line-path.path not closing in one of the rows of my plot
The code snippet:
const kde = kernelDensityEstimator(kernelEpanechnikov(7), xR.ticks(150))
const allDensity = []
for (i = 0; i < monthN; i++) {
key = monthsAvg[i]
density = kde( yearData.map(function(d){ return d[key]; }) )
allDensity.push({key: key, density: density})
}
svgR.selectAll("areas")
.data(allDensity)
.join("path")
.attr("transform", function(d){return(`translate(0, ${(yNameR(d.key)-heightR)})`)})
.datum(function(d){return(d.density)})
.attr("fill", "#69b3a2")
.attr("stroke", "#000")
.attr("stroke-width", 0.5)
.attr("d", d3.line()
.curve(d3.curveBasis)
.x(function(d) { return xR(d[0]); })
.y(function(d) { return yR(d[1]); })
);
function kernelDensityEstimator(kernel, X) {
return function(V) {
return X.map(function(x) {
return [x, d3.mean(V, function(v) { return kernel(x - v); })];
});
};
}
function kernelEpanechnikov(k) {
return function(v) {
return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
};}
When I change the y-coord. manually in the browser it will come out correctly. But since I have a function drawing the plots based on my data, I have no idea how to approach this issue.
If anyone has an idea how to make every plot end on the same y-coordinate, I would be really glad.