Protovis Part 5: Swap external data

Tutorial: Protovis Part 5: Swap external data

Introduction

It’s time to use what we learned it the previous tutorials. In this Protovis tutorial, we’re going to change the bar chart that we made in the last tutorial into a line chart, swap external data files and build on the existing graphic. We’re also going to use an animation technique to make it easier for users to interact with small visual elements like lines.

By the time you’re done with this tutorial, you should have a deep enough understanding to customize your own visualizations. A written version of this tutorial will be available soon.

Example

This example loads stock price data of five tech companies and is viewable on modern browsers. This tutorial will walk you through the steps of making this graphic.

Tech stock prices from 2000 to 2010


Swapping External data files

In this Protovis tutorial, we’re going to change the bar chart that we made in the last tutorial into a line chart, swap external data files and build on the existing graphic. We’re also going to use an animation technique to make it easier for users to interact with small visual elements like lines.

Lets start with a copy of the animated bar chart. In the head area, change “carace” to “stocks”.

Open stocks.js. You can see that the structure is very similar to the carace file we used in the last exercise. Look at the values for each stock. notice that there are no decimals. We’ll address this later. And notice that the data variable has changed from “popbyrace” to “stocks”.
Return to textmate and find and replace popbyrace with stocks in all instances and scroll back to the top.

Changing the DataRange

Change the width to 620, the height to 400 and the leftMargin to 50.
Add a variable called bottomMargin and set the value to 50.

Change the dataRange value to 70700. This is really just $707 without the decimal.

Next we need to change yScale to xScale. Since we use this throughout our code lets perform another find and replace yScale with xScale in all instances then scroll back to the top.
Look for the range settings in the xScale value. Change height to width-100.

In the total variable, look for the range settings and change them to 0, height-bottomMargin-20.

And delete the bar width and gap variables since we no longer need them.

Delete the commas variable and change active bar to 122. Remember, 0 is the position in the array. 122 is the last position so the end of the line will be highlighted automatically.

Change the labelXpos value to 70 and the labelYpos value to 370.

Change the value of the source variable to "Source: Google Finance".

Lets change the name of our panel. Perform a find for race and replace all with techstocks then scroll back up.
In the mouse event change collapse "x" with collapse "Y".

Changing the Properties

Select the first block of code that we used to create labels and delete it. Then write a comment that says data lines.

Change pv.Bar to pv.Line

Change the top property to left and after the function, type leftMargin + Then delete the old left property.

Change the width property to bottom and after the function type bottomMargin +. Change d.White to d.APPL.

javascript+protovis

Change the value of height to height the add a new property called lineWidth and set the value to 2.

Add a property called strokeStyle and set the value to orange.

Lets add a dot to the line to indicate a data point. Type .add(pv.Dot)and then add the strokeStyle property and set it to null.

In the fillStyle function, change the colors to orange and transparent.
Add the size property and set the value to 10 pixels. Then delete all the anchor code.

Select all the code below down to just above the render function. Hit Command - / to comment all the labels. We'll use them later.

Now we can copy and paste this entire code block and edit it to add more lines. Change APPL to AMZN then change orange to black in both locations.

Repeat and change APPL to GOOG. Change orange to red in both locations.

Repeat and change APPL to IBM. Change orange to steelblue in both locations.

Repeat and change APPL to MSFT. Change orange to green in both locations.

Scroll down and select all the commented text. Hit Command - / to turn comments off then scroll back up to just above the first label.

Add a comment that says animated labels. In the text property, change County to Date and delete the extra text.

Now lets fix a mistake from earlier. In the text property, move bold in front of 11pt.

Changing your Labels

Now look at the second label. In the text property, change "Asian: " to "Amazon: $" then after the activeBar, change Asian to AMZN.

The time has come to deal with decimals because we want our labels to read as dollar amounts. This is easy to accomplish with basic math. Delete the word commas. Go to the closing parens after AMZN and type /100 to divide 100 and move the decimal over two places and you're set.

