D3 donut chart

from tutorial http://zeroviscosity.com/category/d3-js-step-by-step

by Felipe Alfaro

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<body>
     <h1>Toronto Parking Tickets by Weekday in 2012</h1> 
    <div id="chart"></div>
</body>

CSS

#chart {
     height: 360px;
     margin: 0 auto;
     /* NEW */
     position: relative;
     width: 360px;
 }
 .tooltip {
     background: #eee;
     box-shadow: 0 0 5px #999999;
     color: #333;
     display: none;
     font-size: 12px;
     left: 130px;
     padding: 10px;
     position: absolute;
     text-align: center;
     top: 95px;
     width: 80px;
     z-index: 10;
 }
 .legend {
     font-size: 12px;
 }
 rect {
     cursor: pointer;
     /* NEW */
     stroke-width: 2;
 }
 rect.disabled {
     /* NEW */
     fill: transparent !important;
     /* NEW */
 }
 /* NEW */
 h1 {
     /* NEW */
     font-size: 14px;
     /* NEW */
     text-align: center;
     /* NEW */
 }

JavaScript

const height = Math.min(500, width / 2);
  const outerRadius = height / 2 - 10;
  const innerRadius = outerRadius * 0.75;
  const tau = 2 * Math.PI;
  const color = d3.scaleOrdinal(d3.schemeObservable10);