chart = {
// const width = 928; // uncomment for responsive width
const height = 710;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
var squareSize = 6;
var padding = 2;
// Create rows
const puzzles = svg
.selectAll(".row")
.data(data)
.enter()
.append("g")
.attr("class", "row")
.attr("transform", (d, i) => `translate(0, ${i * (squareSize + padding)})`);
// Create squares within each row
const squares = puzzles
.selectAll(".square")
.data((d) => Object.values(d))
.enter()
// .filter(function (d) {
// console.log(d);
// d !== null && d !== "";
// })
.append("rect")
.attr("class", (d) => `square ${d}`) // (d) => `square ${d}`)
.attr("x", (d, i) => i * (squareSize + padding))
.attr("width", squareSize)
.attr("height", squareSize)
.attr("cell-index", (d) => d)
.attr("grid-section", (d) => getSudokuSection(d))
.attr("fill", (d) => {
console.log(d);
return timesScale(d);
}) // "#d3d3d3")
.attr("display", (d) => (d === null ? "none" : "block"));
// // hover events
// .on("mousemove", function (event, d) {
// var activeCellIndex = d3.select(this).attr("cell-index");
// var activeGridSection = getSudokuSection(activeCellIndex);
// // highlight other cells from active section
// d3.selectAll("rect[grid-section='" + `${activeGridSection}` + "'").attr(
// "fill",
// "#40C6F9"
// );
// // highlight active cell
// d3.selectAll("rect[cell-index='" + `${activeCellIndex}` + "'").attr(
// "fill",
// "#08759E"
// );
// })
// .on("mouseout", function (event, d) {
// var activeCellIndex = d3.select(this).attr("cell-index");
// var activeGridSection = getSudokuSection(activeCellIndex);
// // highlight active cell
// d3.selectAll("rect[cell-index='" + `${activeCellIndex}` + "'").attr(
// "fill",
// "#d3d3d3"
// );
// // un-highlight other cells from active section
// d3.selectAll("rect[grid-section='" + `${activeGridSection}` + "'").attr(
// "fill",
// "#d3d3d3"
// );
// });
return svg.node();
}
timesScale = d3
.scaleQuantize()
.domain([0, 15]) // d3.extent(data.map(d => Object.values(d)).flat(1)))
.range(["#fef0d9", "#fdd49e", "#fdbb84", "#fc8d59", "#e34a33", "#b30000"])
timesScale.quantiles()
function getSudokuSection(cellIndex) {
// Check if the index is within the valid range (0 to 80)
if (cellIndex < 0 || cellIndex > 80) {
throw new Error("Invalid index. Cell index should be between 0 and 80.");
}
// Calculate the row and column indices from the cell index
const rowIndex = Math.floor(cellIndex / 9);
const colIndex = cellIndex % 9;
// Determine the section based on the row and column indices
const sectionRow = Math.floor(rowIndex / 3);
const sectionCol = Math.floor(colIndex / 3);
// Calculate the section number
const sectionNumber = sectionRow * 3 + sectionCol;
// Return the section number (zero-indexed)
return sectionNumber;
}
d3 = require("d3@6")
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.
