Blog RSS Feed

Archive for the ‘Labs’ Category

New in Labs: Bible Translation Personas

Tuesday, September 1st, 2009

The new Bible Translation Personas experiment uses Aaron Zinman’s Personas project to scrape the web for mentions of Bible translations and then assigns a list of categories to each one, ultimately resulting in a colored strip that supposedly provides insight into the translation. As other commenters have noted, the animation process is more interesting than the result. In the case of Bibles, I’m not sure the result reveals much of interest.

Visit Bible Translation Personas

New Feature: Bible Sentence Paths

Tuesday, April 22nd, 2008

Try Bible Sentence Paths. This project maps all the words and sentences in the Bible and even sprinkles in some metadata.

Here’s what the Bible looks like when mapped in this way:
Try Sentence Paths


Here’s the idea:

  1. Start facing right with the first sentence in the Bible.
  2. Count the number of words in the sentence.
  3. Get metadata for each word—is it part of a quotation? Is it a proper name?
  4. Draw a line in the current direction, one pixel per word. Color-code each pixel based on the metadata.
  5. Turn 90 degrees clockwise—if you’re facing right, face down. If you’re facing down, face left. (Etc.)
  6. Move to the next sentence.
  7. Repeat steps 2-6 until you reach the end of the Bible.

You end up with a “map” showing sentence length and metadata.

Here’s a detailed image of Job showing speeches by God sandwiching speeches by Job and others. Speeches by God are in red; everyone else’s speeches are in blue. The book starts in the lower left and ends in the upper right.


Being able to zoom in and see the color-coded words would be a huge improvement and make this visualization more useful. I’d like to be able to hover over a specific line and read the color-coded Bible text.

Being able to browse and search the text (“Show me John 3:16”), highlighting just the relevant sections, would also be an improvement.

The drawing has lots of overlap, making it hard to draw conclusions. It’s pretty, but not too useful.

The drawing uses the ESV text as the base, since that’s what I have available; other Bible versions would probably show different patterns. It would be interesting to compare Bible versions.


Stefanie Posavec recently created a number of visualizations of Jack Kerouac’s On the Road, one of which inspired this project. Stefanie color-coded each sentence from the book and mapped them out a formula similar to the one I used. Needless to say, Stefanie’s visualizations are much more impressive than mine.

New Feature: Bible Verse Photo Composites

Monday, February 4th, 2008

Try Bible Verse Photo Composites. Move your mouse over the image to see a photo composite for a particular verse, and click to see composites for the words in that verse.

An example:
Genesis 1:1 shows images over the words “beginning,” “God,” “created,” “heavens,” and “earth.”

Here’s the idea: Use the Flickr API to find photos matching each of the words in the Bible. Then download the photos for each word and layer them on top of each other to produce a composite image for word. Once you do that, layer the important words from each verse on top of each other to produce a composite image for each verse.

Then put all the verses together in sequence to create the orangeish image you see above. About 300,000 images comprising 13,000 words make up the image. Each verse occupies about six pixels.

Technical Background

For layering the photos, I wanted the brightest (most-saturated) colors possible; I used a simple formula. It finds the difference between the brightest and darkest channels in a particular pixel. The brighter colors will tend have bigger differences.

function weight_pixel($pixel)
$rgb = array(( $pixel >> 16 ) & 0xFF, ( $pixel >> 8 ) & 0xFF, $pixel & 0xFF);
sort($rgb, SORT_NUMERIC);
return $rgb[2] - $rgb[0];

This formula differs from the usual conversion formula from RGB to HSL. I didn’t like the results of the RGB-HSL formula as much; the images were slightly darker.

Then I placed the darkest pixels on the bottom layer of the composite image, layering brighter (but about 50% transparent) pixels on top. The results for each word resemble abstract art:

11 (11) begrudge (begrudge) liquid (liquid) sharp (sharp) waterfalls (waterfalls)

I did a similar procedure to produce verse composites, layering the important words from each verse on top of each other. The results are generally less spectacular (in my opinion) than the word composites, as many of the verses look like each other. I’d like to explore other compositing algorithms to try to differentiate the verses more. (Feel free to leave a comment if you have any suggestions for an algorithm!)

Gen 1:2 (Gen 1:2) Josh 3:10 (Josh 3:10) Matt 5:4 (Matt 5:4)

