Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Jan 8, 2023
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif")
.attr("text-anchor", "middle")
.style("overflow", "visible");
const shadow = DOM.uid("shadow");
svg
.append("filter")
.attr("id", shadow.id)
.append("feDropShadow")
.attr("flood-opacity", 0.1)
.attr("dx", 1)
.attr("dy", 1);
const node = svg
.selectAll("g")
.data(d3.group(root.descendants(), (d) => d.height))
.join("g")
.attr("filter", shadow)
.selectAll("g")
.data((d) => d[1])
.join("g")
.attr("transform", (d) => `translate(${d.x + 1},${d.y + 1})`);
node
.append("circle")
.attr("r", (d) => d.r)
.attr("stroke", (d) =>
d.data.group ? "ghostwhite" : d.children ? "#bbb" : "none"
)
.attr("fill", (d) =>
d.children ? "none" : d.data.link ? "powderblue" : "#ddd"
);
const groupNode = node.filter((d) => d.children);
console.log({ groupNode });
// groupNode.select("circle")
// .append("text")
// .selectAll("tspan")
// .data(d => d)
// .join("tspan")
// .attr("x", 0)
// .attr("y", -20)
// .text(d => {console.log("has children", d); return d.data.name});
const leaf = node.filter((d) => !d.children);
console.log({ leaf });
leaf.select("circle").attr("id", (d) => (d.leafUid = DOM.uid("leaf")).id);
leaf
.append("clipPath")
.attr("id", (d) => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", (d) => d.leafUid.href);
leaf
.append("text")
.attr("clip-path", (d) => d.clipUid)
.selectAll("tspan")
.data((d) => d)
.join("tspan")
.attr("x", 0)
.attr("y", 0) //(d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.text((d) => d.data.name);
node.append("title").text(
(d) => `${d.data.name}
${d.data.description}`
);
return svg.node();
}
pack = (data) => d3.pack()
.size([width - 3, height - 2])
.padding(10)
(d3.hierarchy(data).count())
root = pack(data);
height = width
width = 932
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.
