Public
Edited
May 30, 2023
1 fork
unit = "4GTD"
datum = "2022-02-24"
data
Type Table, then Shift-Enter. Ctrl-space for more options.
data = {
let _d = (await FileAttachment("units-per-week.csv").csv({ typed: true }))
.map((d) => ({ ...d, parent: "All" }))
.filter((d) => d.week_start.toISOString().slice(0, 10) == datum);
_d.push({
unit: "All",
parent: null
});
return _d;
}
{
root.sum(function (d) {
return +d.strength_before;
});
d3.treemap().size([width, height]).padding(0)(root);
svg.selectAll("rect").remove();
svg
.selectAll("rect")
.data(root.leaves())
.enter()
.append("rect")
.attr("x", function (d) {
return d.x0;
})
.attr("y", function (d) {
return d.y0;
})
.attr("width", function (d) {
return d.x1 - d.x0;
})
.attr("height", function (d) {
return d.y1 - d.y0;
})
.style("fill", (d) => {
let h = (Math.random() - 0.5) * 80;
let s = (Math.random() - 0.5) * 30;
let l = (Math.random() - 0.5) * 30;
return `hsl(${200 + h}, ${20 + s}%, ${50 + l}%)`;
})
.style("stroke", (d) => {
if (d.id == unit) {
return "#ffffff";
} else {
return false;
}
})
.on("mouseover", function (el, d) {
console.log(d.id);
});
}
svg = d3
.select("#datavis")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
root = {
let root = d3
.stratify()
.id(function (d) {
return d.unit;
})
.parentId(function (d) {
return d.parent;
})(data);
return root;
}
margin = ({ top: 10, right: 10, bottom: 10, left: 10 })
width = 320
height = 320
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
