unit = "4GTD"
datum = "2022-02-24"
{
var simulation = d3
.forceSimulation(data)
.force("charge", d3.forceManyBody().strength(800))
.force("center", d3.forceCenter(width / 2, height / 2))
.force(
"collision",
d3.forceCollide().radius(function (d) {
return d.strength_before / 76;
})
)
.on("tick", ticked);
}
data
Type Table, then Shift-Enter. Ctrl-space for more options.
data = {
let _d = (
await FileAttachment("units-per-week.csv").csv({ typed: true })
).filter((d) => d.week_start.toISOString().slice(0, 10) == datum);
return _d;
}
ticked = function () {
svg.selectAll("rect").remove();
svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("width", (d) => d.strength_before / 50)
.attr("height", (d) => d.strength_before / 50)
.attr("x", (d) => d.x - d.strength_before / 50 / 2)
.attr("y", (d) => d.y - d.strength_before / 50 / 2)
.style("fill", (d) => {
let h = (Math.random() - 0.5) * 80;
let s = (Math.random() - 0.7) * 30;
let l = (Math.random() - 0.5) * 30;
return `hsl(${200 + h}, ${40 + s}%, ${60 + l}%)`;
});
}
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 + ")")
margin = ({ top: 10, right: 10, bottom: 10, left: 10 })
width = 320
height = 500
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.
