Author and Co-authors Summary

Say, for pubs within a certain period...as complement to Keshif or?

by Nivaldo

HTML

<svg id="ecosystem"></svg>

JavaScript

var dataset = [1, 2, 3, 4, 5, 6, 7, 8];

var width = 600,
    height = 600,
    rad = Math.PI / 180,
    layerRadius = 70,
    strokeWidth = 3,
    step = 360 / dataset.length,
    svg = d3.select('#ecosystem')
        .attr('width', width)
        .attr('height', height);

//circle of rotation    
var c = svg.append('circle')
    .attr('cx', width / 2)
    .attr('cy', height / 2)
    .attr('r', width / 2 - 3)
    .attr('fill', 'none')
    .style({
    'stroke': 'black',
    'stroke-width': 5
});

var mainLayerGroup = svg.append('g')
    .attr('class', 'mainLayerG')
    .attr('transform', 'translate(300,300)');

var subGroup = mainLayerGroup.selectAll('g')
    .data(dataset)
    .enter()
    .append('g')
    .attr('class', 'layerG');

subGroup
    .append('circle')
    .attr('class', 'outerC')
    .attr('fill', 'none')
    .attr('stroke', 'black')
    .attr('stroke-width', strokeWidth)
    .attr('r', layerRadius)
    

subGroup
    .append('circle')
    .attr('class', 'innerC')
    .attr('fill', 'grey')
    .attr('r', layerRadius - 7);


subGroup.append('text')
                .text(function(d){
                    return d;
                })
                .attr("class", "layerTitle")
                .attr("text-anchor", "middle")
                .attr('font-size', '36px')
                .attr("text-anchor", "middle")
                .attr("alignment-baseline", "middle")
                .attr('color', 'black');

subGroup.transition()
    .duration(1000)
    .delay(500)
    .ease('bounce')
    .attr('transform', function (d, i) {
        return "translate(" + ((width / 2 - layerRadius - strokeWidth) * Math.cos((step * i) * Math.PI / 180)) + "," + ((width / 2 - layerRadius - strokeWidth) * Math.sin((step * i) * Math.PI / 180)) + ")";
    });