numCells = 5
sideLength = 150
chart = {
const width = 928; // uncomment for responsive width
const height = 200;
let invertedColors = false;
let showGrid = false;
let sideWidth = sideLength;
let textToggle = true;
const sScale = d3
.scaleBand()
.range([0, sideWidth])
.domain(d3.range(5))
// .paddingInner(0.05)
.round(true);
const cScale = d3.scaleOrdinal().domain([0, 1]).range(["#273580", "#e83947"]);
const selection = d3.select("#viz").append("svg");
if (invertedColors) {
cScale.domain([1, 0]);
} else {
cScale.domain([0, 1]);
}
let maxRange = d3.max(selection.datum(), (d) => d.pos[0]);
sScale.domain(d3.range(maxRange + 1));
// debugging grid
if (showGrid) {
selection
.selectAll("line.vertical")
.data(sScale.domain())
.join("line")
.attr("class", "vertical")
.attr("x1", (d) => sScale(d))
.attr("x2", (d) => sScale(d))
.attr("y2", sideWidth)
.attr("stroke", "black")
.attr("stroke-width", 1);
selection
.selectAll("line.horizontal")
.data(sScale.domain())
.join("line")
.attr("class", "horizontal")
.attr("y1", (d) => sScale(d))
.attr("y2", (d) => sScale(d))
.attr("x2", sideWidth)
.attr("stroke", "black")
.attr("stroke-width", 1);
}
if (textToggle) {
let sbdText = d3
.select("#viz")
.append("text")
.attr("x", sideLength + sideLength / numCells)
.attr("y", (sideLength / numCells) * 3)
.attr("font-size", `${(sideLength / numCells) * 3 * 1.5}px`)
.attr("font-family", "Rajdhani")
.attr("font-weight", 300)
.attr("fill", "#E83947")
.text("SO")
.append("tspan")
.text("BIG")
.attr("font-weight", 500)
.attr("fill", "#273580")
.append("tspan")
.text("DATA")
.attr("font-weight", 700)
.attr("fill", "#E83947");
}
const t = selection.transition().duration(750);
const gs = selection
.selectAll("g")
.data(selection.datum())
.join(
(enter) =>
enter
.append("g")
.attr(
"transform",
(d) => `translate(${sScale(d.pos[0]) + sScale.bandwidth() / 2},${
sScale(d.pos[1]) + sScale.bandwidth() / 2
})
scale(${(d.val - 10) / 100})rotate(0)`
)
.attr("opacity", (d) => d.val / 100)
.attr("fill", (d) => cScale((d.pos[0] + d.pos[1]) % 2)),
(update) =>
update.call((update) =>
update
.transition(t)
.attr(
"transform",
(d) => `translate(${sScale(d.pos[0]) + sScale.bandwidth() / 2},${
sScale(d.pos[1]) + sScale.bandwidth() / 2
})
scale(${(d.val - 10) / 100})rotate(0)`
)
.attr("opacity", (d) => d.val / 100)
.attr("fill", (d) => cScale((d.pos[0] + d.pos[1]) % 2))
)
);
gs.selectAll("rect")
.data((d) => [d])
.join("rect")
.attr("width", sScale.bandwidth())
.attr("height", sScale.bandwidth())
.attr("x", -sScale.bandwidth() / 2)
.attr("y", -sScale.bandwidth() / 2);
}
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.
