Learning by Doing

Sometimes you just want to throw some data up on the web real quick, and you don’t want to mess around with installing any database or writing any code to display it.

Exhibit is your go-to tool. To use Exhibit, all you need is to have javascript enabled in your browser and someplace to put your data files.

1. Open your spreadsheet and copy the data to the clipboard.

Make sure you have a header row, no spaces in column headings, and the first column is headed “label” as per the Exhibit instructions.

2. Paste your data into the Babel converter.

Select Tab-separated values as your “From:” format(not Excel, unless you’re uploading a file to convert), select JSON as your “To:” format, and then the “the data is text I can paste into this web page” radio button under the “data to convert” column, then paste into the text box and hit the “Upload and Preview” button. If your data is in the right format, you should see it converted into JSON in the resulting window. If you get just a download and copy button, but no display of your code, it’s either not in the right format or too big to preview. In that case, select the “text/plain” radio button in the “Result’s mime-type:” section, then hit the “Upload and Convert” button. You should see the converted data in the resulting window.

3. Paste the converted data into a file with a .js extension

Copy the converted datato the clipboard, then create a new file using a text editor(not MS Word), paste the data into it, and give it whatever name you want, and an extension of .js

4. Include Exhibit in your webpage.

There’s template HTML on the Exhibit Tutorial page, so you don’t have to write anything. Just take their nobelist.html example and change the “link rel=” in the HEAD section to your .js file name.

5. Add filtering and sorting

For each column in your data you want to be able to filter by, add the following statement to the file in the table in the body section:
<div ex:role="facet" ex:expression=".labelofyourcolumnwithnospaces" ex:facetLabel="Label Of Your Column"></div>

6. Upload your .js file to the same directory as the html file that references it
7. Load you page in the browser and see how it looks!

Converting data on the fly

You can also convert your data “on the fly” by sending the Excel file through the Babel converter each time the page is loaded. This slows things down significantly, so it’s better to make the .js, but if you want to do that, replace the link statement in the head of the html file with
<link rel="exhibit/data" type="application/msexcel"
href="http://URL.of.your.datafile" />

Dates and Excel

EDIT: This is now fixed

For some reason, Excel always wants a date to be a number, and you have to jump through some hoops to get it to display as a proper date. What you have to do is to convert it into text through the use of a formula, not through the use of the menu command. Go to a column next to your data and type
=If(cellthatcontainsyourdate>0,Text(cellthatcontainsyourdate, "mm/dd/yyyy")," ").
This will output the date as a text value in the cell in which you enter the formula or leave it blank if there’s no date in the referenced cell. Without the If statement, you’ll get 01/01/1900 for any date you left out. Then paste the data into a new spreadsheet, leaving out the original columns containing the dates, and making sure to do a Paste>Special>Values so that the contents of the cells, and not the formulas, get pasted. Now copy the new spreadsheet and paste it into Babel.

Here’s some instructions on how to use a Google Spreadsheet as a data source, which is a nice way to share your Google Docs with someone who doesn’t have a Google account.