Published
Edited
Jul 15, 2020
31 forks
5 stars
firstName = "First"
lastName = "Last"
handle = "handle"
// 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 = "#34495e";
context.fillRect(0, 0, width, height);
const sideLength = 3;
const numberOfLines = 100;
const line = g.selectAll("g")
.data(d3.range(numberOfLines))
.join("g")
.attr("transform", `translate(-${width},${height * 0.13}) rotate(-6)`);
line.append("rect")
.attr("width", width * 1.2)
.attr("height", sideLength)
.attr("x", i => i * sideLength * 1.1 + frameNumber * 20 + Math.sin(i * 0.5 + frameNumber) * 10)
.attr("y", i => i * sideLength * 6)
.attr("fill", "#22a6b3");
line.append("rect")
.attr("width", width * 0.6)
.attr("height", sideLength)
.attr("x", i => width * 1.3 + i * sideLength * 1.1 - frameNumber * 20 + Math.sin(i * 0.5 + frameNumber) * 10)
.attr("y", i => 6 + i * sideLength * 6)
.attr("fill", "#30336b");
}
isTextLight = true
import {preview, animation, download, width, height, d3}
with {firstName, lastName, handle, isTextLight, badgeCode}
from "b93171820ba3f268"
import {tweet} from "@mbostock/tweet"
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.