The hardest part was the waiting. It took a long time to download the 300,000 images, and nearly as long to process them all. Plus, it takes a while to upload half a gigabyte of data after processing the images.

The verses composites omit images for about 200 common words (as listed in the Crossway Comprehensive Concordance of the ESV). I didn’t want common words to overwhelm the important ones.

From a coding standpoint, this project let me try out the jQuery Javascript library, which I’ve been wanting to do for some time.

Future Directions

Well, the result is awfully orange. As I said above, I would’ve liked to see some more differentiation. (I tried a few different formulas but didn’t come up with anything that works much better.) You can see some bands that are more orange than others, but I’m not sure how significant they are.

It would be interesting to try to calculate cross-references based on the similarity of the verse composites—are verses that look alike actually similar?

Any work of literature would lend itself to this kind of project. Project Gutenberg has lots of public-domain e-texts available. It would be interesting to compare the composite footprint of, say, Moby Dick to the Bible’s.


The inspiration for this project comes from the 80 Million Tiny Images project by Antonio Torralba, Rob Fergus, and William T. Freeman at MIT. They created a map of nouns in the English language by downloading images from search engines, combining the images, and then arranging them into a graphic based on the words’ semantic distance from each other. Fascinating stuff. Via ReadWriteWeb.

New Tool: Bible Word Locator

Monday, September 3rd, 2007

Try it out.


See ‘said.’
All the occurrences of the word said in the Bible. Note the narrative bands in Genesis, the Old Testament history books, and the gospels.

See ‘father’ and ‘son.’
Occurrences of the words father and son. Clusters in Chronicles and a couple of places in the New Testament show where to find the genealogies.

See ‘Moses,’ ‘David,’ and ‘Jesus.’
Occurrences of the words Moses, David, and Jesus. It’s easy to tell where the main stories about each person are.


Part of the Similar Diversity work includes a visualization of the word you in various holy books. This visualization provided me the impetus to produce something more interactive for the Bible.

How It Works

First, I counted the number of words in the ESV Bible (767,847, including headings but excluding footnotes, if you’re interested).

Next I assigned each word in the Bible a unique, incremented number. Then it was just a matter of going through the positions and grouping them by word. The result is a database table with two columns: word (varchar(18)) and positions (mediumtext). The positions column consists of a space-separated string of numbers.

When you enter a search query, the program finds the positions of words matching your query and then plots those positions on a chart. (The chart is 1/4 the size it would be if each word position got one pixel; it would have to be 1,083×709 pixels at a one-pixel-per-word ratio.)

The Code

The code is in PHP, using the GD library. I decided this project would be a good time to try out the SQLite database that comes with PHP instead of going with MySQL. I have no complaints, though Perl creates incompatible tables with current PHP versions (5.2.4) unless you use PDO in PHP to access the tables. It worked fine after a bit of Googling revealed the workaround.


Since the chart is 1/4 full-size, each pixel represents four words, and each dot occupies nine pixels. Given the coarse resolution, it’s best to use the locator to identify trends and then switch to the Bible text for further analysis.

It doesn’t do exact matches, only beginning-of-word matches. Only want to search for Eve, omitting results for evening? You’re out of luck.

It would be interesting to be able to click a dot and see the context of each occurrence.

Introducing Labs

Launching this tool gives me an excuse to launch the new Labs section of this site, which houses small, one-off experiments like this one and the Chapter Browser.

Experimental Interface for Browsing Chapters in the Bible

Thursday, August 23rd, 2007

Try it out. (It works best in Firefox with at least a 1000-pixel-wide screen.)


A grid of Bible books divided into columns and rows.
A half-size (non-interactive) image of the interface.

A closeup of the mouse cursor hovering over Psalms, with the title of Psalm 23 appearing below.
Hovering toward the left side of the Psalms shows you the title of Psalm 23.

A closeup of the mouse cursor hovering over Psalms, with the title of Psalm 121 appearing below.
Hovering toward the right of the Psalms shows you the title of Psalm 121.


One challenge of developing a hierarchical Bible interface (going from books to chapters to verses) is the sheer number of options: 66 books = 1189 chapters = over 30,000 verses. Obviously you’re not going to show someone 30,000 (or even 1189) choices all at once; you need to prune the display somehow.

Often the approach taken by Bible interface designers is to divide the Bible into testaments (Old and New), then books, and finally chapters. This screenshot of the NET Bible iPhone application is typical of this approach:

