Distribution of earnings for City of Boston Employees in 2016

This pie chart shows the distribution of earnings for City of Boston Employees for calendar year 2016.

This pie chart was forked from curran's block: Pie Chart.This data is from City of Boston.gov: Data Boston (scaled down to 7790 rows).

Built with blockbuilder.org

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Pie Chart</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .legendCells text {
        fill: #8E8883;
        font-size: 20pt;
        font-family: sans-serif;
      }
      .legend-label {
        fill: #635F5D;
        font-size: 40pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const pieValue = d => d.Number;
      const colorValue = d => d.Rank;
      const colorLabel = 'Salary';
      const margin = { left: 20, right: 400, top: 1, bottom: 1 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

const pie = d3.pie().value(pieValue);
      const arc = d3.arc()
        .innerRadius(0)
        .outerRadius(innerHeight / 2);

colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -15)
          .attr('y', -40)
          .text(colorLabel);

const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);

const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');

const row = d => {
        d.population = +d.population;
        return d;
      };

d3.csv('dataset1_1.csv', row, data => {
        colorScale.domain(data.map(colorValue));

const arcs = pie(data);

pieG.selectAll('path').data(arcs)
          .enter().append('path')
            .attr('d', arc)
            .attr('fill', d => colorScale(colorValue(d.data)));

colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
      });
    </script>
  </body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js