A ♥ for data visualization + interaction
dataPoints = 5000;
columns = 45;
rows = 25;
K = dataPoints * 0.1;
powerParameter = 16;
function getShephardsInterpolatedValue(P) {
const distancesToP = getDistancesToP(P);
if (distancesToP[0].distanceP === 0) {
return distancesToP[0].point.z;
}
const kNN = distancesToP.slice(0, K).map (d => d.point);
const numerator = kNN
.map(Di => {
const wi = getWi(Di, P);
const ui = Di.z;
return wi*ui;
})
.reduce(sum, 0);
const denominator = kNN
.map(Di => getWi(Di, P))
.reduce(sum, 0);
const shephardsInterpolatedValue = numerator / denominator;
return shephardsInterpolatedValue;
}
function distance(P, Di) {
return Math.sqrt((P.x - Di.x) ** 2 + (P.y - Di.y) ** 2);
}
function getDistancesToP(P) {
// distance of all data points to center point of cell
// TODO: this is horribly inefficient
const distancesToP = randomData
.map(Di => {
return {
point: Di,
distanceP: distance(P, Di)
};
})
.sort((a, b) => a.distanceP - b.distanceP);
return distancesToP;
}
function getWi(Di, P) {
const wi = 1 / (distance(P, Di) ** powerParameter);
return wi;
}
sum = (a, b) => a + b;
height = 500;
margin = 10;
dotRadius = 3;
resolution = 4;
perlinOctaves = 8;
function renderGrid(canvas) {
const grid = canvas.select("g.grid")
.attr("transform", `translate(${margin}, ${margin})`);
grid.selectAll("*").remove();
// generates a rows x columns matrix, using values from a Perlin noise field.
const linearizedMatrix = linearizeMatrix(matrix);
const cells = grid.selectAll("g.cell").data(linearizedMatrix).enter()
.append("g")
.attr("class", "cell")
.attr("transform", d => `translate(${d.col * spacing}, ${d.row * spacing})`);
const boundary = cells.append("rect")
.attr("class", "boundary")
.attr("width", spacing)
.attr("height", spacing)
.attr("stroke", "transparent")
.attr("fill", d => color(getShephardsInterpolatedValue(d.value)))
.on("click", (event, d) => {
});
return canvas;
}
/**
* Draws the dots that represent the Perlin noise from the matrix.
*/
function renderDots(canvas) {
const points = canvas.select("g.points");
points.selectAll("*").remove();
const point = points.selectAll("circle.point").data(randomData).enter()
.append("circle")
.attr("class", "point")
.attr("r", dotRadius)
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("fill", d => color(d.z))
.attr("stroke", "#ccc");
point.append("title").text(d => d.value);
return canvas;
}
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.