In the left property, add +10.

Because we have multiple lines, we need to create a key to tie each label to it's corresponding line. Put your cursor in front of the semicolon, hit return and type .add(pv.Dot). Add a strokeStyle with the value null. Add a fillStyle with the value black. Add a size property with the value of 10.

Copy the left and bottom properties and paste them after the size property. Change the left value to "+5" and the bottom value to "-13".

Now select the other labels with the exception of the source and delete them to see your label.

Again, we can copy and paste this entire code block and edit it to add more labels. Change AMZN to APPL, change the two bottom property values to -40 and -33 and change black to orange.

Repeat until your labels match what's shown here.

Creating a Parent Panel

Go down to the source label at the bottom of the code. There is some extra text that we no longer need since we added it to a variable at the top of the page. Delete the extra text that we already have in our source variable so that it looks like this:

Notice that when you mouse over your graphic the animation isn't smooth. That's because it only moves when the mouse is directly over a line. When your mouse moves off the line just a little bit the animation stops.

We're going to fix that by creating a parent panel to make the entire graphic react to the mouse. First scroll up to above the data lines and create a new comment that says gray line. Hit return and type techstocks.add(pv.Rule). Make sure to include the s at the end of techstocks.

Add a data property with the value stocks. Add a left property with the (function() leftMargin + xScale(this.index)). Add a bottom property with the value of bottomMargin. And add a linewidth property with a value of 5.

Finally, add a strokeStyle property with the value of (function() (activeBar == this.index) ? "#efefef" : "transparent");

Notice that we aren't adding an event here for the animation. Instead scroll all the way to the bottom. Above the render command, type a comment that says // animation panel. Hit return and type techstocks.add(pv.Panel).

Add an events property with the value all.
Now add an event listener with the value ("point", function() {activeBar = this.index; return techstocks;});

Now if you scroll you mouse over the graphic the bar is used to create a smooth animation. But the bar interferes with the label text. To fix this scroll back up and after the gray line code add a comment that reads white box behind labels. We have to put this here so that it is above the gray line but behind the data lines.

Hit return and type techstocks.add(pv.Bar)
Add a bottom property with the value labelYpos-140
Add a left property with the value labelXpos-20
Add a right property with the value width - labelXpos-150
And add a fillStyle with the value "white". Now when you mouse over the chart the white box covers the gray line.

Lets add some polish with tick lines and labels using the method from the second tutorial. Create a comment called tick lines then hit return and type techstocks.add(pv.Rule)
Add a data property with the value (pv.range(0, dataRange, 10000)).

Add a bottom property with the (function(d) d /(height+27) * 2 + bottomMargin)
Add a left property with the value of leftMargin - 5 and a right property with a value of 50.
add a strokeStyle of lightgray.

Hit return and type .add(pv.Label)
Add a text property with the value (function(d) "$" + ((d)/100))
Set the textAlign property to right
Set the textBaseline to middle
and set the textStyle to lightgray
Add a font property with the value "7pt sans-serif".

Fixing the code

Last but not least, lets add some date labels to the bottom of the chart. Add another comment that says date labels.
Hit return and type techstocks.add(pv.Labels).
Add a data property with the value pv.range( 2000, 2011, 1)).
Add a left property with the value function() this.index * (width-leftMargin)/11 + leftMargin).
Set textAlign to center.
Set bottom to (bottomMargin-20).
Set the font property to "7pt sans-serif".
And set text style to gray.

And there's your finished animated line chart template. One thing to notice. While we wrote a lot of code, many of the properties were similar to those we wrote in the first tutorials. Simple additions to those setting allowed us to make some sophisticated templates that can be reused quickly. I hope this has been a good introduction to Protovis and if you implement any of these graphics, let us know. We would love to hear from you.

Here is the complete code:

About this Tutorial

This tutorial was produced as a presentation for the Knight Digital Media Center's Interactive Census Workshop at the  Berkeley Graduate School of Journalism.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.