D3.js Quick Start Guide

Generating an arc creating function

The paths have fill colors, but no shapes. If you'll recall, the <path> elements take a d= attribute, which determines how they're drawn. We want to set up something that will somehow map data to a d= string, such as the following code (you don't have to add the next code snippet; it's only there for reference):

.attr('d', function(datum){
    //return path string here
})

Fortunately, D3 can generate the anonymous function that we need for the second parameter of .attr() in the previous code snippet. Add the following to app.js, just before our previous code for var path = d3.select('g').selectAll('path')...:

var arc = d3.arc()
    .innerRadius(0) //to make this a donut graph, adjust this value
    .outerRadius