md`# Random walks p3`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 800, 800]);
let x=400,y=400,length=10,points=[JSON.stringify([400,400])];
svg.append("circle").attr("cx", x).attr("cy", y).attr("r", length * 0.75).attr("stroke", "blue").attr("fill", "none");
for (var i=0; i < 50; i++) {
let vord = Math.random() < 0.5,
dist = length * (Math.random() < 0.5 ? 1 : -1),
xp = vord ? x + dist : x,
yp = vord ? y : y + dist;
if (points.indexOf(JSON.stringify([xp,yp])) != -1) {
break
} else {
points.push(JSON.stringify([xp,yp]));
}
svg.append("line").attr("x1", x).attr("y1", y).attr("x2", xp).attr("y2", yp).attr("stroke", "black");
x = xp;
y = yp;
}
svg.append("circle").attr("cx", x).attr("cy", y).attr("r", length * 0.75).attr("stroke", "red").attr("fill", "none");
return svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
d3 = require("d3@6")
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.
