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
const g = d3.select(svg).selectAll('g').data(flowers).enter().append('g')
.attr('transform', d => `translate(${d.translate})`)
g.selectAll('path').data(d => {
return _.times(d.numPetals, i => Object.assign({}, d, {rotate: i * (360 / d.numPetals)}))
}).enter().append('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-width', 2)
.attr('stroke', d => d.color)
g.append('text').text(d => _.truncate(d.title, {length: 18}))
.style('font-size', '.7em')
.style('font-style', 'italic')
.attr('text-anchor', 'middle')
.attr('dy', '0.35em')
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.
