Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
dataset = [5, 25, 45, 65, 85];
{
const div = d3.create("div"); //要素を作成
div.append("p").text("もともとのパラグラフ"); //selectAllで拾われ、join後の.textで上書きされる
div.selectAll("p") //p子要素を全部選択
.data(dataset) //データをバインド
.join("p") //p要素を追加（ここは基本的にselectAllと一致させる）
.text("新しいパラグラフ!"); //テキストを設定
return div.node(); //DOM要素を返す
}
d3.select("div").selectAll("p");
d3.select("div").selectAll("p").data;
d3.select("div").selectAll("p").datum
div2 = {
const div = d3.create("div");
div
.selectAll("p")
.data(dataset)
.join("p")
// .text(funciton(d){
// return d + "点！"；
// }) データの値をテキストに設定する
.text((d) => +"点！");
return div.node();
}
div3 = {
const div = d3.create("div");
div
.selectAll("p")
.data(dataset)
.join("p")
// .text(funciton(d){
// return d + "点！"；
// }) データの値をテキストに設定する
.text((d) => +"点！") //アロー関数
.style("color", (d) => {
if (d <= 30) {
return "red";
} else {
return "black";
}
}); //スタイルをアロー関数で指定
return div.node();
}
div4 = {
const div = d3.create("div");
div
.selectAll("p")
.data(dataset)
.join("p")
// .text(funciton(d){
// return d + "点！"；
// }) データの値をテキストに設定する
// .text((d, i) => i + 1 + "人目は、" + d + "点！"); //アロー関数
.text((d, i) => `${i + 1}人目は、${d}点！`) //アロー関数
.style("background-color", (d, i) => (i % 2 === 0 ? "#ffc0cb" : "#b0c4de"));
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.
