firstName = "Alex"
lastName = "Wein"
handle = "alexwein@vis.social"
// Your D3 code goes here.
// The function badgeCode gets called below to generate the previews.
function badgeCode(g, context, frameNumber) {
// g: a <g>, i.e. d3.select(... the node)
// context: a canvas context, useful for doing canvas drawing
// frameNumber: a number that represents the frame (1, 2, … 10) for psuedo-animation.
// width & height are available via the environment, as is d3
// Note: the <g> is drawn on top of the <canvas>
context.fillStyle = "#6e2aae";
context.fillRect(0, 0, width, height);
const n_rows = 22
const n_cols = 16
const row_space = height / (n_rows - 1)
const col_space = width / (n_cols - 1)
for (var r = 0; r < n_rows; r ++) {
for (var c = 0; c < n_cols; c++) {
context.fillStyle = "#2b3d4f";
context.beginPath();
context.arc(c * col_space - 5 + (frameNumber * col_space)/9, r * row_space + 11 + (frameNumber * col_space)/9, 23, 0, 2 * Math.PI)
context.fill();
context.fillStyle = dotfill(r,c);
context.beginPath();
context.arc(c * col_space, r * row_space, 26, 0, 2 * Math.PI)
context.fill();
}
}
}
isTextLight = true
import {preview, animation, download, width, height, d3}
with {firstName, lastName, handle, isTextLight, badgeCode}
from "b93171820ba3f268"
function dotfill(r,c) {return (r + c) % 2 === 0 ? '#3d84e3' : '#3224e3'}
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.
