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('stroke', d=>d.color)
.attr('fill-opacity', 0.2)
.attr('stroke-width', 2)
g.append('text')
.text(d=> _.truncate(d.title, 18))
.style('font-size', '.57em')
.style('font-style', 'italic')
.attr('text-anchor', 'middle')
.attr('dy', '.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.
