Public
Edited
Oct 28, 2022
Insert cell
Insert cell
Insert cell
dataset = [5, 25, 45, 65, 85];

Insert cell
Insert cell
{
const div = d3.create("div")
return div.selectAll("p")
}
Insert cell
Insert cell
div = {
const div = d3.create("div");
div.append("div").text("もともとのパラグラフ")
div.selectAll("p")
.data(dataset)
.join("p")
.text("新しいパラグラフ!");
return div.node();
}
Insert cell
Insert cell
d3.select(div).selectAll("p")

Insert cell
Insert cell
d3.select(div).selectAll("p").data()

Insert cell
Insert cell
d3.select(div).select("p").datum()

Insert cell
Insert cell
{
const div = d3.create("div");
div
.selectAll("p")
.data(dataset)
.join("p")
.text((d) => {
return 5000 * d + "点";
}); //d + ""だけでもいい
return div.node();
}
Insert cell
Insert cell
{
const div = d3.create("div");
div
.selectAll("p")
.data(dataset)
.join("p")
.text((d) => {
return d + "点";
})
.style("color", (d) => {
if (d <= 45) {
// 30点以下は赤色にする
return "red";
} else {
return "blue";
}
});
return div.node();
}
Insert cell
Insert cell
{
const div = d3.create("div");
div
.selectAll("p")
.data(dataset)
.join("p")
.text((d, i) => `${i + 1}人目は、${d}点!`) // iはデータの何番目かを表してる
.style("color", (d) => {
if (d <= 30) {
// 30点以下は赤色にする
return "green";
} else {
return "orange";
}
});
return div.node();
}
Insert cell
{
const div = d3.create("div");
div
.selectAll("p")
.data(dataset)
.join("p")
.text((d, i) => `${i + 1}人目は、${d}点!`) // iはデータの何番目かを表してる
.style("background-color", (d) => {
if (d <= 30) {
// 30点以下は赤色にする
return "#4fd8ff";
} else {
return "#19fa12";
}
});
return div.node();
}
Insert cell
{
const div = d3.create("div");
div
.selectAll("p")
.data(dataset)
.join("p")
.text((d, i) => `${i + 1}人目は、${d}点!`) // iはデータの何番目かを表してる
.style("background-color", (d, i) => (i % 2 == 0 ? "yellow" : "pink"))
.style("color", (d) => {
if (d <= 30) {
// 30点以下は赤色にする
return "green";
} else {
return "orange";
}
});
return div.node();
}
Insert cell

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.
Learn more