A ♥ for data visualization + interaction
dataPoints = 5000;
columns = 45;
rows = 25;
K = dataPoints * 0.1;
powerParameter = 16;
function getShephardsInterpolatedValue(P) {
// add your own code here ...
// feel free to create more more cells for functions, variables, etc.
return 0;
}
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.
