- Part 1: Let’s Make a Pie Chart with D3.js
- Part 2: Let’s Update a Pie Chart in Realtime with D3.js (this post)
- Part 3: Smooth Pie Chart Transitions with D3.js
Last week we made a pie chart with D3.js. Today we are going to update it in realtime when buttons are clicked.
Here is the basic pie chart again, slightly modified from the original (I only changed the letters):
The key to making this work is D3’s object constancy. We already baked that into the original design by specifying a key function for the underlying presses count data.
First, we need to copy the pie chart we made last week. Make a few updates: change all the
data to 1 and change the letters to A, B, and C.
Next, we need something to click so we can increment the count and update the chart. Three buttons will do nicely:
Recomputing the angles
We ultimately want to call a specific update function when we click each button, so let’s write one. We need to consider what the most critical parts of making the original pie chart were so that we can recreate only the necessary steps:
- Defining the value function for
- Computing the angles based on that data
- Putting that information in a path so it can be displayed
Remember that we have two arcs: The main pie and the one holding the labels. We need to update both!
Updating the data and chart on click
Now we need to update the underlying data and the whole chart on click:
Here is the result. Click the buttons and watch the chart change!
Up next: Smooth transitions with d3.interpolate.