lastName = "roadtolarissa.com"
handle = "@1wheel"
count = numOfFrames*10
data = d3.range(count).map(d => [Math.random()*width, Math.random()*height])
// Your D3 code goes here.
// The function badgeCode gets called below to generate the previews.
function badgeCode(g, ctx, frameNumber) {
// g: a <g>, i.e. d3.select(... the node)
// ctx: a canvas context, useful for doing canvas drawing
// frameNumber: a number that represents the frame you're in, for psuedo-animation.
// width & height are available via the environment, as is D3
// Note: the <g> is drawn on top of the <canvas>
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, width, height);
data.forEach((d, i) => {
d.i = i
d.frameIndex = numOfFrames - Math.floor(i/numOfFrames)
})
var s = width*height/count/count
d3j.select(g.node()).appendMany('rect', data)
.translate(d => d)
.at({
width: s,
height: s,
opacity: d => d.frameIndex > frameNumber ? 1 : 0,
fill: d => d.frameIndex % 1000 ? '#f0f' : '#000',
stroke: d => d.frameIndex % 1000 ? '#000' : '#f0f',
})
}
import { overlayCode } from "@d3/d3-unconf-sponsor-logo"
frames = d3.range(1, numOfFrames + 1)
numOfFrames = 10
width = 1050
height = 1500
FileSaver = require('file-saver@2.0.2/dist/FileSaver.min.js').catch(() => window["saveAs"])
jszip = require("jszip@3/dist/jszip.js")
d3 = require("d3@5")
d3j = require("https://unpkg.com/d3-jetpack@2.0.15/build/d3v4+jetpack.js")
seedrandom = require("https://unpkg.com/seedrandom@3.0.1/seedrandom.min.js")
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.
