Published
Edited
May 15, 2021
1 star
Insert cell
Insert cell
goodgraphics(
{
height: 800,
width: 800,
attributes: {
style: "background: #fff",
stroke: "none"
}
},
(svg) => {
const rectWidth = svg.width * 0.75;
const rectHeight = svg.height * 0.2;
const offsetX = svg.width * 0.025;
const offsetY = svg.height * 0.025;
const rectX = svg.width / 2 - rectWidth / 2;
const rectY = svg.height / 2 - rectHeight / 2;
const shadowX = rectX + offsetX;
const shadowY = rectY + offsetY;

svg.rect(shadowX, shadowY, rectWidth, rectHeight, { fill: "black" });
svg.rect(rectX, rectY, rectWidth, rectHeight, {
fill: "#eee",
stroke: "white",
"stroke-width": "2.5px"
});

svg.draw();
}
)
Insert cell
Insert cell
Insert cell
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