Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
g = svg.selectAll('g')
.data(flowers).enter().append('g')
text = g.append('text')
path = g.selectAll('path')
.data(d => {
return _.times(d.numPetals, i => {
// create a copy of the parent data, and add in calculated rotation
return Object.assign({}, d, {rotate: i * (360 / d.numPetals)})
})
}).enter().append('path')
{
g.attr('transform', (d, i) => `translate(${d.translate})`)
text.attr('text-anchor', 'middle')
.attr('dy', '.35em')
.style('font-size', '.7em')
.style('font-style', 'italic')
.text(d => _.truncate(d.title, {length: 20}))
path.attr('transform', d => `rotate(${d.rotate})scale(${d.scale})`)
.attr('d', d => d.path)
.attr('fill', d => d.color)
.attr('fill-opacity', 0.5)
.attr('stroke', d => d.color)
}
{
const svg = html`<svg width=${width} height=${svgHeight}></svg>`
// ✨ OUR CODE HERE
return scrollSVG(svg)
}
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.
