Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
dataset = d3.shuffle(d3.range(40, 200, 10))
{
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
// 背景
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#004");
const rects = svg
.selectAll("rect.bar")
.data(dataset)
.join("rect")
.attr("class", "bar");
const barPadding = 1;
rects
.attr("x", (d, i) => i * (width / dataset.length))
.attr("y", (d) => height - (d / d3.max(dataset)) * height)
.attr("width", width / dataset.length - barPadding)
.attr("height", (d) => (d / d3.max(dataset)) * height)
.attr("fill", "#800")
.on("mouseenter", function (event) {
d3.select(this).attr("fill", "yellow");
})
.on("mouseleave", function (event) {
d3.select(this).attr("fill", "#800");
});
return svg.node();
}
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.
