The workspace is for a data visualization class at the Tokyo Metropolitan University.
Instructor: @sugi2000lab @sugi2000
{
const dataset = [5, 25, 45, 65, 85];
const div = d3.create('div')
.style("background-color", "#aaa")
.style("padding", "5px")
.text("データで棒グラフ〜")
.style("color", "white")
.style("font-weight", "bold")
div.selectAll("p")
.data(dataset)
.join("div")
.text(d => d)
.style("color", "white")
.style("text-align", "right")
.style("padding-right", "0.5em")
.style("background-color", (d) => d <= 30 ? "red" : "blue")
.style("margin-bottom", "3px")
.style("width", d => `${d * width / 100}px`)
return div.node();
}
{
const dataset = [5, 25, 45, 65, 85];
const div = d3.create('div')
.style("background-color", "#aaa")
.style("padding", "5px")
.style("color", "white")
.style("font-weight", "bold")
.style("display", "flex")
.style("align-items", "flex-end")
div.selectAll("p")
.data(dataset)
.join("div")
.text(d => d)
.style("color", "white")
.style("text-align", "right")
.style("padding-right", "0.5em")
.style("background-color", (d) => d <= 30 ? "red" : "blue")
.style("margin", "5px")
.style("height", d => `${d * 10}px`)
.style("width", `${width / dataset.length}px`)
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.
