// 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 = '#34495e';
ctx.fillRect(0, 0, width, height);
// ctx.fillStyle = '#777';
// ctx.fillRect(0, height / 2, width, height / 2);
const sideLength = 3
const numberOfLines = 100
Array.from(Array(numberOfLines), (_, i) => {
const rotationLayer = g.append("g")
.attr("transform", `translate(-${width},${height * 0.13}) rotate(-6)`);
rotationLayer.append("rect")
.attr("width", width * 1.2)
.attr("height", sideLength)
.attr("x", i * sideLength * 1.1 + frameNumber * 20 + Math.sin(i * 0.5 + frameNumber) * 10)
.attr("y", i * sideLength * 6)
.attr("fill", "#22a6b3");
})
Array.from(Array(numberOfLines), (_, i) => {
const rotationLayer = g.append("g")
.attr("transform", `translate(-${width},${height * 0.13}) rotate(-6)`);
rotationLayer.append("rect")
.attr("width", width * 0.6)
.attr("height", sideLength)
.attr("x", width * 1.3 + i * sideLength * 1.1 - frameNumber * 20 + Math.sin(i * 0.5 + frameNumber) * 10)
.attr("y", 6 + i * sideLength * 6)
.attr("fill", "#30336b");
})
}
isTextLight = true
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")
html`<style type="text/css">
// @import url('https://rsms.me/inter/inter.css');
svg {
font-family: 'Helvetica', sans-serif;
}
</style>`
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.
