Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
{
const div = d3.create("div")
for(let i=0; i<5; i++){
div.append("p").text(`新しいパラグラフ！ その${i+1}`);
}
return div.node()
}
{
const div = d3.create("div")
for(let i=0; i<5; i++){
div.append("section").append("p").text(`新しいパラグラフ！ その${i+1}`)
}
return div.node()
}
{
const div = d3.create("div")
for(let i=0; i<5; i++){
const p = div.append("section").append("p")
.text(`新しいパラグラフ！ その${i+1}`)
if(i==0){
p.attr("class", "first")
}
if(i==4){
p.attr("class","last")
}
}
return div.node()
}
{
const div = d3.create("div")
.style('display','flex')
.style('justify-content', 'space-between')
.style('padding', '0 12px')
for(let i=0; i<5; i++){
const section = div.append("section")
.style('background-color','#EEEEEE')
.style('border', '1px solid #888888')
.style('border-radius', '8px')
.style('height', '58px')
.style('padding', '6px 12px')
.style('display', 'flex')
.style('justify-content', 'center')
.style('align-items', 'center')
const p = section.append("p")
.text(`新しいパラグラフ！その${i+1}`)
.style('font-size','15px')
if(i==0){
p.attr("class", "first")
.style('color','#E8392C')
.style('font-weight','800')
}
if(i==4){
p.attr("class","last")
.style('color','#377E22')
.style('font-weight','800')
}
}
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.
