chart = {
replay;
const context = DOM.context2d(width, height);
const nodes = logItems;
const simulation = d3
.forceSimulation(nodes)
.velocityDecay(0.2)
.force("x", d3.forceX().strength(0.002))
.force("y", d3.forceY().strength(0.002))
.force(
"collide",
d3
.forceCollide()
.radius((d) => {
return circleScale(d.count);
})
.iterations(2)
)
.on("tick", ticked);
// console.log(nodes);
invalidation.then(() => simulation.stop());
function ticked() {
// console.log(nodes);
context.clearRect(0, 0, width, height);
context.save();
context.translate(width / 2, height / 2);
// context.fillStyle = "#000";
for (const d of nodes) {
context.fillStyle = "#000";
context.moveTo(d.x + d.count, d.y);
context.beginPath();
context.arc(d.x, d.y, circleScale(d.count), 0, 2 * Math.PI);
// context.font(`9px sans-serif`);
// context.fillText(d.ingredient, d.x, d.y);
context.fill();
// context.moveTo(d.x + d.count, d.y);
// context.font(`6px arial`);
if (d.count > 10) {
context.fillStyle = "#fff";
context.textAnchor = "center";
context.textAlign = "center";
context.beginPath();
context.fillText(d.ingredient.slice(0, 9), d.x, d.y + 2);
}
}
// context.fill();
// for (const d of nodes) {
// context.beginPath();
// context.moveTo(d.x + d.count, d.y);
// // context.arc(d.x, d.y, d.count * 2, 0, 2 * Math.PI);
// context.font(`9px sans-serif`);
// context.fillText(d.ingredient, d.x, d.y);
// }
// context.fillStyle = "#fff";
// context.fill();
// context.strokeStyle = "#333";
// context.stroke();
context.restore();
}
return context.canvas;
}
circleScale = d3.scalePow().domain([5, 25]).range([5, 50])
fontScale = d3.scaleLinear().domain([1, 10]).range([3, 12]).clamp(true)
2022-12-29 1_59pm.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
height = width
import {howto} from "@d3/example-components"
import {Swatches} from "@d3/color-legend"
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.
