<h2 class="bx--graph-header">Pie Chart</h2>
<div class="graph-container">
	<svg></svg>
	<div class="tooltip">
    <p class="amount"></p>
    <p class="item"></p>
    
	</div>
</div>
body {
	padding: 1rem 3%;
  background-color: #fff;
}

.bx--graph-header {
	font-weight: 300;
	font-size: 24px;
}

.graph-container {
  display: inline-block;
	position: relative;
}

.tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  width: 100%;
  
  p {
    text-align: center;
  }
  
  .amount {
    font-size: 29px;
    line-height: 1;
    font-weight: 300;

  }
  
  .item {
    font-weight: 400;
    font-size: 14px;
    color: #5A6872;
  }
}
View Compiled
const data = [
  ['Gryffindor', 23],
  ['Slytherin', 12],
  ['Ravenclaw', 19],
  ['Hufflepuff', 15],
  ['Teachers', 5]
];

const radius = 96;
const width = radius * 2;
const height = radius * 2;


const svg = d3.select('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('class', 'group-container')
	.attr('transform', `translate(${width / 2}, ${height / 2})`);

const color = d3.scaleOrdinal(['#3b1a40', '#473793', '#3c6df0', '#00a68f', '#56D2BB']);

const pie = d3.pie()
  .sort(null)
  .value((d) => d[1]);

const path = d3.arc()
  .outerRadius(radius - 10)
  .innerRadius(radius - 40);

const pathTwo = d3.arc()
  .outerRadius(radius)
  .innerRadius(radius - 40);

const arc = svg.selectAll('.arc')
  .data(pie(data))
  .enter().append('g')
  .attr('class', 'arc')

arc.append('path')
  .attr('d', path)
  .attr('fill', (d, i) => color(i))
  .attr('stroke-width', 2)
  .attr('stroke', '#FFFFFF')
  .on('mouseover', function(d) {
    d3.select(this)
      .transition()
      .style('cursor', 'pointer')
      .attr('d', pathTwo);
  
    const tooltip = d3.select('.tooltip')
      .style('display', 'inherit');
  
    const amount = d3.select('.amount');
    const item = d3.select('.item');
  
    amount
      .text(`${d.data[1]}`);
  
    item
      .text(`${d.data[0]}`);
  })
  .on('mouseout', function(d) {
    const tooltip = d3.select('.tooltip')
      .style('display', 'none')
  
    d3.select(this)
      .transition()
      .attr('d', path);
  });
View Compiled

External CSS

  1. https://unpkg.com/carbon-components@latest/css/carbon-components.css

External JavaScript

  1. https://unpkg.com/carbon-components@latest/scripts/carbon-components.js
  2. https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js