Donut Chart

<!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>Distribución de matrícula por sala en la región 1</h1>
  
<style>
  .legend {
    font-size: 13px;
  }
  h1 {
  font-size: 15px;
  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 = [
          {sala: "Lactantes", value: 74},
      		{sala: "Deambuladores", value: 85},
      		{sala: "2 años", value: 840},
     		  {sala: "Primera sección", value: 4579},   
    		  {sala: "Segunda sección", value: 5472},
     		  {sala: "Tercera sección", value: 7321},
        ];

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

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

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.value; })
          .sort(null);

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

</html>

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