donut chart with tooltip and legend

forked from anonymous's block: gauge with gradient

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .tooltip {
      background-color: rgba(0,0,0,0.75);
      padding: 15px;
      border-radius: 2px;
      font-family: sans-serif;
      color: white;
      pointer-events: none;
      box-shadow: 0 0 5px #999999;
    }
    
    .chart-svg {
      border: 1px solid #ddd;
    }
    
    .chart-legend {
      font-family: 'Open Sans', sans-serif;
    }
  </style>
</head>

<body>
  <script>
		class Gauge {
			constructor(options) {
				this.options = options;
       
				var {data, width, height, element} = this.options;
       
				const svg = d3.select(element)
					.append('svg')
        	.attr('class', 'chart-svg')
        	.attr('width', width)
        	.attr('height', height)
        ;
        
        this.tooltip = d3.select(element)
          .append('div')
        	.attr('class', 'tooltip')
        	.style('display', 'none')
        ;
        
        const color = d3.scaleOrdinal(d3.schemeCategory20c)
       	;
        
        const r = Math.min(width, height) / 3;
        const arc = d3.arc()
        	.innerRadius(r - 60)
        	.outerRadius(r)
        ;
        
        const pie = d3.pie()
        	.value(d => d.value)
        ;
        
        const g = svg.append('g')
        	.attr('transform', `translate(${width/2},${height/2})`)
        ;
        
        g.selectAll('.chart-arc')
        	.data(pie(data))
        	.enter()
        	.append('path')
        	.attr('class', 'chart-arc')
        	.attr('d', arc)
        	.style('fill', d => color(d.data.label))
        	.on('mouseover', this.mouseover.bind(this))
        	.on('mousemove', this.mousemove.bind(this))
        	.on('mouseout', this.mouseout.bind(this))
        ;
        
        const l = svg.append('g')
        	.attr('transform', `translate(0,${height-20})`);
        ;
        
        const xl = d3.scaleBand()
        	.range([0, width])
        	.padding(0.3)
        	.domain(data.map(d => d.label))
        ;

const legend = l.selectAll('.chart-legend')
        	.data(color.domain())
        	.enter()
        	.append('g')
        	.attr('class', 'chart-legend')
        	.attr('transform', (d, i) => `translate(${xl(d)},0)`)
        ;

legend.append('rect')
        	.attr('width', 12)
        	.attr('height', 12)
        	.style('fill', color)
        ;
        
        legend.append('text')
        	.attr('x', 20)
        	.attr('y', 10)
        	.text(d => d)
        ;
			}

mouseover() {
        this.tooltip
          .style('display', 'inline-block')
        	.style('position', 'absolute')
        ;
      }
      
      mousemove() {
        this.tooltip
        	.text([d3.event.pageX, d3.event.pageY].join(','))
        	.style('left', d3.event.pageX + 10 + "px")
        	.style('top', d3.event.pageY + 10 + "px")
        ;
      }
      
      mouseout() {
        this.tooltip
        	.style('display', 'none')
        ;
      }
      
      render() {
        // move rendering logic down here
      }
    }

new Gauge({
      element: 'body',
      width: 600,
      height: 400,
      data: [
        {value: 37, label: 'green'},
        {value: 63, label: 'maroon'},
        {value: 12, label: 'white'},
        {value: 97, label: 'heck'}
      ]
    });
    
  </script>
</body>

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