Public
Edited
Sep 10, 2023
1 fork
data = d3.shuffle("abcdefghijklmnopqrstuvwxyz".split("")).slice(0, 8);
newd = d3.shuffle("abcdefghijklmnopqrstuvwxyz".split("")).slice(0, 1);
{
const svg = d3.create("svg").attr("width", 200).attr("height", 30);
let initial = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(d=>d)
.attr("dx", (d, i) => i*20)
.attr("dy", 20);
svg.selectAll("text")
.data(newd, d=>d)
.join(
enter => enter.append("text")
.attr("dx", 8*20)
.attr("dy", 20)
.text(d=>d)
.attr("fill", "green"),
update => update.attr("fill", "gray"),
exit => exit.attr("fill", "brown")
);
return svg.node()
}
image = Object.assign(await FileAttachment("cherry.JPG").image(),
{style: "max-height:100px;display:block;"})
width = image.naturalWidth;
height = image.naturalHeight;
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.
