phd student, middle child
Published
Edited
Oct 14, 2018
1 star
{
const w = width/2,
margin = 4,
r = w/2;
const svg = d3.select(DOM.svg(w + 2 * margin, w + 2 * margin));
const g = svg.append("g").attr("transform", `translate(${margin}, ${margin})`);
g.append("clipPath").attr("id", "clip")
.append("rect")
.attr("width", r)
.attr("height", w);
g.append("circle")
.attr("cx", r)
.attr("cy", r)
.attr("r", r)
.attr("stroke", "#000")
.attr("stroke-width", margin);
g.append("circle")
.attr("cx", r)
.attr("cy", r)
.attr("r", r)
.attr("fill", "#fff")
.attr("clip-path", "url(#clip)");
g.append("circle")
.attr("cx", r)
.attr("cy", r * 0.5)
.attr("r", r * 0.5)
.attr("fill", "#fff");
g.append("circle")
.attr("cx", r)
.attr("cy", r * 0.5)
.attr("r", r * 0.15);
g.append("circle")
.attr("cx", r)
.attr("cy", r * 1.5)
.attr("r", r * 0.5);
g.append("circle")
.attr("cx", r)
.attr("cy", r * 1.5)
.attr("r", r * 0.15)
.attr("fill", "#fff");
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.
