// 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>
const size = 10;
var colors = ["#26294a", "#01545a", "#017351", "#03c383", "#aad962",
"#fbbf45", "#ef6a32", "#ed0345", "#a12a5e", "#710162"]
d3.range(0, width/size).forEach(function(x) {
d3.range(0, height/size).forEach(function(y) {
ctx.fillStyle = colors[Math.floor(colors.length*Math.random())];
ctx.fillRect(x*size, y*size, size, size)
});
})
ctx.fillStyle = "rgba(0,0,0,0.6)";
ctx.fillRect(300, 40, width-600, 400);
ctx.fillStyle = "rgba(0,0,0,0.6)";
ctx.fillRect(0, 40, width, 400);
}
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")
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.
