D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
        .arc text {
  font: 15px sans-serif;
  text-anchor: middle;
}
    .arc path {
  stroke: #fff;
}
  </style>
</head>
<body>
  <svg width="500" height="500"></svg>
  <script>
    const data = [
      { opt: 'Option A', votes: 10},
      { opt: 'Option B', votes: 32},
      { opt: 'Option C', votes: 10},
      { opt: 'Option D', votes: 17},
    ]
    const svg = d3.select('svg')
    const width = +svg.attr('width')
    const height = +svg.attr('height');
    const radius = Math.min(width, height) / 2;
    const g = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);
                         
    const color = d3.scaleOrdinal(d3.schemeCategory20);
    
    const pie = d3.pie()
        .sort(null)
        .value((d) => d.votes);
    
    const path = d3.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);
    
    const label = d3.arc()
        .outerRadius(radius - 40)
        .innerRadius(radius - 40);
    
    const arc = g.selectAll('.arc')
        .data(pie(data))
        .enter().append('g')
            .attr('class', 'arc');
    
   arc.append('path')
    .attr('d', path)
    .attr('fill', (d) => color(Math.random() * 20));
    
   arc.append('text')
        .attr('transform', d => `translate(${label.centroid(d)})`)
        .attr('dy', '0.35em')
        .text((d) => d.data.opt);
  </script>
</body>
​
    