Data Visualization Engineer
Public
Edited
Mar 5
hype_data = [
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],
[1,3,5.2,7.2,9,8,6.5,5,4,3,2.5,3,3.5,4,4.5,5,5,5,5,5,5,5,5,5,5]
].reduce((acc, d, i) => {
if (acc.length) {
return acc.map((m, j) => ({ ...m, y: d[j] }))
}
return d.map((m, j) => ({ x: m }))
}, [])
Plot.lineY(hype_data, { x: "x", y: "y", curve: "cardinal" }).plot({
y: { grid: true, axis: true }
})
function interpolateHypeY(x, hypeData) {
if (x < hypeData[0].x || x > hypeData[hypeData.length - 1].x) {
throw new Error("X value is out of range");
}
// Find the two nearest points
for (let i = 0; i < hypeData.length - 1; i++) {
let p1 = hypeData[i];
let p2 = hypeData[i + 1];
if (x >= p1.x && x <= p2.x) {
let t = (x - p1.x) / (p2.x - p1.x); // Normalize between 0 and 1
return p1.y * (1 - t) + p2.y * t; // Linear interpolation
}
}
return null; // Should not reach here
}
interpolateHypeY(3, hype_data)
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.
