connieGao0819/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet" data-semver="3.0.1"
          data-require="normalize@*"/>
</head>

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

<style>
    .legend {
        font-size: 12px;
    }

    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>

## industries.csv

          
            industry
            companyNumber
            revenue

            
              Advertising & Marketing
              493
              8999155005

            
              Business Products & Services
              476
              18980704634

            
              Computer Hardware
              37
              1155683904

            
              Construction
              302
              13014851687

            
              Consumer Products & Services
              238
              12175978198

            
              Education
              74
              1382508228

            
              Energy
              91
              4119645361

            
              Engineering
              67
              1596939323

            
              Environmental Services
              42
              1043786786

            
              Financial Services
              263
              17112305935

            
              Food & Beverage
              137
              5120495888

            
              Government Services
              241
              10917382078

            
              Health
              395
              24568089214

            
              Human Resources
              185
              12051532622

            
              Insurance
              89
              5956740913

            
              IT Services
              599
              15260863615

            
              Logistics & Transportation
              147
              10471355276

            
              Manufacturing
              146
              5999154297

            
              Media
              66
              991738550

            
              Real Estate
              196
              6279833306

            
              Retail
              168
              7239445907

            
              Security
              67
              7129747477

            
              Software
              324
              5904691832

            
              Telecommunications
              86
              3659299683

            
              Travel & Hospitality
              63
              2609284722

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8"/>
	<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet" data-semver="3.0.1"
	data-require="normalize@*"/>
	</head>

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

	<style>
	.legend {
	font-size: 12px;
	}

	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>
industry	companyNumber	revenue
Advertising & Marketing	493	8999155005
Business Products & Services	476	18980704634
Computer Hardware	37	1155683904
Construction	302	13014851687
Consumer Products & Services	238	12175978198
Education	74	1382508228
Energy	91	4119645361
Engineering	67	1596939323
Environmental Services	42	1043786786
Financial Services	263	17112305935
Food & Beverage	137	5120495888
Government Services	241	10917382078
Health	395	24568089214
Human Resources	185	12051532622
Insurance	89	5956740913
IT Services	599	15260863615
Logistics & Transportation	147	10471355276
Manufacturing	146	5999154297
Media	66	991738550
Real Estate	196	6279833306
Retail	168	7239445907
Security	67	7129747477
Software	324	5904691832
Telecommunications	86	3659299683
Travel & Hospitality	63	2609284722