D3 Visualization of a Flower using Circles Arces script src https d3js org d3 v7 min js script script src https cdnjs cloudflare com ajax libs lodash js 4 17 21 lodash min js script script var width 500 height 500 tau 2 Math PI var svg d3 select body append svg attr width width attr height height append g attr transform translate width 2 height 2 Returns arc path var getArc function innerRadius outerRadius return d3 arc innerRadius innerRadius outerRadius outerRadius Returns array of xy coordinates along a circle s arc with the given radius argument pointCount number of points radius how large the reference circle is range how much of the circle s perimeter the points are distributed across var generatePointsAroundArc function numberOfPoints radius range return _ map _ range 1 numberOfPoints 1 function item return getArc radius radius centroid startAngle 0 endAngle item numberOfPoints range tau Takes an array of xy coordinates and values for inner outer radius and combines into an array of objects pointsArray array of x y pairs innerRadius the inner radius of the arc outerRadius the outer radius of the arc var addArcsToPointsArray function pointsArray innerRadius outerRadius return _ map pointsArray function item return addArc item 0 item 1 innerRadius outerRadius return coords item 0 item 1 radius innerRadius outerRadius Takes an XY array pair of points and values for inner and outer radius and returns an object like coords x y radius innerRadius outerRadius pointsArray array of x y pairs innerRadius the inner radius of the arc outerRadius the outer radius of the arc var addArc function pointXY innerRadius outerRadius return coords pointXY 0 pointXY 1 radius innerRadius outerRadius var testArc addArcsToPointsArray generatePointsAroundArc 18 100 2 100 99 var testArc2 addArcsToPointsArray generatePointsAroundArc 18 100 2 5 6 _ each testArc function item index svg append path datum startAngle 0 endAngle tau attr d getArc item radius 0 item radius 1 classed x true attr transform translate item coords 0 item coords 1 style fill getRandomColor _ each testArc2 function item2 index var newX item2 coords 0 item coords 0 var newY item2 coords 1 item coords 1 svg append path datum startAngle 0 endAngle tau attr d getArc item2 radius 0 item2 radius 1 classed y true attr transform translate newX newY style fill fff style fill getRandomColor setInterval function svg selectAll x each function item index d3 select this datum startAngle 0 endAngle tau transition duration 1000 style fill getRandomColor style fill fff attr transform scale index 10 index 10 attr transform translate index index 1000 function log args try if window console window console log window console log apply window console arguments catch e function getRandomArbitrary min max return Math random max min min function getRandomColor return Math floor Math random 16777215 toString 16 console log ready script
return coords pointXY 0 pointXY 1 radius innerRadius outerRadius var testArc addArcsToPointsArray generatePointsAroundArc 18 100 2 100 99 var testArc2 addArcsToPointsArray generatePointsAroundArc 18 100 2 5 6 _ each testArc function item index svg append path datum startAngle 0 endAngle tau attr d getArc item radius 0 item radius 1 classed x true attr transform translate item coords 0 item coords 1 style fill getRandomColor _ each testArc2 function item2 index var newX item2 coords 0 item coords 0 var newY item2 coords 1 item coords 1 svg append path datum startAngle 0 endAngle tau attr d getArc item2 radius 0 item2 radius 1 classed y true attr transform translate newX newY style fill fff style fill getRandomColor setInterval function svg selectAll x each function item index d3 select this datum startAngle 0 endAngle tau transition duration 1000 style fill getRandomColor style fill fff attr transform scale index 10 index 10 attr transform translate index index 1000 function log args try if window console window console log window console log apply window console arguments catch e function getRandomArbitrary min max return Math random max min min function getRandomColor return Math floor Math random 16777215 toString 16 console log ready script