firstName = "Chihua"
lastName = "Ma"
handle = "Chihua87"
// 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 numSegments = Math.abs(frameNumber - 5) + 1;
const arc = d3.arc()
.innerRadius((5 - Math.abs(frameNumber - 5)) * 10 + 40)
// .innerRadius(40)
// .padAngle(numSegments * Math.PI / 180)
.outerRadius(width/2 - 10 + Math.abs(frameNumber - 5) * 20)
.cornerRadius(Math.abs(frameNumber - 5) * 25 + 100);
// let data = d3.range(numSegments).map(d => 1);
let data = d3.range(7).map(d => 1);
let arcs = d3.pie()(data);
g.append("defs")
.html(`<linearGradient id="Gradient">
<stop offset="0" stop-color="#df65b0" />
<stop offset="1" stop-color="#91003f" />
</linearGradient>
<clipPath id="swipe-1">
<rect x="${(frameNumber - 1) * width / 10}" y="0" width="${3 * width / 4}" height="${height}" />
</clipPath>
<clipPath id="swipe-2">
<rect x="${(frameNumber - 1 + 2) * width / 10}" y="0" width="${3 * width / 4}" height="${height}" />
</clipPath>`);
let coords = [
{x: -20 , y: 4 * height / 8},
{x: width / 2 , y: 7 * height / 8},
{x: 7 * width / 8 , y: 5 * height / 8},
{x: width + 20 , y: height + 20},
];
const hart = g.selectAll(".arc")
.data(arcs)
.enter().append("path")
.attr("class", "arc")
.attr("d", arc)
.attr("transform", `translate(${width/2 + 20},${3 * height / 4 - 30}) rotate(10)`)
.attr("fill", "url(#Gradient)")
// .style("fill", (d, i) => d3.interpolatePuRd(i / 7))
.style("stroke", (d, i) => d3.interpolatePuRd((i + 3) % 7 / 7))
.style("stroke-width", Math.abs(frameNumber - 5) * 3)
.style("opacity", (d, i) => i === 0 || i === 6 ? 1 : 0);
const line = d3.line()
.x(d => d.x)
.y(d => d.y)
.curve(d3.curveBasis);
const path1 = g.append("path")
.datum(coords)
.attr("d", line)
.attr("stroke-linejoin", "round")
.style("stroke", "#d4b9da")
.style("fill", "none")
.attr("clip-path", "url(#swipe-1)")
.style("stroke-width", 15);
const path2 = g.append("path")
.datum(coords.map(({x, y}) => ({x: x - 10, y: y + 30})))
.attr("d", line)
.attr("stroke-linejoin", "round")
.style("stroke", "#df65b0")
.style("fill", "none")
.attr("clip-path", "url(#swipe-2)")
.style("stroke-width", 15);
}
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.
