movies
flowers = {
// movie genre → `color` (color of petals)
// array of top genres: `topGenres`
// array of colors to map to: `petalColors`
const colorScale = d3.scaleOrdinal().domain(topGenres).range(petalColors).unknown(colorObj.Other)
// `rated` → `path` (type of flower petal)
// array to map to: `petalPaths`
const pathScale = d3.scaleOrdinal().range(petalPaths)
// `rating` → `scale` (size of petals)
const sizeScale = d3.scaleLinear().domain(d3.extent(movies, d => d.rating)).range([0.01, 1])
// `votes` → `numPetals` (number of petals)
const numPetalsScale = d3.scaleQuantize().domain(d3.extent(movies, d => d.votes)).range(_.range(5, 11))
return _.map(movies, (d, i) => {
return {
title: d.title,
translate: calculateGridPos(i), // util function that returns [x, y]
color: colorScale(d.genres[0]),
path: pathScale(d.rated),
scale: sizeScale(d.rating),
numPetals: numPetalsScale(d.votes)
}
})
}
{
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.