The Old Testament and New Testament appear as options on the iPhone, with arrows indicating to tap to browse further in the hierarchy.
Tapping either the “Old Testament” or “New Testament” option leads to a list of books in that Testament, which leads to a list of chapters in each book, which leads to the text of the chapter. (This image comes from the blog This Lamp, where Rick Mansfield has the enviable job of reviewing Bible iPhone applications.)

One limitation with this approach is that the design has to accommodate the wide range of chapter counts in the Bible—from single-chapter books to the 150 Psalms. This variety makes certain kinds of interfaces hard to use. The NET approach above scales pretty well, though I wouldn’t look forward to all the scrolling needed to reach Psalm 150.

There’s nothing inherently wrong with this approach, however, especially if you think hierarchically. But I’m always eager to explore alternative interfaces that simplify things for at least some people.

Before I get into the specifics, I want to acknowledge an Ajaxian article on the .Mac Web Gallery as the inspiration for this interface.

How It Works

My goals with this project were:

  1. Expose the book/chapter hierarchy in the Bible without creating a deep hierarchical interface.
  2. Provide more information than simply the chapter numbers for each book.

The result is a 1000×479-pixel grid. Books appear in color-coded columns based roughly on genre. Similar books (e.g., 1 and 2 Samuel) appear next to each other to minimize the vertical space required for the display.

The size of each book’s rectangle generally corresponds to the book’s length. The New Testament takes up about three times as much space as it should when compared with the Old Testament. A New Testament at the same scale as the Old would be too small to be workable. People tend to read the New Testament more than the Old, anyway, so it probably makes sense to enlarge it, though perhaps not as much as I’ve done here.

Behind the scenes, a script vertically divides each box into the number of chapters in the book. Genesis, for example, has fifty vertical slices, one for each of its fifty chapters. Hovering over one of these slices shows all the headings contained in that chapter. Moving to the left shows you the headings for the previous chapter, while moving to the right shows the headings for the next one. Clicking a slice takes you to that chapter in the ESV Bible.

This interface lets you discover a lot of information with minimal effort:

  • The order of the books in the Bible.
  • Genre groupings.
  • The rough size of each book compared with other books.
  • The number of chapters in each book.
  • The subjects of each chapter.
  • An overview of a book’s subjects if you flip through the book quickly.
  • The text of the chapter if you click.

The Code

Concerning the code and markup, the page is valid XHTML 1.0 Strict, with a preponderance of ids as hooks for the Javascript but otherwise pretty clean. The Javascript is unobtrusive, so someone without Javascript can still get to the first chapter of each book. (A page with truly accessible fallbacks would place all the chapter headings in the HTML and use a script to hide them and then show them on demand, however.) All the chapter headings appear in the code; I figured AJAX calls would be too slow to give the instant feedback the application needs.

The application uses the base2 Javascript library to iron out some of the differences between browsers. I like this library because it doesn’t do things for you the way some frameworks do, but it removes a lot of the headaches for developing cross-browser applications (attachEvent vs. addEventListener, anyone?).


It requires some precise mouse coordination to get to a specific chapter. It’s not great for people who have poor mouse control or who are using a low-quality mouse. It might make sense to expand the horizontal area allotted to each chapter.

There’s no reason the books have to be in a grid; it would work fine if they were sequential. You could then precisely allocate the width for each book based on the number of chapters it contains.

You could show more than just the headings in the chapter—you might show the first part of the chapter, pick out a few key verses, or even attempt to show the complete text of the chapter in the popup.

I’m not crazy about all the different colors. It’s not bad for demonstration purposes, but I’d probably choose a more-restrained palette in a production environment.

It probably doesn’t work right in Opera, Safari, and IE6 and below. It also won’t work on an iPhone since iPhones don’t send the necessary JavaScript events. It probably wouldn’t work that well as-is on an iPhone anyway; it requires too much precision. Indeed, the straight hierarchical interface model might be best for an iPhone.

The URL in the status bar doesn’t change when you hover over different chapters in the same book. It’s not a big deal, but it’s irksome.


I hope you find the interface useful (or at least intriguing) and that it inspires you to create a Bible-browsing interface of your own. Leave a comment and a link if you do—it’s always fun to see new ways of looking at the Bible. (Creating a mockup, a low-fidelity prototype, or even just a word picture is a great way to test ideas; you don’t need to develop a full-fledged application to show off your concept.) Comments on this application are of course welcome, too.