Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
May 8, 2023
chart = {
const svg = d3
.create("svg")
.attr("title", "Reacts Optional Parameters")
.attr("viewBox", [0, 0, width, width])
.style("font-family", "sans-serif")
.attr("text-anchor", "middle");
const texture = textures
.lines()
.lighter()
.background(color(0))
.stroke("hsl(0, 10%, 65%)");
svg.call(texture);
const t = svg.append("g").attr("transform", (d) => `translate(80,80)`);
const node = t
.selectAll("g")
.data(pack)
.join("g")
.attr("transform", (d) => `translate(${d.x + 1},${d.y + 1})`);
node
.append("circle")
.attr("r", (d) => d.r)
.attr("fill", (d) =>
d.data.type === "alternative parameter" ? texture.url() : color(d.height)
)
.attr("stroke", (d) =>
d.children ? "hsl(0deg 0% 20%)" : "hsl(0deg 0% 90% / 20%)"
);
const leaf = node.filter((d) => !d.children);
leaf.select("circle").attr("id", (d) => (d.leafUid = DOM.uid("leaf")).id);
leaf
.append("text")
.selectAll("tspan")
.data((d) => d.data.name.split(/\s+/g)) // Split words into their own tspans and lines
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.attr("fill", "#40081C")
.text((d) => d)
.clone(true)
.lower()
.attr("aria-hidden", "true")
.attr("fill", "none")
.attr("stroke", "#FAEBF0")
.attr("stroke-width", 2)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
node.append("title").text(
(d) =>
`${d
.ancestors()
.map((d) => d.data.name)
.reverse()
.slice(1)
.join(" / ")}${
d.data.type === "alternative parameter" ? " (alternative)" : ""
}`
);
const groupLabel = t
.append("g")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants().filter((d) => d.children))
.join("text")
.attr("font-size", (d) => `${1.25 / (d.depth || 1) + 0.8}em`)
.text((d) => d.data.name);
groupLabel
.attr("transform", (d) => `translate(${d.x}, ${d.y - d.r})`)
.attr("dy", "-0.25em")
.attr("fill", "#fff")
.clone(true)
.lower()
.attr("aria-hidden", "true")
.attr("fill", "none")
.attr("stroke", "#6A1131")
.attr("stroke-width", 2)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
return svg.node();
}
color = d3
.scaleLinear()
.domain([0, root.height])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl)
pack = d3
.pack()
.size([width - 2 - 80, width - 2 - 80])
.padding(24)(root)
root = d3.hierarchy(optionalParameters).count()
texturesImport = import("textures")
textures = texturesImport.default
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.
