Public
Edited
Mar 22, 2024
1 star
// {
// let offsetCharacters = offsetChars;
// const cellSize = Math.ceil(width / (columns.length - 1));
// const svg = d3
// .create("svg")
// .attr("width", (columns.length - 1) * cellSize)
// .attr("height", (rows.length - 1) * cellSize);
// const segments = [];
// const g1 = svg.append("g");
// const g2 = svg.append("g");
// d3.range(rows.length).map((l, i) => {
// d3.range(columns.length).map((dash, j) => {
// const offset = offsetCharacters.includes(rows[l].toLowerCase()) ? 1 : 0;
// if (i == 0 || i == rows.length - 1 || (j + offset) % 2 == 0) {
// segments.push([
// [j, i],
// [j + 1, i]
// ]);
// }
// });
// });
// d3.range(columns.length).map((l, i) => {
// d3.range(rows.length).map((dash, j) => {
// const offset = offsetCharacters.includes(columns[l].toLowerCase())
// ? 1
// : 0;
// if (i == 0 || i == columns.length - 1 || (j + offset) % 2 == 0) {
// segments.push([
// [i, j],
// [i, j + 1]
// ]);
// }
// });
// });
// let startColor = 0;
// d3.range(rows.length).map((y) => {
// if (
// y !== 0 &&
// segments.find((seg) => JSON.stringify(seg) == `[[${0},${y}],[${1},${y}]]`)
// ) {
// startColor = startColor == 0 ? 1 : 0;
// }
// let color = startColor;
// d3.range(columns.length).map((x) => {
// if (
// x !== columns.length - 1 &&
// segments.find(
// (seg) => JSON.stringify(seg) == `[[${x},${y}],[${x},${y + 1}]]`
// )
// ) {
// color = color == 0 ? 1 : 0;
// }
// if (color) {
// g1.append("rect")
// .attr("width", cellSize)
// .attr("height", cellSize)
// .attr("x", x * cellSize)
// .attr("y", y * cellSize)
// .attr("fill", "red");
// } else {
// g2.append("rect")
// .attr("width", cellSize)
// .attr("height", cellSize)
// .attr("x", x * cellSize)
// .attr("y", y * cellSize)
// .attr("fill", "blue");
// }
// // ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
// });
// });
// 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.
