Published
Edited
May 10, 2022
Also listed in…
Tips and Utilities
Insert cell
Insert cell
Insert cell
viewof range = Inputs.range([0, 10], {label: "Amount", step: 1})
Insert cell
Insert cell
renderAvatars = () => {
let out = ``;
for(let i = 0; i < range; i++){
out = `${out} <div><img src="https://api.multiavatar.com/${Math.floor(Math.random()*1000)}.png"/></div>`
}
return out
}
Insert cell
html`<style>
.avatar-view{
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.avatar-view {
flex: 1 1 64px;
width: 64px;
height: 64px;
}
.avatar-view img{
height: 64px;
width: 64px;
}

</style>`
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