viewof textTrue = Inputs.toggle({ label: "Draw Text", value: true })
function redraw(x, y) {
const svg = d3.select("#viz");
const dg = drawGrid().invertedColors((x + y) % 2);
svg.datum(scaleMatrix(numCells, [x, y], 100, 10)).call(dg);
}
redraw(2, 2, scaleMatrix)
scaleMatrix(5, [2, 2], 100, 10)
function drawGrid() {
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"]);
function me(selection) {
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");
sbdText
.selectAll("rect")
.data((d) => d)
.join()
.append("rect")
.attr("x", (d, i) => {
i * 100;
})
.attr("y", 0)
.attr("width", 100)
.attr("height", 100);
}
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);
}
me.invertedColors = function (value) {
if (!arguments.length) return invertedColors;
invertedColors = value;
return me;
};
me.cellWidth = function (value) {
return sScale.bandwidth();
};
return me;
}
sideLength = 150
numCells = 5
d3 = require("d3")
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.
