Developer, artist, writer, and mother. Core committer to @pydanny 💘My notebooks are for my own personal learning purposes. If you see anything I could be doing better, suggestions would be a huge help.
Published
Edited
Apr 26, 2022
svg`<svg width=${dimensions.displayWidth} height=${dimensions.displayHeight}>
${dotGrid1(10)}</svg>`
function dotGrid1(max) {
let lst = [];
for (let i = 0; i < max; i++) {
for (let j = 0; j < max; j++) {
lst.push(
svg.fragment`<circle cx=${i * 30 + 10} cy=${
j * 30 + 10
} r=10 fill="${d3.interpolateViridis(i / max)}" />`
);
}
}
return lst;
}
svg`<svg width=${dimensions.displayWidth} height=${dimensions.displayHeight}>
${dotGrid2(23, 17)}</svg>`
function dotGrid2(xMax, yMax) {
let lst = [];
for (let i = 0; i < xMax; i++) {
for (let j = 0; j < yMax; j++) {
let colr = d3.interpolateViridis(i / xMax);
lst.push(
svg.fragment`<circle cx=${i * 30 + r} cy=${
j * 30 + r
} r=${r} fill="${colr}" />`
);
}
}
return lst;
}
svg`<svg width=${dimensions.displayWidth} height=${dimensions.displayHeight}>
${dotGrid3(22, 16)}</svg>`
function dotGrid3(xMax, yMax) {
let lst = [];
for (let i = 0; i < xMax; i++) {
for (let j = 0; j < yMax; j++) {
let colr = d3.color(d3.interpolateViridis(i / xMax));
colr.opacity = 0.7;
lst.push(
svg.fragment`<circle cx=${i * 30 + r} cy=${
j * 30 + r
} r=${r} fill="${colr}" />`
);
}
}
return lst;
}
viewof dimensions = Inputs.radio(dimensionOptions, {
label: "Printing Dimensions (in.)",
format: (x) => x.name,
value: dimensionOptions[5]
})
scheme = [...Array(10).keys()].map((x) => d3.interpolateViridis(x / 10))
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.
