Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
viewof max = Inputs.range([20,200],{step:10})
data = d3.range(10,max,10)
{
const div = d3.create('div')
div.selectAll('div')
.data(data)
.join('div')
.text((d) => `${d}点`)
.style('background-color',"maroon")
.style('margin-bottom', "1px")
.style('color', "white")
.style('width', d => `${d*5}px`)
return div.node()
}
{
const div = d3.create('div')
.style('display',"flex")
.style('align-items',"end")
div.selectAll('div')
.data(data)
.join('div')
.text((d) => `${d}点`)
.style('display', "inline-block")
.style('background-color',"maroon")
.style('margin-right', "1px")
.style('color', "white")
.style('height', d => `${d*5}px`)
.style('width', "50px")
return div.node()
}
{
var data2 = []
for(let i=0; i<10; i++){
data2.push(Math.floor(Math.random() * max)+20)
}
data2.sort((a, b) => {
return a < b ? -1 : 1
})
const div = d3.create('div')
.style('display',"flex")
.style('align-items',"end")
div.selectAll('div')
.data(data2)
.join('div')
.text((d) => `${d}点`)
.style('display', "inline-block")
.style('background-color',(d)=>`rgb(${d},${d/20},80)`)
.style('margin-right', "1px")
.style('color', "white")
.style('height', d => `${d*3}px`)
.style('width', "50px")
.style('text-align', "center")
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.
