protovis part 4: external data and animated labels

Using JSON data

Now lets look at our data. Open carace.js. What you are looking at is a JSON file. JSON stands for JavaScript Object Notation. It's similar to XML but it's simpler and results in a smaller file.

JSON is a very common file format. The easiest way to create this type of file is to export a comma separated value file or CSV from a spreadsheet. Then you can open the file into a text editor and paste it into a free CSV to JSON converter on the web.

Look at the first block of data. If you were starting with a spreadsheet, the row of column headers appears here as the labels on the left and followed by a colon. To the right of the colon is the corresponding data in the first spreadsheet row. This is placed inside curly brackets and forms an element in what will be your data array.

The second element consists of the same column headers and the second row of corresponding data.

This continues until every row in your spreadsheet is an element and they are all separated by commas.

Square brackets are put around all the elements to make it into an array and the array is made equal to the variable popbyrace. Using external data has two obvious benefits. First, it simplifies the code , making it easier to work with. Second, the data can be updated without having to rework the code on a page.

Go back to TextMate and replace the data value with popbyrace.