Information designer, data visualization engineer📈, 🇺🇦🇺🇦🇺🇦
rbmk = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "12px sans-serif");
const rowsGroup = svg
.append("g")
.attr("transform", (d, i) => `translate(100, 20)`);
const rows = rowsGroup
.selectAll("g")
.data(csv)
.join("g")
.attr("transform", (d, i) => `translate(0, ${i * boxSize})`);
const boxGroup = rows
.selectAll("g")
.data((d) => {
let res = [];
Object.entries(d).forEach((el, i) => {
if (i !== 0 && el[1] != "") {
res.push({
col: i,
value: el[1]
});
}
});
return res;
})
.join("g")
.attr("transform", (d, i) => `translate(${d.col * boxSize}, 0)`);
boxGroup
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", boxSize)
.attr("height", boxSize)
.style("stroke", "#333")
.style("stroke-width", "0.3")
.style("fill", (d) => {
if (d.value === "*") {
return colors.o;
} else if (d.value[0] === "y") {
return colors.y;
} else if (d.value[0] === "r") {
return colors.r;
} else if (d.value[0] === "g") {
return colors.g;
} else if (d.value[0] === "b") {
return colors.b;
}
});
boxGroup
.append("circle")
.attr("r", boxSize / 10)
.attr("class", (d) => (d.value != "*" ? "rem" : ""))
.attr("cx", boxSize / 2)
.attr("cy", boxSize / 2)
.attr("fill", "#333");
boxGroup
.append("text")
.attr("class", (d) => (d.value === "*" ? "rem" : ""))
.attr("x", boxSize / 2)
.attr("y", boxSize - boxSize / 3)
.attr("text-anchor", "middle")
.style("font-size", boxSize / 2 + "px")
.text((d) => d.value.slice(1));
const legendGroup = svg.append("g").attr("transform", "translate(20, 20)");
const legendItem = legendGroup
.selectAll("g")
.data(legend)
.join("g")
.attr("transform", (d, i) => `translate(20, ${i * 22})`);
legendItem
.append("text")
.style("font-size", "14px")
.text((d) => d.type);
legendItem
.append("rect")
.attr("x", -boxSize - 4)
.attr("y", -12)
.attr("width", boxSize)
.attr("height", boxSize)
.style("fill", (d) => colors[d.id])
.style("stroke", "#333")
.style("stroke-width", "0.3");
legendItem
.append("circle")
.attr("r", boxSize / 10)
.attr("class", (d) => (d.id != "o" ? "rem" : ""))
.attr("cx", -boxSize - 4 + boxSize / 2)
.attr("cy", -3)
.attr("fill", "#333");
svg.selectAll(".rem").remove();
return svg.node();
}
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.
