playing with space, shape, colour & composition
render = {
const sel = d3.create('div')
.style('width', width)
.attr('class', 'flex flex-wrap')
d3.range(avatars).forEach(n => {
sel.append('div')
.append('img')
.attr('src', image(n))
})
return sel.node()
}
image = (n) => {
return `https://api.dicebear.com/7.x/${style}/svg?seed=${n}`
}
// full list: https://avatars.dicebear.com/styles
typesAvatar = [
'pixel-art',
'open-peeps',
'bottts',
'avataaars',
'croodles',
'personas'
]
<link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
<style>
img {
width: 150px
}
</style>
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.
