Silly Pie Chart

Part of the video course: D3.js in Motion.

This pie chart shows the estimated number of adherents to various religions in 2010. The data is from the Pew Research Center Global Religious Landscape data set.

forked from curran's block: Pie Chart

<!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: 10pt;
        font-family: sans-serif;
      }
      .legend-label {
        fill: #635F5D;
        font-size: 20pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="1000"></svg>
    <script>
      const pieValue = d => d.totalDiagnosed;
      const colorValue = d => d.town;
      const colorLabel = 'Area';
      const margin = { left: 20, right: 400, top: -80, bottom: 500 };

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 / 3);

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

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

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

const row = d => {
        d.totalEnrolled = +d.TotalEnrolled;
        d.totalDiagnosed= +d.TotalDiagnosed;
        d.town=d.CityTown;
        return d;
      };

d3.csv('diabetes2015Label.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