Published
Edited
Jan 27, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function getGrid() {
let size = 25;
let margin = 0;
let nx = 20;
let ny = 20;

const svg = d3.select(DOM.svg(nx * size, ny * size));
const el = svg.node();

const rectData = [];
for (let y = 0; y < 100; y++)
for (let x = 0; x < 100; x++) rectData.push({ x, y });

const grid = svg
.append('svg:image')
.attr('xlink:href', "https://picsum.photos/500");

svg
.append("g")
.selectAll("rect")
.data(rectData)
.join("rect")
.attr("x", d => d.x * size)
.attr("y", d => d.y * size)
.attr("fill", d => "#000")
.attr("opacity", d =>
Math.random() < learningMethods[learningEffectivness].Effectivness ? 0 : 1
)
.attr("width", size)
.attr("height", size);
return el;
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more