viewof version = Inputs.range([1, 10], {value: 10, step: 1, label: "Version"})
version
viewof sunburst = {
const root = partition(data);
const svg = d3.create("svg");
const g = svg.append("g")
.attr("transform", `translate(${width / 2},${width / 2})`);
// Make this into a view, so that the currently hovered sequence is available to the breadcrumb
const element = svg.node();
element.value = { sequence: [], percentage: 0.0 };
const tooltip = d3tip()
.style('border', 'solid 2px black')
.style('background-color', 'white')
.style('border-radius', '10px')
.style("padding", "5px")
.style('float', 'left')
.style('font-family', 'monospace')
.html((event, d) => `
<div style='float: left'>
Name: ${d.data.name} <br/>
Value: ${d.value}
</div>`);
svg.call(tooltip);
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 indicators begin with this category");
svg
.attr("viewBox", `${-width} ${-width} ${width} ${width}`)
.style("max-width", `${width}px`)
.style("font", "12px sans-serif");
const path = svg
.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 => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("d", arc);
path.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
svg
.append("g")
.attr("fill", "none")
.attr("pointer-events", "all")
.on('mouseout', tooltip.hide)
.on("mouseleave", () => {
path.attr("fill-opacity", 0.65);
label.style("visibility", "hidden");
// Update the value of this view
element.value = { sequence: [], percentage: 0.0 };
element.dispatchEvent(new CustomEvent("input"));
})
.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('mouseover', tooltip.show)
.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);
// Center label
label
.style("visibility", null)
.select(".percentage")
.text(percentage + "%");
// Update the value of this view with the currently hovered sequence and percentage
element.value = { sequence, percentage };
element.dispatchEvent(new CustomEvent("input"));
});
return element;
}
d3tip = require('d3-tip')
sample = d3.csvParseRows(await FileAttachment("pie_new@4.csv").text())
root = partition(data).descendants()
data = buildHierarchy(sample)
// partition = data =>
// d3.partition().size([2 * Math.PI, radius * radius ])(
// d3
// .hierarchy(data)
// .sum(d => d.value)
// .sort((a, b) => b.value - a.value)
// )
partition = data => {
const root = d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value);
return d3.partition()
.size([2 * Math.PI, root.height + 1])
(root);
}
color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
format = d3.format(",d")
width = 500
radius = width / 6
// // Draw circle
// 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) )
// // change the radius based on value
// // .outerRadius(d => Math.sqrt(d.y1) -1 + d.value*10)
// Draw circle
arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius * 1.5)
.innerRadius(d => d.y0 * radius)
.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))
// on_mouse cover range
mousearc = d3
.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.innerRadius(d => d.y0 * radius )
.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))
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][version];
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 = 150
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(" ");
}
d3 = require("d3@6")
pie_new@4.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
