Published
Edited
Sep 3, 2019
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const svg = d3.select(DOM.svg(width, height));
const defs = svg.append("defs");
const artboard = svg.append("g");

const node = artboard
.selectAll(".node")
.data(nodes)
.join("g")
.attr("transform", d => `translate(${d.x}, ${d.y}) rotate(${d.r + 90})`);

node
.append("path")
.attr("fill", (d, i) => colorScale(i))
.attr("d", symbol)
// Apply the mask to the last item in the stack, the purple diamond
.filter((d, i, items) => items.length - 1 === i)
.attr("mask", "url(#mask)");

const mask = defs.append("mask").attr("id", "mask");

// Define the diamond shape as the visible area
mask
.append("path")
.attr("d", symbol)
.attr("fill", "white");

// Block out the purple overlap by using the red diamonds position for the mask.
mask
.append("path")
.attr("d", symbol)
.attr("fill", "black")
.attr("transform", () => {
// offset the mask relative to the purple diamonds position.
const a = nodes[0];
const b = nodes[nodes.length - 1];
const cx = a.x - b.x;
const cy = a.y - b.y;
const cr = a.r - b.r;
return `translate(${cy}, ${cx}) rotate(${cr})`;
});

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more