Published
Edited
Jun 26, 2022
1 star
{
const svg = d3.create("svg").attr("width", 500).attr("height", 350);
while (true) {
svg
.selectAll("text")
.data(randomMovies(), (d) => d.titel)
.join(
(enter) =>
enter
.append("text")
.style("opacity", 0)
// styling to have one line for each title
.attr("transform", (d, i) => `translate(${10}, ${30 + i * 30})`)
// give the title a color to play around afterwards
.style("fill", "blue"),
(update) => update,
(exit) =>
exit
.style("fill", "red")
.transition()
.duration(1000)
.attr("transform", (d, i) => `translate(${300},${30 + i * 30})`)
.remove()
)
.transition()
.duration(1000)
.style("opacity", 1)
// content of the titel
.text((d) => d.rang + " " + d.titel)
.attr("transform", (d, i) => `translate(${10}, ${30 + i * 30})`)
.style("fill", "black");
yield svg.node();
await Promises.tick(2500);
}
}
data = FileAttachment("film-1.csv").csv()
function randomMovies() {
return d3
.shuffle(data)
.slice(0, Math.floor(0 + Math.random() * 10))
.sort((a, b) => a.rang - b.rang);
}
import { style } from "@cas-datenvisualisierung/style"
style
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.
