firstName = "Raven"
lastName = "Gao"
handle = "GaoRaven"
html
`<style>
svg {
background-color: #fff;
}
</style>`
// 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>
frameNumber = 11 - frameNumber;
context.fillStyle = "#34495e";
context.fillRect(0, 0, width, height);
const sideLength = 20;
const numberOfLines = 100;
const line = g.selectAll("g")
.data(d3.range(numberOfLines))
.join("g")
.attr("transform", `translate(-${width/4},${height/3}) rotate(-40)`);
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");
// franmeNumber: 1~10
const fn = x => Math.pow(x, 2) * -4/(frameNumber*12) + 10 - frameNumber * 0.46;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
const curveLine = d3.line()
.x(function (d) {return x(d.x);})
.y(function (d) {return y(d.y);})
.curve(d3.curveMonotoneX);
const data = [];
d3.range(-30, 30).forEach((function (d) {
if (fn(d) < 0) {
data.push({x:d, y:0});
return;
}
data.push({x:d, y:fn(d)});
}));
const generateTentacles = (start, curveOffset, frameOffset, vOffset=0) =>
`M ${start} ${40 + vOffset}, Q ${start + curveOffset - frameOffset} ${60 + vOffset},
${start} ${80 + vOffset}, ${start - curveOffset + frameOffset} ${100 + vOffset},
${start}, ${120 + vOffset}, T ${start} ${160 + vOffset}`;
// shadow
g.append("g").attr("transform", `translate(${width * 0.26},${height*0.38}) scale(5) rotate(40)`)
.append('path')
.attr('d',
generateTentacles(60, 10, -frameNumber * 4, -frameNumber*5)
+ generateTentacles(75, 15, -frameNumber * 3, -frameNumber*4)
+ generateTentacles(90, 5, -frameNumber * 2, -frameNumber*3)
+ generateTentacles(105, -5, frameNumber * 2, -frameNumber*3)
+ generateTentacles(120, -15, frameNumber * 2, -frameNumber*4)
+ generateTentacles(135, -10, frameNumber * 4, -frameNumber*5))
.attr("fill", "none")
.attr("stroke", '#000')
.attr("stroke-width", "4px");
g.append("g").attr("transform", `translate(${width*0.6},${height*0.64}) scale(0.036) rotate(40)`)
.append('path')
.datum(data)
.attr('d', curveLine)
.attr("fill", '#000')
.attr("stroke", "none")
.attr("stroke-width", "500px");
// graph
// tentacles
g.append("g").attr("transform", `translate(${width * 0.24},${height*0.37}) scale(5) rotate(40)`)
.append('path')
.attr('d',
generateTentacles(60, 10, -frameNumber * 4, -frameNumber*5)
+ generateTentacles(75, 15, -frameNumber * 3, -frameNumber*4)
+ generateTentacles(90, 5, -frameNumber * 2, -frameNumber*3)
+ generateTentacles(105, -5, frameNumber * 2, -frameNumber*3)
+ generateTentacles(120, -15, frameNumber * 2, -frameNumber*4)
+ generateTentacles(135, -10, frameNumber * 4, -frameNumber*5))
.attr("fill", "none")
.attr("stroke", d3.interpolateOrRd((11-frameNumber)/40))
.attr("stroke-width", "5px");
// jelly fish head
g.append("g").attr("transform", `translate(${width*0.52},${height*0.65}) scale(0.036) rotate(40)`)
.append('path')
.datum(data)
.attr('d', curveLine)
.attr("fill", d3.interpolateOrRd((11-frameNumber)/40))
.attr("stroke", "none")
.attr("stroke-width", "500px");
// eyes
g.append("g").attr("transform", `translate(${width * 0.4},${height*0.32}) scale(5) rotate(40)`)
.append('path')
.attr('d', `M 60 ${25+frameNumber} L 60 ${40+frameNumber} M 100 ${25+frameNumber} L 100 ${40+frameNumber}`)
.attr("fill", "none")
.attr("stroke-linecap", "round")
.attr("stroke", 'black')
.attr("stroke-width", "5px");
}
isTextLight = true
import {preview, animation, download, width, height, d3}
with {firstName, lastName, handle, isTextLight, badgeCode}
from "b93171820ba3f268"
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.
