Inc_5000_2017

Donut: Revenues of The 6 Industries with Most Companies in Top 5,000

Description: Inc 5000 2017 from inc.com Annual list of fastest growing private companies.

URL

Download Data (CSV)

Forked From: vickygisel’s Block

<!DOCTYPE html>
<html>

<h1>Revenues of The 6 Industries with Most Companies in Top 5,000</h1>

h1 {
        font-size: 18px;
        text-align: center;
    }

rect {
        stroke-width: 2;
    }

#chart {
        height: 360px;
        margin: 0 auto;
        position: relative;
        width: 360px;
    }

.tooltip {
        box-shadow: 0 0 5px #999999;
        display: none;
        font-size: 12px;
        left: 130px;
        padding: 10px;
        position: absolute;
        text-align: center;
        top: 95px;
        width: 80px;
        z-index: 10;
        line-height: 140%; /*Interlineado*/
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
    }

.label {
        font-weight: 600;
    }
</style>
:

<body>
<div id="chart"></div>
<script data-require="d3@*" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<script>
    (function (d3) {
        'use strict';

var tooltip = d3.select('#chart')
            .append('div')
            .attr('class', 'tooltip');

tooltip.append('div')
            .attr('class', 'label');

tooltip.append('div')
            .attr('class', 'count');

tooltip.append('div')
            .attr('class', 'percent');

var dataset = [
            {industry: "IT Services", revenue: 15260863615},
            {industry: "Advertising & Marketing", revenue: 8999155005},
            {industry: "Business Products & Services", revenue: 18980704634},
            {industry: "Health", revenue: 24568089214},
            {industry: "Software", revenue: 5904691832},
            {industry: "Construction", revenue: 13014851687},
        ];

var width = 360;
        var height = 360;
        var radius = Math.min(width, height) / 2;

var color = d3.scaleOrdinal(d3.schemeCategory20);

var svg = d3.select('#chart')
            .append('svg')
            .attr('width', width)
            .attr('height', height)
            .append('g')
            .attr('transform', 'translate(' + (width / 2) +
                ',' + (height / 2) + ')');

var donutWidth = 75;

var arc = d3.arc()
            .innerRadius(radius - donutWidth)
            .outerRadius(radius);

var pie = d3.pie()
            .value(function (d) {
                return d.revenue;
            })
            .sort(null);

var legendRectSize = 14;
        var legendSpacing = 4;

var path = svg.selectAll('path')
            .data(pie(dataset))
            .enter()
            .append('path')
            .attr('d', arc)
            .attr('fill', function (d, i) {
                return color(d.data.industry);

});

path.on('mouseover', function (d) {
            var total = d3.sum(dataset.map(function (d) {
                return d.revenue;
            }));
            var percent = Math.round(1000 * d.data.revenue / total) / 10;
            tooltip.select('.label').html(d.data.industry);
            tooltip.select('.count').html(d.data.revenue);
            tooltip.select('.percent').html(percent + '%');
            tooltip.style('display', 'block');
        });

path.on('mouseout', function () {
            tooltip.style('display', 'none');
        });

var legend = svg.selectAll('.legend')
            .data(color.domain())
            .enter()
            .append('g')
            .attr('class', 'legend')
            .attr('transform', function (d, i) {
                var height = legendRectSize + legendSpacing;
                var offset = height * color.domain().length / 2;
                var horz = -2 * legendRectSize - 50;
                var vert = i * height - offset;
                return 'translate(' + horz + ',' + vert + ')';
            });

legend.append('rect')
            .attr('width', legendRectSize)
            .attr('height', legendRectSize)
            .style('fill', color)
            .style('stroke', color);

legend.append('text')
            .attr('x', legendRectSize + legendSpacing)
            .attr('y', legendRectSize - legendSpacing)
            .text(function (d) {
                return d;
            });

})(window.d3);
</script>
</body>

</html>

https://d3js.org/d3.v4.min.js