Flower

JavaScript

var NREQUESTS = 500;
var RADIUS = 100;
var WIDTH = 500;
var HEIGHT = 500;
var requests = d3.range(NREQUESTS).map((r) => Math.random()*RADIUS)
var sumRequests = requests.reduce((a,b) => a + b);
var petalosScale = d3.scale.linear().domain(d3.extent(requests)).range([0,RADIUS]);
var talloScale = d3.scale.log().domain([0, sumRequests]).range([0, HEIGHT]);
var theta = 2 * Math.PI / requests.length;

var svg = d3.select('body').append('svg')
	.attr('width', WIDTH)
	.attr('height', HEIGHT)
	.style('background-color', 'orange');

var g = svg.append('g').attr('transform', 'translate(250,250)');
var tallo = g.append('line')
	.attr('x1', 0)
	.attr('y1', 250)
	.attr('x2', 0)
	.attr('y2', 0)
	.style('stroke', 'black')
	.style('fill', 'none')
	.style('stroke-opacity', 0);
var petalos = g.selectAll('.petalo').data(requests)
	.enter()
	.append('line')
		.classed('petalo', true)
		.classed('a', () => Math.random() > .5)
		.attr('x1', 0)
		.attr('y1', 0)
		.attr('x2', (d,i) => RADIUS* Math.cos(i*theta))
		.attr('y2', (d,i) => petalosScale(d) * Math.sin(i*theta))
		.style('stroke', 'black')
		.style('fill', 'none')
		.style('stroke-opacity', 0)
		.on('mouseover', (d,i) => {
            petalos.transition().filter((d,j) => i != j).duration(500).style('stroke-opacity', .1);
        })
		.on('mouseout', (d,i) => petalos.transition().duration(500).style('stroke-opacity', 1));

tallo.transition()
    .duration(3000)
	.style('stroke-opacity', 1)
	.each('end', () => {
    	petalos.transition()
        	.duration((d,i) => i*10)
        	.style('stroke-opacity', 1);
	});