Public
Edited
Jan 2, 2024
Fork of Simple D3
Insert cell
Insert cell
chart = {
const width = 928; // uncomment for responsive width
const height = 200;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");

const gradient = svg
.append("defs")
.append("linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("x2", "0%")
.attr("y1", "100%")
.attr("y2", "0%");

gradient
.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#FFFFFF") // Start color
.attr("stop-opacity", 1);

gradient
.append("stop")
.attr("offset", "100%")
.attr("stop-color", "#0000FF") // End color
.attr("stop-opacity", 1);
svg
.append("rect")
.attr("x", 20) // Position on the X axis
.attr("y", 20) // Position on the Y axis
.attr("width", 20) // Width of the bar
.attr("height", 360) // Height of the bar, adjust as needed
.style("fill", "url(#gradient)");
gsap.to(gradient.selectAll("stop").nodes(), {
duration: 2,
attr: { "stop-color": "#FF0000" }, // New colors for the animation
stagger: 0.2,
repeat: -1,
yoyo: true
});

return svg.node();
}
Insert cell
gs = import('https://unpkg.com/gsap@3.12.4/index.js?module')
Insert cell
gsap= gs.gsap
Insert cell

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.
Learn more