Public
Edited
Jun 4, 2023
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<!-- to hide the path, it is usually wrapped in a <defs> element -->
<!-- <defs> -->
<path
id="MyPath"
fill="none"
stroke="none"
d="M10,90 L90,10" />
<text stroke="grey" stroke-opacity="0.3" fill="none" text-anchor="middle">
<textPath href="#MyPath" method="stretch" startOffset="50%"><tspan dy="8">Draft</tspan></textPath>
</text>
</svg>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<!-- to hide the path, it is usually wrapped in a <defs> element -->
<!-- <defs> -->
<path
id="MyPath1"
fill="none"
stroke="red"
d="M10,190 L190,10" />
<text stroke="grey" stroke-opacity="0.3" fill="none" text-anchor="middle">
<textPath href="#MyPath1" startOffset="50%"><tspan dy="8">Confidential</tspan></textPath>
</text>
</svg>
Plot.plot({
margin: 30,
inset: 10,
grid: true,
style: {
padding: 10,
color: "black",
background: `url(${await FileAttachment("draft-bg.svg").url()})`,
backgroundSize: "cover",
backgroundPosition: "center",
},
marks: [
Plot.frame(),
Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", fill: "white", stroke: "black"})
]
})
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.
