Public
Edited
Sep 7, 2023
avatar = {
let s = 1.2;
let size = 200;
let x_scale = d3.scaleLinear().domain([-s, s]).range([0, size]);
let y_scale = d3.scaleLinear().domain([-s, s]).range([size, 0]);
let svg = d3.create("svg").attr("width", size).attr("height", size);
let n = 5;
let pts = d3
.range(n)
.map((i) => [
Math.cos((2 * Math.PI * i) / n),
Math.sin((2 * Math.PI * i) / n)
]);
let links = d3
.range(n)
.map((i) =>
d3.range(i + 1, n).map((j) => ({ source: pts[i], target: pts[j] }))
)
.flat();
let edges = svg.append("g");
edges
.selectAll("line")
.data(links)
.join("line")
.attr("x1", (link) => x_scale(link.source[0]))
.attr("x2", (link) => x_scale(link.target[0]))
.attr("y1", (link) => y_scale(link.source[1]))
.attr("y2", (link) => y_scale(link.target[1]))
.attr("stroke", "black");
let nodes = svg.append("g");
nodes
.selectAll("circle")
.data(pts)
.join("circle")
.attr("cx", (pt) => x_scale(pt[0]))
.attr("cy", (pt) => y_scale(pt[1]))
.attr("r", 11)
.attr("fill", (pt, i) => d3.schemeCategory10[i])
.attr("stroke", "white")
.attr("stroke-width", 3);
return svg.node();
}
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.
