Public
Edited
Nov 7, 2023
7 stars
chart = {
const height = 300;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto; background-color: thistle;");
// gradient
svg
.append("defs")
.append("linearGradient")
.attr("id", "gradient")
.selectAll("stop")
.data(stops)
.join("stop")
.attr("stop-color", "black")
.attr("offset", (_, i) => i / (stops.length - 1))
.append("animate")
.attr("dur", "3s")
.attr("repeatCount", "indefinite")
.attr("attributeName", "stop-opacity")
.attr("values", (d, i) => rotated(i).join(";"));
// lines
const gap = 10;
const lines = [
[ [0, height / 3], [width / 2 - gap, (height / 3) * 2] ],
[ [width / 2 + gap, (height / 3) * 2], [width, height / 3] ]
];
svg
.selectAll("path.gradient")
.data(lines)
.join("path")
.attr("d", d3.line().curve(d3.curveBumpX))
.attr("stroke-width", 50)
.attr("stroke", "url(#gradient)")
.attr("fill", "none");
return svg.node();
}
stops = d3.range(16).map((d) => (1 - Math.cos((d / 16) * 2 * Math.PI)) / 6)
rotated = (i) => [...stops.slice(i), ...stops.slice(0, i), stops[i]].reverse()
prettier = require("prettier")
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.
