csv = d3.csvParseRows(await FileAttachment("visit-sequences-1@4.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)
)
color = d3
.scaleOrdinal()
.domain(["Linha de Água 2", "Linha de Água 1","Utilidades", "Caldeira", "Caldeira 1", "Caldeira 2", "Caldeira 3", "Refrigeração", "Chiller 1", "Chiller 2", "Chiller 3", "Sistema de Ar Comprimido", "Sistema CO2", "Geral", "Processo", "Xaroparia", "Produto", "CIP", "Envase", "Linha 1", "Linha 2", "Linha 3", "Pasteurizador", "Lavadora", "Serviços gerias", "Escritórios", "Banheiros"])
.range(["#9e70cf", "#9e70cf", "#5d85cf", "#7c6561", "#da7847", "#6fb971", "#9e70cf", "#bbbbbb", "#5d85cf", "#7c6561", "#da7847", "#6fb971", "#9e70cf", "#bbbbbb", "#5d85cf", "#7c6561", "#da7847", "#6fb971", "#9e70cf", "#bbbbbb", "#5d85cf", "#7c6561", "#da7847", "#6fb971", "#9e70cf"])
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 = 100
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")
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.
