sunburst = {
const root = partition2(flare);
const svg = d3.create("svg");
const label = svg
.append("text")
.attr("text-anchor", "middle")
.attr("fill", "#888")
.style("visibility", "hidden");
label
.append("tspan")
.attr("class", "percentage")
.attr("x", 0)
.attr("y", 0)
.attr("dy", "-0.1em")
.attr("font-size", "3em")
.text("");
label
.append("tspan")
.attr("x", 0)
.attr("y", 0)
.attr("dy", "1.5em")
.text("of visits begin with this sequence");
svg
.attr("viewBox", `${-radius} ${-(radius + breadcrumbHeight * 2)} ${width} ${width + breadcrumbHeight * 2}`)
.style("max-width", `${width}px`)
.style("font", "12px sans-serif");
const gSunburst = svg.append('g');
const gBreadcrumbs = svg.append('g')
.attr('transform', `translate(${-radius}, ${-(radius + breadcrumbHeight * 1.5)})`);
const path = gSunburst
.append("g")
.selectAll("path")
.data(
root.descendants().filter(d => {
// Don't draw the root node, and for efficiency, filter out nodes that would be too small to see
return d.depth && d.x1 - d.x0 > 0.001;
})
)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc);
gSunburst
.append("g")
.attr("fill", "none")
.attr("pointer-events", "all")
.on("mouseleave", () => {
path.attr("fill-opacity", 1);
label.style("visibility", "hidden");
drawBreadcrumbs([]);
})
.selectAll("path")
.data(
root.descendants().filter(d => {
// Don't draw the root node, and for efficiency, filter out nodes that would be too small to see
return d.depth && d.x1 - d.x0 > 0.001;
})
)
.join("path")
.attr("d", mousearc)
.on("mouseenter", (event, d) => {
// Get the ancestors of the current segment, minus the root
const sequence = d
.ancestors()
.reverse()
.slice(1);
// Highlight the ancestors
path.attr("fill-opacity", node =>
sequence.indexOf(node) >= 0 ? 1.0 : 0.3
);
const percentage = ((100 * d.value) / root.value).toPrecision(3);
label
.style("visibility", null)
.select(".percentage")
.text(percentage + "%");
drawBreadcrumbs(sequence);
});
function drawBreadcrumbs(path) {
path.reverse();
gBreadcrumbs.selectAll('polygon')
.data(path)
.join('polygon')
.attr('transform',
(d, i) => `translate(${(path.length - i - 1) * breadcrumbWidth}, 0)`)
.attr('points', (d, i, p) => breadcrumbPoints(d, i))
.attr('fill', d => color(d.data.name))
.attr('stroke', 'white');
d3.selectAll(".breadcrumb-labels").remove();
const breadcrumbLabels = gBreadcrumbs
.selectAll("text")
.data(path)
.join("text")
.attr(
"transform",
(d, i) => `translate(${(path.length - i - 1) * breadcrumbWidth}, 0)`
)
.attr("text-anchor", "middle")
.attr("pointer-events", "none")
.style("user-select", "none")
.attr("fill", "white");
breadcrumbLabels
.append("tspan")
.attr("class", "breadcrumb-labels")
.attr("x", breadcrumbWidth / 2)
.attr("y", breadcrumbHeight / 2)
.attr("dy", 2)
.text(d => d.data.name);
}
return svg.node();
}
csv = d3.csvParseRows(await FileAttachment("visit-sequences@1.csv").text())
data = buildHierarchy(csv)
flareNew = {
const flare2 = flare;
flare.name = 'root';
return flare
}
import {flare} from "@d3/sunburst"
partition = data =>
d3.partition().size([2 * Math.PI, radius * radius])(
d3
.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
)
partition2 = data =>
d3.partition().size([2 * Math.PI, radius * radius])(
d3
.hierarchy(data)
.sum(d => d.size)
.sort((a, b) => b.size - a.size)
)
partition2(flare)
partition(data)
partition(flare)
color = d3
.scaleOrdinal()
.domain(["home", "product", "search", "account", "other", "end"])
.range(["#5d85cf", "#7c6561", "#da7847", "#6fb971", "#9e70cf", "#bbbbbb"])
width = 640
radius = width / 2
arc = d3
.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(1 / radius)
.padRadius(radius)
.innerRadius(d => Math.sqrt(d.y0))
.outerRadius(d => Math.sqrt(d.y1) - 1)
mousearc = d3
.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.innerRadius(d => Math.sqrt(d.y0))
.outerRadius(radius)
function buildHierarchy(csv) {
// Helper function that transforms the given CSV into a hierarchical format.
const root = { name: "root", children: [] };
for (let i = 0; i < csv.length; i++) {
const sequence = csv[i][0];
const size = +csv[i][1];
if (isNaN(size)) {
// e.g. if this is a header row
continue;
}
const parts = sequence.split("-");
let currentNode = root;
for (let j = 0; j < parts.length; j++) {
const children = currentNode["children"];
const nodeName = parts[j];
let childNode = null;
if (j + 1 < parts.length) {
// Not yet at the end of the sequence; move down the tree.
let foundChild = false;
for (let k = 0; k < children.length; k++) {
if (children[k]["name"] == nodeName) {
childNode = children[k];
foundChild = true;
break;
}
}
// If we don't already have a child node for this branch, create it.
if (!foundChild) {
childNode = { name: nodeName, children: [] };
children.push(childNode);
}
currentNode = childNode;
} else {
// Reached the end of the sequence; create a leaf node.
childNode = { name: nodeName, value: size };
children.push(childNode);
}
}
}
return root;
}
breadcrumbWidth = 75
breadcrumbHeight = 30
// Generate a string that describes the points of a breadcrumb SVG polygon.
function breadcrumbPoints(d, i) {
const tipWidth = 10;
const points = [];
points.push("0,0");
points.push(`${breadcrumbWidth},0`);
points.push(`${breadcrumbWidth + tipWidth},${breadcrumbHeight / 2}`);
points.push(`${breadcrumbWidth},${breadcrumbHeight}`);
points.push(`0,${breadcrumbHeight}`);
if (i > 0) {
// Leftmost breadcrumb; don't include 6th vertex.
points.push(`${tipWidth},${breadcrumbHeight / 2}`);
}
return points.join(" ");
}
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.
