Old school D3 from simpler times

All examples By author By category About

Jamestiberiuseanes

Full window Github gist

VI4 - Magnitude as Area

James Eanes - VI4 - Magnitude as Area.

This pie chart gives an example of magnitude as area. The pie chart code was taken from Zero Viscosity's example (http://zeroviscosity.com/d3-js-step-by-step/step-1-a-basic-pie-chart). The data is a subset of the passing yards data from week 3.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VI4 - Magnitude as Area</title>
  </head>
  <body>
    <div id="chart"></div>
    <script

src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>
      (function(d3) {
        'use strict';
        var dataset = [
          { label: 'Marcus Mariota', count: 3773 }, 
          { label: 'Connor Cook', count: 2900 },
          { label: 'Brandon Doughty', count: 4344 },
          { label: 'Patrick Mahomes', count: 1547 }
        ];
        var width = 360;
        var height = 360;
        var radius = Math.min(width, height) / 2;
        var color = d3.scale.category20b();
        var svg = d3.select('#chart')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('transform', 'translate(' + (width / 2) + 
            ',' + (height / 2) + ')');
        var arc = d3.svg.arc()
          .outerRadius(radius);
        var pie = d3.layout.pie()
          .value(function(d) { return d.count; })
          .sort(null);
        var path = svg.selectAll('path')
          .data(pie(dataset))
          .enter()
          .append('path')
          .attr('d', arc)
          .attr('fill', function(d, i) { 
            return color(d.data.label);
          });
      })(window.d3);
    </script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VI4 - Magnitude as Area</title>
  </head>
  <body>
    <div id="chart"></div>
    <script 
​
src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>
      (function(d3) {
        'use strict';
        var dataset = [
          { label: 'Marcus Mariota', count: 3773 }, 
          { label: 'Connor Cook', count: 2900 },
          { label: 'Brandon Doughty', count: 4344 },
          { label: 'Patrick Mahomes', count: 1547 }
        ];
        var width = 360;
        var height = 360;
        var radius = Math.min(width, height) / 2;
        var color = d3.scale.category20b();
        var svg = d3.select('#chart')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('transform', 'translate(' + (width / 2) + 
            ',' + (height / 2) + ')');
        var arc = d3.svg.arc()
          .outerRadius(radius);
        var pie = d3.layout.pie()
          .value(function(d) { return d.count; })
          .sort(null);
        var path = svg.selectAll('path')
          .data(pie(dataset))
          .enter()
          .append('path')
          .attr('d', arc)
          .attr('fill', function(d, i) { 
            return color(d.data.label);
          });
      })(window.d3);
    </script>
  </body>
</html>
    