chart = {
// Background
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "gray");
// Toolbox
const scalerX = d3
.scaleLinear()
.domain([0, 1])
.range([width * 0.05, width * 0.9]);
const scalerY = d3
.scaleLinear()
.domain([0, 1])
.range([height * 0.05, height * 0.95]);
const scalerColor = d3.interpolateOrRd;
// Colorbar
const numColorBar = 10;
svg
.append("g")
.selectAll("circle")
.data(d3.range(numColorBar).map((d) => d / numColorBar))
.join("circle")
.attr("cx", width * 0.95)
.attr("cy", (d) => scalerY(1 - d))
.attr("r", 10)
.attr("fill", (d) => scalerColor(d));
svg
.append("g")
.selectAll("text")
.data(d3.range(numColorBar).map((d) => d / numColorBar))
.join("text")
.text((d) => d)
// .attr("fill", "red")
.attr("x", width * 0.95 + 8)
.attr("y", (d) => scalerY(1 - d));
// Draw Mesh
svg
.append("g")
.selectAll("line")
.data(voronoi.delaunay.edges)
.join("line")
.attr("x1", (d) => {
return scalerX(nodes[d[0]].x);
})
.attr("y1", (d) => scalerY(nodes[d[0]].y))
.attr("x2", (d) => scalerX(nodes[d[1]].x))
.attr("y2", (d) => scalerY(nodes[d[1]].y))
.attr("stroke", "orange");
// Draw Nodes
svg
.append("g")
.attr("id", "targetGroup")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("cx", (d) => scalerX(d.x))
.attr("cy", (d) => scalerY(d.y))
.attr("r", (d) => 10)
.attr("fill", (d, i) => scalerColor(generation[rangeGeneration][i]));
return svg.node();
}
generation.map((d) => d3.mean(d))
generation = {
button;
set_values();
const count = 500;
const generation = [];
const r = 0.1;
generation.push(nodes.map((d) => d.z));
for (let i in d3.range(count)) {
const values = generation[generation.length - 1].map((d) => d);
for (let j = 0; j < values.length; j++) {
let neighbors = voronoi.delaunay.neighbors[j];
let valueNeightbor = d3.mean(neighbors.map((d) => values[d]));
values[j] += r * valueNeightbor;
for (let k = 0; k < neighbors.length; k++) {
values[neighbors[k]] -= (valueNeightbor * r) / neighbors.length;
}
}
generation.push(values);
}
return generation;
}
voronoi.delaunay
voronoi = {
const points = nodes.map((d) => [d.x, d.y]);
const voronoi = d3.geoVoronoi(points);
return voronoi;
}
nodes = mk_nodes(rangeCount)
set_values = () => {
for (let i = 0; i < nodes.length; i++) {
nodes[i].z = 0.1 + Math.random() * 0.9;
}
}
mk_nodes = (count) => {
const nodes = [];
for (let i = 0; i < count; i++) {
nodes.push({ x: Math.random(), y: Math.random(), z: 0 });
}
return nodes;
}
height = (width * 9) / 16
d3 = require("d3", "d3-geo-voronoi")
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.
