Add a Pie Chart in dc.js

The following post is a portion of the D3 Tips and Tricks book which is free to download. To use this post in context, consider it with the others in the blog or just download the the book as a pdf / epub or mobi .

----------------------------------------------------------

The pie chart provides an useful way of presenting and filtering on discrete values or identifiers similar to a row chart.

The pie chart that we'll create will be a representation of which island the earthquakes occurred in. For those of you unfamiliar with the stunning landscape of New Zealand, there are two main islands creatively named North Island and South Island (stunning and practical!). The determination of what constitutes the North and South Island has been decided in a completely unscientific way (by me) by designating any area South of latitude -40.555907 and West of longitude 174.590607 as the South Island and anything else is the North Island.

The pie graph should end up looking a bit like this.

Good news! The pie chart shares the same cool feature as the row chart...

Click on one of the pie segments...

... and everything dynamically reflect the selection.

Just as with the previous chart examples chart, we'll work through adding the chart in the following stages.

1. Position the chart
2. Assign type
3. Dimension and Group
4. Configure chart parameters

Position the pie chart

We are going to position our pie chart above our data table (and below the line chart)in the same row as the row chart in one of the blank span4's.

The code that sets up that row should now look like this;

  <div class='row'>
    <div class='span4' id='dc-dayweek-chart'>
      <h4>Day of the Week</h4>
    </div>
    <div class='span4' id='dc-island-chart'>
      <h4>North or South Island</h4>
    </div>   
    <div class='span4' id='blank2'>
      <h4>Blank 2</h4>
    </div> 
  </div>

We've given it an ID selector of dc-island-chart. So when we we assign our chart that selector, it will automatically appear in that position. We've also put another simple title in place (<h4>North or South Island</h4>).

The last span4 is still blank.

Assign the pie chart type

Here we give our chart it's name (dayOfWeekChart), assign it with a dc.js chart type (in this case pieChart) and assign it to the ID selector (dc-dayweek-chart).

Under the row that assigns the dayOfWeekChart chart...

  var dayOfWeekChart = dc.rowChart("#dc-dayweek-chart");

... add in the equivalent for our pie chart.

  var islandChart = dc.pieChart("#dc-island-chart");

Dimension and group the pie chart data

We'll put the code between the dimension and group of the row chart and the data table dimension (this is just to try and keep the code in the same order as the graphs on the page).

When adding our dimension for our islands we want to provide an appropriate label so our code does the figuring out based on the latitude and longitude that we had established as the boundary between North and South.

  var islands = facts.dimension(function (d) {
    if (d.lat <= -40.555907 && d.long <= 174.590607)
      return "South";
    else
      return "North";
    });

This dimension (islands) uses the same facts data, but when we return our key values we are going to return them as either 'North' or 'South'. To do this we employ a simple if statement with a little logic. These are only the two 'slices' for our pie chart.

Then we want to group the data by using the default action of the .group() function to count the number of events of for each day of the week.

  var islandsGroup = islands.group();

Configure the pie chart parameters

There are fewer parameters that can be configured for pie charts, but we'll still take the time to go through the options used here.

This code should go just before the block that configures the dataTable (again, this is just to try and keep everything in the same order as the graphs on the page).

  islandChart.width(250)
    .height(220)
    .radius(100)
    .innerRadius(30)
    .dimension(islands)
    .group(islandsGroup)
    .title(function(d){return d.value;});

That should get the chart working. With the addition of this portion of the code, you should have a functioning visualization that can be filtered dynamically by clicking on the appropriate island in your pie chart. Just check to make sure that everything is working properly and we'll go through some of the configuration options to see what they do.

To start with, your page should look something like this;

The configuration options start by declaring the name of the chart (islandChart) and setting the height and width of the chart.

  islandChart.width(250)
    .height(220)

In the case of our example I have selected the width based on the default size for a span4 grid segment in bootstrap and adjusted the height to make it look suitable alongside the row chart.

Then we set up our inner and outer radii for our pie.

    .radius(100)
    .innerRadius(30)

This is fairly self explanatory, but by all means adjust away to make sure the chart suits your visualization.

Then we define which dimension and grouping we will use.

    .dimension(islands)
    .group(islandsGroup)

 For a pie chart, the `.dimension` declaration is the discrete values that make up each segment of the pie and the `.group` declaration is the size of the pie.

The final line in the configuration adds a tool tip to our pie chart using the value when the mouse hovers over the appropriate slice.

    .title(function(d){return d.value;});

The description above (and heaps of other stuff) is in the D3 Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).