protovis part 3: variables and animation

Update the chart

Now we're ready to edit the wedge code.

Replace the width value of 150 with the variable w and the height value of 150 with the variable h. Then in the data property, replace the entire value with the variable data. Don't worry that the preview has changed. We'll fix that in a moment.

Next, replace the left value of 75 with w/2 and replace the bottom value with h/2. This is the same basic math we used to set the r variable.

Since this has already been done for the r variable we can simply replace the outerRadius value of 75 with r

We also have to fix the angle of our wedges. to do this, we simply have to change d to d / sum.

Now notice that if you change the w and h variables to 200, the entire graphic scales proportionately.

Be sure to change them back to 150 to follow along.

Finally, select the array of colors in the fillStyle property and replace it with the variable colors.