import {log} from '@sorig/console-log-without-leaving-your-notebook'
log;
logTail = n => log.slice(-n)
logTail(5)
csv = d3.csvParseRows(await FileAttachment("Boot Room Info - new-boot-room.csv").text())
data = buildHierarchy(csv)
partition = data =>
d3.partition().size([2 * Math.PI, radius * radius])(
d3
.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
)
class Colors {
constructor(height, width) {
this.bgColors = ["#121f38", "#035388", "#0b69a3", "#127FBF", "#1992D4", "#2BB0ED", "#40C3F7", "#5ED0FA", "#808EA1", "#81DEFD", "#B3ECFF", "#E3F8FF"];
this.textColors = ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"];
this.currentIndex = 0;
this.currentParent = 1;
}
getColor(currentParent){
if(currentParent !== this.currentParent) {
this.currentIndex = 0
}
const color = this.bgColors.at(this.currentIndex % this.bgColors.length)
this.currentIndex++
this.currentParent = currentParent;
return color
}
getTextColor() {
const color = this.textColors.at(this.currentIndex % this.textColors.length)
this.currentIndex++
return color
}
}
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 = +Math.round(csv[i][1] * 100);
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*2},0`);
points.push(`${breadcrumbWidth*2 + tipWidth},${breadcrumbHeight / 2}`);
points.push(`${breadcrumbWidth*2},${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")
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.
