protovis part 5: swap external data

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.

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.