Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
viewof max = Inputs.range([20, 200], { step: 10 })
data = d3.range(10, max, 10)
{
const div = d3
.create("div")
.style("display", "flex")
.style("align-items", "end");
div
.selectAll("div")
.data(data)
.join("div")
.text((d) => `${d}点`)
.style("display", "inline-block")
.style("background-color", "maroon")
.style("margin-right", "1px")
.style("color", "white")
.style("height", (d) => `${d * 5}px`)
.style("width", "20px");
return div.node();
}
{
const div = d3
.create("div")
.style("display", "flex")
.style("align-items", "end");
div
.selectAll("div")
.data(data)
.join("div")
.text((d) => `${d}点`)
.style("display", "inline-block")
.style("background-color", "pink")
.style("font-size", "10px")
.style("font-weight", "bold")
.style("margin-right", "1px")
.style("color", "white")
.style("height", (d) => `${d * 5}px`)
.style("width", "20px");
return div.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.
