seededRandom(randomSeeds)
chart = {
let color = muzli[Palette];
let seed = seededRandom(randomSeeds);
let simulation = d3
.voronoiMapSimulation(data_0)
.initialPosition(d3.voronoiMapInitialPositionPie())
// .size([width / 2, height / 2])
.weight((d) => d.weight)
.prng(seed)
.clip(ellipse)
.stop();
function ticked() {
let state = simulation.state();
while (!state.ended) {
simulation.tick();
state = simulation.state();
}
let polygons = state.polygons;
const cell = svg
.selectAll(".cell")
.data(polygons)
.join("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("class", "cell");
cell
.selectAll("path")
.data((d) => [d])
.join("path")
// .attr("d", (d) => `M${d.join("L")}Z`)
.attr("d", (d, i) => {
d.area = d3.polygonArea(d);
// console.log(d.area);
return drawRoundedPolygon(d, area_scale(d.area)); //rounded-corners.js
})
.attr("fill", (d, i) => {
return color[randInt(5)];
})
.attr("stroke", "white")
.attr("stroke-width", 10);
}
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 100]);
svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.append("circle")
.attr("cx", 300)
.attr("cy", 300)
.attr("r", 310)
.attr("stroke", "lightgrey");
ticked()
return svg.node();
}
height = 600
d3 = require("d3@6", "d3-weighted-voronoi", "d3-voronoi-map", "d3-voronoi-treemap")
data_0 = [
{ name: "A", weight: 20 },
{ name: "B", weight: 30 },
{ name: "C", weight: 40 },
{ name: "D", weight: 8 },
{ name: "E", weight: 11 },
{ name: "E", weight: 33 },
{ name: "F", weight: 48 },
{ name: "G", weight: 20 },
{ name: "H", weight: 23 },
{ name: "I", weight: 10 },
{ name: "J", weight: 640 }
// ... more data objects
]
sa = d3
.forceSimulation(data_0)
.force("y", d3.forceY(height / 2).strength(0.05))
.on("tick", () => {
console.log(data_0[0].x);
})
ellipse = d3
.range(100)
.map((i) => [
(600 * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,
(height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2
])
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.
