D3.js Donut

by Gerardo Furtado

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<div id="chart"></div>

CSS

body {
			fill: #333333;
			font-size: 16px;
			text-align: center;
		}

JavaScript

////////////////////////////////////////////////////////////
          //////////////////////// Set-up ////////////////////////////
          ////////////////////////////////////////////////////////////

          var screenWidth = window.innerWidth;

          var margin = {left: 20, top: 20, right: 20, bottom: 20},
            width = Math.min(screenWidth, 500) - margin.left - margin.right,
            height = Math.min(screenWidth, 500) - margin.top - margin.bottom;
                
          var svg = d3.select("#chart").append("svg")
                .attr("width", (width + margin.left + margin.right))
                .attr("height", (height + margin.top + margin.bottom))
                .append("g").attr("class", "wrapper")
                .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

          ////////////////////////////////////////////////////////////// 
          ///////////////////// Data &  Scales ///////////////////////// 
          ////////////////////////////////////////////////////////////// 

          //Some random data
          var donutData = [
            {name: "firstArc", 	value: 16},
            {name: "secondArc", 		value: 9},
            {name: "thirdArc", 	value: 2},
            {name: "fourthArc", 	value: 62},
            {name: "fifthArc",	value: 23},
            {name: "sixthArc", 	value: 21}
          ];
            
          //Create a color scale
          var colorScale = d3.scale.linear()
            .domain([1,3.5,6])
            .range(["#2c7bb6", "#ffffbf", "#d7191c"])
            .interpolate(d3.interpolateHcl);

          //Create an arc function   
          var arc = d3.svg.arc()
            .innerRadius(width*0.75/2) 
            .outerRadius(width*0.75/2 + 30);

          //Turn the pie chart 90 degrees counter clockwise, so it starts at the left	
          var pie = d3.layout.pie()
            .startAngle(Math.PI/180)
            .endAngle(Math.PI/180 +...