{
const svg = DOM.svg(petalSize * 100, petalSize * 28);
const ratingMinMax = d3.extent(data, d => +d.imdbRating);
const votesMinMax = d3.extent(data, d => +d.imdbVotes.replace(",", ""));
const sizeScale = d3.scaleLinear().domain(votesMinMax).range([0.25, 1]);
const numPetalScale = d3.scaleQuantize().domain(votesMinMax).range([3,6,9,12,15,18]);
const flowersData = _.map(data, d => {
const numPetals = numPetalScale(+d.imdbVotes.replace(',',''));
console.log(numPetals);
const petSize = sizeScale(+d.imdbRating);
return {
petSize,
petals: _.times(numPetals, i => {return {angle: 360 * i / numPetals, petalPath}}),
numPetals,
}
});
const flowers = d3.select(svg)
.selectAll('g')
.data(flowersData)
.enter()
.append('g')
.attr('transform', (d, i) => `translate(${(i % 5) * petalSize + 50},${Math.floor(i / 5) * petalSize + 50})scale(${d.petSize})`);
flowers.selectAll('path')
.data(d => d.petals).enter().append("path")
.attr("d", d => d.petalPath)
.attr("transform",d=>`rotate(${d.angle})`)
.attr("fill", (d,i) => d3.interpolateWarm(d.angle / 360));
return svg;
}