D3.js Step by Step: Step 1 - A Basic Pie Chart

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>D3.js Step by Step: Step 1 - A Basic Pie Chart</title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet" data-semver="3.0.1" data-require="normalize@*" />
  
  
  <style>
    #chart-box{outline:1px dotted #000;
      
      
      width:100%; height:300px; 
      position:relative;
    }
    
    #chartA,#chartB{
      
      
      
      position:absolute;
    }
    #chartB{right:0;}
    
    
    
  </style>
  </head>

  <body>
    <div id="chart-box">
      
      <div id="chartA"></div>
      <div id="chartB"></div>
    </div>
    <script data-require="d3@*" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
    <script>
      (function(d3) {
        'use strict';
        var width = 360;
        var height = 360;
        var radius = Math.min(width, height) / 2;

        var datasetA = [
          { label: 'Politician A', count: 10 }
        ];


        var colorA = d3.scale.category20b();

        var svgA = d3.select('#chartA')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('transform', 'translate(' + (width / 2) + 
            ',' + (height / 2) + ')');

        var arcA = d3.svg.arc()
          .outerRadius(radius);

        var pie = d3.layout.pie()
          .value(function(d) { return d.count; })
          .sort(null);

        var pathA = svgA.selectAll('path')
          .data(pie(datasetA))
          .enter()
          .append('path')
          .attr('d', arcA)
          .attr('fill', function(d, i) { 
            return colorA(d.data.label);
          });



        var datasetB = [
          { label: 'Politician B', count: 100 }
        ];

        var colorB = d3.scale.category20();

        var svgB = d3.select('#chartB')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('transform', 'translate(' + (width / 2) + 
            ',' + (height / 2) + ')');

        var arcB = d3.svg.arc()
          .outerRadius(radius);

        var pieB = d3.layout.pie()
          .value(function(dB) { return dB.count; })
          .sort(null);

        var pathB = svgB.selectAll('path')
          .data(pieB(datasetB))
          .enter()
          .append('path')
          .attr('d', arcB)
          .attr('fill', function(dB, i) { 
            return colorB(dB.data.label);
          });

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

Learn more at: http://zeroviscosity.com/category/d3-js-step-by-step