Published
Edited
Nov 1, 2019
d3.select(".section-1").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d){
if(d <= 10) return d + "点だよ！草"
else return d + "点だよ！";
})
.style("color", function(d) {
if (d > 15) return "red";
else return "black";
})
.style("background-color", function(d){
if(d >= 10) return "yellow";
else return "none";
});
d3.select(".section-2").selectAll("div")
.data(dataset2)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5; // 高さを 5 倍にします
return barHeight + "px";
})
.style("margin-right", "2px")
.style("background-color", function (d){
if (d > 20){
return "orange";
}
}
);
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.
