Public
Edited
May 19
numbers = ["#e6e7ed", "#e7eef5", "#f5eef7", "#fee0ec", "#fef6f6"]
{
const width = 600;
const height = 600;
const g = d3
.select("svg#viz")
.selectAll("g")
.data([1])
.join("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const gRects = g
.selectAll("g.rect")
.data(numbers)
.join("g")
.classed("rect", true)
.attr("transform", (d, i) => `rotate(${-72 * i})`);
gRects
.append("rect")
.attr("x", -180)
.attr("y", 20)
.attr("width", 280)
.attr("height", 50)
.attr("fill", (d) => d)
.attr("opacity", 1);
}
d3 = require("d3")
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.
