Senior Art Editor at Nature News in London.
Public
Edited
Jan 18, 2024
chart = {
const svg = d3
.create("svg")
.attr("width", 800)
.attr("height", 500)
.attr("viewBox", [0, 0, 800, 500])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.style("display", "block");
const groupAll = svg.append("g").attr("transform", "translate(50, 50)");
const groupClosed = svg.append("g").attr("transform", "translate(50, 50)");
groupAll
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => d.x * 50)
.attr("cy", (d) => d.y * 50)
.attr("stroke-width", 8)
.attr("stroke", (d) => colorScale(d.status))
.attr("fill", "#ffffff")
.attr("r", 18);
groupClosed
.selectAll("circle")
.data(data.filter((d) => d.investigation === "closed"))
.join("circle")
.attr("cx", (d) => d.x * 50)
.attr("cy", (d) => d.y * 50)
.attr("fill", (d) => colorScale(d.status))
.attr("r", 10);
return svg.node();
}
cellsPerRow = 12
data = {
const data = await FileAttachment("data@5.csv").csv({ typed: true });
const dataAsLongArray = data.reduce((accumulator, currentValue) => {
const { status, investigation, count } = currentValue;
const points = Array.from({ length: count }).map((_) => ({
status,
investigation
}));
return [...accumulator, ...points];
}, []);
const dataAsPoints = dataAsLongArray.map((elem, index, array) => {
const rowIndex = Math.floor(index / cellsPerRow);
const x = index % cellsPerRow;
const y = rowIndex;
return { ...elem, x, y };
});
return dataAsPoints;
}
statusValues = [...new Set(data.map((d) => d.status))]
colorScale = d3.scaleOrdinal().domain(statusValues).range(colors)
colors = ["#b62f11", "#006eb7", "#eb5b25", "#36a9e1", "#f7ab59", "#8b95a1"]
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.
