{"id":444,"date":"2011-04-16T21:24:49","date_gmt":"2011-04-17T01:24:49","guid":{"rendered":"http:\/\/www.openbible.info\/blog\/?p=444"},"modified":"2016-01-31T20:53:34","modified_gmt":"2016-02-01T00:53:34","slug":"holy-week-timeline-behind-the-music","status":"publish","type":"post","link":"https:\/\/www.openbible.info\/blog\/2011\/04\/holy-week-timeline-behind-the-music\/","title":{"rendered":"Holy Week Timeline: Behind the Music"},"content":{"rendered":"

It\u2019s always fun for me to learn the process people use to create visualizations, and especially why they made the decisions they did. So please forgive me if you find this post self-indulgent; I\u2019m going to talk about the new Holy Week Timeline<\/a> that\u2019s on the Bible Gateway blog:<\/p>\n

\"Holy<\/a><\/p>\n

The idea for this visualization started in November 2009 when xkcd published its movie narrative charts<\/a> comic, which bubbled up through the Internet and shortly thereafter became a meme<\/a>. Although the charts are really just setting up a joke for the last two panels in the comic, they\u2019re also a fantastic way of visualizing narratives, providing a quick way to see what\u2019s going on in a story at any point in time. The format also forces you to consider what\u2019s happening offstage\u2014it\u2019s not like the other characters cease to exist just because you\u2019re not seeing them and hearing about them.<\/p>\n

My first thought was to plot the book of Acts this way, but Acts presented too broad a scope to manage in a reasonable timeframe. Holy Week then came to mind\u2014it involves a limited amount of time and space, it doesn\u2019t feature too many characters, and the Gospels recount it in a good bit of detail: one Gospel often fills in gaps in another\u2019s account.<\/p>\n

Now I needed data. (Data is always the holdup in creating visualizations.) Fortunately, Gospel harmonies are prevalent, even free ones online. The version of Logos<\/a> I have includes A. T. Robertson<\/a>\u2019s Harmony of the Gospels<\/i>, so I started transcribing verse references from the pericopes listed there into a spreadsheet, identifying who\u2019s in each one and when and where it takes place. I plowed halfway through, but then other priorities arose, and I had to abandon hopes of completing it in time for Holy Week 2010.<\/p>\n

It lay dormant for a year (there\u2019s not a lot of reason to publish something on Holy Week unless Holy Week is nigh). A few weeks ago, I finished itemizing the people, places, and times in Robertson. Justin Taylor last year published a harmony of Holy Week<\/a> based on the ESV Study Bible, which had a slightly different take on the timeline (one that made more sense to me in certain areas), so I moved a few things around on my spreadsheet. I also consulted a couple of other study Bibles and books I had readily available to me.<\/p>\n

With data in hand, it was time to put pencil to paper.<\/p>\n

Version 1: Paper<\/h3>\n

\"Hand-drawn<\/p>\n

I wanted to make four basic changes to the xkcd comic: use the vertical axis consistently to show spatial progression, provide close-ups for complex narrative sequences, include every character and event, and add the days of the week to orient the viewer in time. Only the last of these changes wound up in the final product, however.<\/p>\n

The vertical axis in this version proceeded from Bethany at the top, through the Mount of Olives and various places in Jerusalem, and ended at Emmaus. On a map of Holy Week events<\/a>, this axis approximates a line running from east (Bethany) to west (Emmaus). Using the vertical axis this way encodes more information into the chart, allowing you to see everything that happened in a single location simply by following an imaginary horizontal line across the chart. Unfortunately, it also leads to a lopsided chart that progresses down and to the right, creating huge amounts of whitespace on a rectangular canvas. I didn\u2019t see that problem yet, however.<\/p>\n

I did see that the right half of the chart (Friday to Sunday) was much denser than the left half\u2014I\u2019d need to space that out better when creating a digital version.<\/p>\n

Version 2: Drawing Freehand in Illustrator<\/h3>\n

\"Mouse-drawn<\/p>\n

I have a confession: I’d never used Adobe Illustrator before this project. Most of my image work uses pixels; Photoshop is my constant companion. But this project would have to use vectors to allow for the constant fiddling necessary to produce a decent result at multiple sizes. So, Illustrator it was.<\/p>\n

My first goal was to reproduce the pencil drawing with reasonable fidelity. I used my mouse to draw deliberately wobbly lines that mimicked the xkcd comic. Now, if I\u2019d had more experience with Illustrator, the hand-drawn effect may have worked. But making changes was incredibly annoying; I had to delete sections, redraw them, and then join them to the existing lines. It took forever to make minor tweaks; what would I do when I needed to move whole lines around (as frequently happened later in the process)? After all, if you look closely, you\u2019ll see entire swaths of the chart misplaced. (Why are the disciples hanging out in the Temple after Jesus\u2019 arrest?) No, this hand-drawn approach was impractical for someone of my limited Illustrator experience. I needed straight lines and a grid.<\/p>\n

Version 3: The Grid<\/h3>\n

\"Grooving<\/p>\n

My wife says that this version reminds her of 1970s-style album covers. She\u2019s right. Nevertheless, it formed the foundation of the final product.<\/p>\n

So, what are the problems here? First, the lines weigh too much. Having given up a pure freehand approach, I wanted a more transit-style map<\/a> (used for subways \/ the Underground) with straight lines and restricted angles. I\u2019m most familiar with Chicago\u2019s CTA map<\/a> and thought I\u2019d emulate their style of thick lines that almost touch. This approach leads to lots of heavy lines that don\u2019t convey additional information\u2014it\u2019s also tricky to round the corners of such thick lines without unsightly gaps appearing (again, for someone of my limited Illustrator experience).<\/p>\n

The second problem is the extreme weight in the upper left of the chart, far out of proportion to the gravity of events there. The green, brown, and black lines represent Peter, James, and Judas, who don\u2019t play prominent roles until later in the story. They\u2019re adding lots of \u201cink\u201d to the chart and not conveying useful information. They had to go.<\/p>\n

Why not simply lighten the colors–after all, why is Judas\u2019s line black? Simple: black often represents evil. Similarly, Jesus\u2019 line is red to represent his blood. The Jewish leaders are blue because it contrasts well with red, and most of the chart involves conflict between Jesus and the Jewish leaders (with the pink crowd usually acting as a buffer to prevent Jesus’ arrest). Pilate and Herod are imperial purple. Orange is similar in hue to Jesus\u2019 red, so the disciples are orange. I tried not to get too heavy-handed with the symbolism, but there it is.<\/p>\n

Most of the other colors are arbitrary (i.e., available in Illustrator\u2019s default palette and of roughly the same saturation as the symbolic colors). John would be sharing a lot of space on the chart with Mary Magdalene and the other women, so I tried to give them colors (green, olive, yellow) that worked well together. The only future change from the color scheme in this version involves the guards, who change from cyan (too bright) to a light purple.<\/p>\n

Version 4: Less Technicolor<\/h3>\n

\"Lighter<\/p>\n

This version reduced the line weight and introduced Peter, John, and Judas only when they needed to appear as independent entities in the story. It works better, but there are still two problems with it.<\/p>\n

First, look at the giant areas of whitespace in the bottom left and top right (especially the top right). Using the vertical axis to indicate absolute travel through space is a nice idea, but I couldn\u2019t figure out how to do it without creating these huge gaps. In the next version, I abandoned the vertical-axis-as-space idea\u2014it now indicated travel between places, but you could no longer follow a horizontal line to see everything that happened in a single place.<\/p>\n

Second, I realized that I wouldn\u2019t be able to incorporate every event and person, as they added clutter. I could have added close-ups to illustrate these details\u2014obviously there was enough space for them. However, I felt that including them would distract from the main point: to show Holy Week at a glance. I\u2019m still a bit torn over omitting them, but I think it was a better decision to reduce the total space used by the chart.<\/p>\n

I also abandoned the idea that Jesus went to the Temple on Wednesday. Some commentators think he did; others disagree. From a story-structure standpoint, I like the idea that Judas slipped away from the other disciples to bargain for his thirty pieces of silver while Jesus was teaching in the Temple. However, the text is ambiguous on when exactly Judas agreed to betray Jesus and what Jesus was doing on Wednesday.<\/p>\n

Version 5: Text<\/h3>\n

\"Final<\/p>\n

This is the final version. It condenses a lot of vertical and horizontal space; moves some lines around so they overlap less; and, most importantly, adds text: titles for major events; shading and place names for major locations; verse references; line labels; and a short explanation.<\/p>\n

The xkcd chart is brilliant in that it doesn\u2019t need a key: following recent trends in UI design, all the labels are inline. I definitely wanted to keep that approach, which meant making lots of labels and placing them on the lines. Again, my lack of experience with Illustrator showed up: I couldn\u2019t get the text to center on the lines automatically, and I had trouble creating an outer glow on the text to provide some contrast with the background and make sure that the text was legible. (Black text on a bright blue background is an unpleasant combination.) But the glow always ate into the letters. Thus, I ended up creating lots of pixel-perfect, partially transparent rectangles as backgrounds for the labels. Some of the person lines had somehow slipped out of alignment with the grid, so I had to do a lot of clicking to get things back into order. In retrospect, it was good that I had to make the rectangles; I might not otherwise have noticed that the lines weren\u2019t all where they were supposed to be.<\/p>\n

The shaded boxes to indicate places are straight-up rounded rectangles (though I\u2019m not sure why the corner radius is a global application preference in Illustrator). These boxes, borrowed from xkcd, replace the vertical-axis idea I earlier toyed with.<\/p>\n

Finally, I added event titles and verse references. Here I tried to be comprehensive, including references even when I didn\u2019t have a title to put with them. For example, there are two fig tree stories in the Gospels, but I only titled one of them. The references are available to you if you want to read both, though.<\/p>\n

Conclusion<\/h3>\n

This project was fun, if time-consuming. In total, it took somewhere between forty and sixty hours (much of it spent climbing Illustrator’s learning curve). The chart ended up looking less like the xkcd comic and more like a transit map than I was expecting at the outset, but that’s OK. I\u2019m now a whole lot more familiar with the Holy Week timeline, and I hope that others find the chart useful, too. If it helps improve Bible literacy even a little bit, then I consider it a success.<\/p>\n","protected":false},"excerpt":{"rendered":"

It\u2019s always fun for me to learn the process people use to create visualizations, and especially why they made the decisions they did. So please forgive me if you find this post self-indulgent; I\u2019m going to talk about the new Holy Week Timeline that\u2019s on the Bible Gateway blog: The idea for this visualization started […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/posts\/444"}],"collection":[{"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":21,"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":1136,"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/posts\/444\/revisions\/1136"}],"wp:attachment":[{"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbible.info\/blog\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}