Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
Published
Edited
Jun 22, 2022
38 forks
Importers
Comments locked
14 stars
movies
flowers = {
// movie genre → `color` (color of petals)
// array of top genres: `topGenres`
// array of colors to map to: `petalColors`
// `rated` → `path` (type of flower petal)
// array to map to: `petalPaths`
// `rating` → `scale` (size of petals)
// `votes` → `numPetals` (number of petals)
return _.map(movies, (d, i) => {
return {
title: d.title,
translate: calculateGridPos(i), // util function that returns [x, y]
}
})
}
{
const svg = html`<svg width=${width} height=${svgHeight}></svg>`
d3.select(svg).selectAll('path')
.data(flowers).enter().append('path')
.attr('transform', (d, i) => `translate(${d.translate})scale(${d.scale || 1})`)
.attr('d', d => d.path)
.attr('fill', d => d.color)
.attr('fill-opacity', 0.75)
.attr('stroke', d => d.color)
return scrollSVG(svg)
}
_.keys({a:1, b:2, c:3})
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.
