protovis part 4: external data and animated labels

OK. That's a good, useful chart. But there is a lot of data driving this graphic that the user doesn't get to see. Let's change that with some animated labels.

Create a new variable named labelXpos and set the value at 200. Create another variable named labelYpos with the value of 400. We'll use these to position our labels in the panel.

Create a third variable named source and make it equal to US Census in quotes.

Scroll down to the bottom of the page. Above the render command, type race.add(pv.Label)

On the next line type .text (function(d) popbyrace[activeBar].County + " County") We're telling the program to find the active element in the array popbycounty and show the county label data. We then tell it to add the word county on the end. This last bit is called concatenation and is extremely useful, as you will see.

Next, Set the left property to labelXpos and set the bottom property to labelYpos. Set the font to bold 11pt san-serif.

We can see the label is getting cut off. Go up to the labelXpos variable and set the value to 150 to move it over.

So why have this in two places? You are about to find out. Scroll back down and add another label. Type race.add(pv.Label) then write .text( function (d) ("Asian: " + commas(popbyrace[activeBar].Asian))). Set the left property to labelXpos. Set the bottom property to labelYpos - 20 to shift the label down. Now if labelYpos changes both labels will move together. This makes it easy to fine tune a chart when you use a different data set. Set the font to 9pt sans-serif to style the label.

Now, copy the entire asian label code and paste copy directly below it. In the text property, change the word Asian to Black in both places. Change the bottom property to -40. Now you have the black populations for each county as well.

Repeat with all the other categories until they look like those shown here.