Making “The Pope on the Road,” an AI-Driven Interactive Site

Pope Francis visited Hungary for the second time in April 2023, and for this occasion, we at ATLO created an interactive site presenting the history of the Pope’s apostolic journeys, and the history of the papacy. With a list of new methods ranging from a parallax title screen to AI-generated imagery, the interactive package raised the bar for the quality of our present and future work. This article offers a glimpse into the methodology of the site “The Pope on the Road.”

---

On February 27^th 2023, the president of the Hungarian Republic, Katalin Novák, announced that Pope Francis would visit Hungary between the 28 and 30 April. The Pope visited Hungary two years before that for the International Eucharistic Congress, and we at ATLO decided to make a project centered around papacy. However, the topic quickly lost relevance before we fully developed a publishable story. 

Pope Francis’s second visit then gave us a new opportunity to make an interactive data site about his travels. In the two years that passed, we published many other projects, and realised that a well-developed narrative structure is just as important for our work as the data that make up our projects. We knew from the onset that the structure of the article would be based on the core method of our previous work from February 2023 titled “And the Earth Shakes”: a scrollytelling story that uses the inverted pyramid narrative structure, where the most important information appears at the top and the broader, background, and contextual information comes after.

We came up with the title as soon as we decided to bring this new story to life: “The Pope on the Road.”

On its own, however, “The Pope on the Road” would not have been a significant improvement from the earthquake project. So, to spice things up, we added a new element to the article: the use of artificial intelligence (AI). 

AI tools are still in their infancy, but are already considered ground-breaking. Pictures of Pope Francis walking around in a Balenciaga-style puffer coat widely circulated both in the Hungarian and international press. In reality, these images were produced by an image-generating AI called Midjourney. These AI-generated and realistic illustrations of the Pope gave enough relevance and reason for us to use AI in “The Pope on the Road.” We’ll get into the details of AI image generation later in the article.

AI and the structure of “The Pope on the Road”

In addition to creating the illustrations for the article, we wanted to experiment with AI in other areas. The original plan was to have the entire article (structure, text, coding) written by another AI, ChatGPT. ChatGPT is able to give mostly competent answers based on short text inputs (prompts) in a plethora of topics. 

As we asked ChatGPT to provide a structure for the article, the AI gave us a structure that’s almost identical to the one we had come up with before consulting with it. We finally settled for the AI’s suggestion with added minimal modifications. 

Prompt:

Consider the following: you are a data journalist who specialises in creating interactive data articles using moderate coding, charts and maps in their work. Your next project would be about the Pope’s apostolic visits all around the world, for the special occasion that the Pope is visiting Hungary on the date of the publication of this project.

Write me an outline of this data project: what chapters would there be, with what logical structure? What data is required? How would the story be presented at each chapter, and even at each paragraph? You can use the combination of text, maps, charts, interactivity, sound, images and videos within this project.

ChatGPT:

Outline for Data Project: “Pope Francis’ Apostolic Visits Around the World”

I. Introduction
– Brief background information on the role of the Pope and his apostolic visits
– Explanation of the significance of the Pope’s visit to Hungary
– Overview of the data to be presented in the project

II. The Pope’s Apostolic Visits: A Global Overvie
– Overview of the Pope’s visits to different regions of the world
– Visual representation of the data using a world map
– Interactive elements allowing users to explore the data further
– Key insights on the most visited countries, the frequency of visits, and the reasons behind them

III. Historical Trends and Patterns in Papal Visits
– Analysis of the frequency and duration of Papal visits over time
– Comparison of the current Pope’s visits with his predecessors
– Graphical representation of the data using line charts and heat maps
– Key insights on the historical trends and patterns in Papal visits

IV. The Pope’s Visit to Hungary: Context and Implications
– Overview of Hungary’s religious and political landscape
– Discussion of the Pope’s itinerary and agenda during his visit to Hungary
– Analysis of the significance and potential impact of the visit
– Interactive map showing the locations of the Pope’s scheduled events in Hungary
– Key insights on the context and implications of the visit

V. Conclusion
– Summary of the key findings and insights from the project
– Reflection on the significance of the Pope’s apostolic visits in today’s world

Data Required:
– Historical data on Papal visits (frequency, duration, location, purpose, etc.)
– Data on religious and political landscape of Hungary and other countries visited by the Pope
– Data on the itinerary and agenda of the Pope’s visit to Hungary
– Maps, charts, and interactive elements for visual representation of the data
– Images and videos of the Pope’s visits

We started the story with the fourth chapter: “The Pope’s visit to Hungary.” This is the most relevant part of the topic, and we knew most readers would be interested in the Pope’s current stay in Hungary.

We added a chapter about the history of the papacy, making “The Pope on the Road” follow a structure even more similar to that of the earthquake project. Following the structural principles of the inverted pyramid, the most important information is presented at the beginning of the article (the Pope’s visit to Hungary). As the article progresses, we present interesting but less relevant data that are loosely related to the current events, and only serve to give topicality to the project (pastoral visits of previous Popes, the history of papacy).

We also asked ChatGPT to write some paragraphs, which were merely for playful attempts. The intro paragraph, however, is written entirely by the AI. And of course, it was not without errors: The AI guessed the Pope’s current trip to Hungary would be a four-day visit, so we corrected it to three days, the actual length of the trip.

Moreover, we asked ChatGPT to help us solve minor coding issues related to the map illustrations in the articles. The article includes many maps using the Mapbox GL JS framework, and although the Mapbox documentation is very thorough, we still faced an issue that was not documented neither on their website nor on Stack Overflow: we could not add topography to the Mapbox maps through the GL JS framework. The AI came up with a good solution based on a short prompt, so we have to give credits to ChatGPT helping us add the terrain layer to the Mapbox maps featured in the project.

Scrolling is in, buttons are out – the importance of “scrollytelling” and other various methods

For the past decade, scrollytelling has been one of the most popular storytelling methods in online multimedia journalism. The 2012 The New York Times article titled “Snow Fall: The Avalanche at Tunnel Creek” was instrumental in bringing this method into the limelight. The method is now part of the toolset of many newsrooms. 

At ATLO, we have used scrollytelling since the beginning of the site’s existence. One can see this method being used in our earlier works, where we made fixed static images change on scroll (see our projects such as the “History of Budapest” and “Hungarian toponyms in the Carpathian Basin”). 

Animated roads

In our recent works, we have used a more advanced method, where scrolling manipulates interactive maps and charts (like in “Parliament 30,” “Budapest Street Names,” “And the Earth Shakes”). The same method is used in “The Pope on the Road.”  The extra technological advancement here was that we presented the route Pope Francis took each day during his visit to Hungary with an animated line triggered by scrolling.

Once triggered, the line is animated for the specified time. A tutorial of this method can be found on the official Mapbox site and on Chris Whong’s Github page. We wrote the Javascript such that the lines appear (turning from transparent to black) over 4 seconds. Also, we programmed that animation to show a road based on the chapter in which the road appears in the article. The lines could also be designed separately, which allowed us to make the line of the first day appear with lower opacity when the second day is presented, and the lines of the first two days appear with lower opacity when the third day is presented.

The immersive “Persepolis Reimagined” by Getty was a major inspiration for some of our technical solutions. The structure and method used in its opening sequence is echoed in the background of “The Pope on the Road” which appears during the three introductory texts, and the 3D parallax effect in the opening. We used the GSAP ScrollTrigger library and the Parallax.js Javascript library. The method used with the help of ScrollTrigger created a similar effect as the road lines, appearing gradually. But instead of appearing from a transparent start, the images would appear first as a black (opaque) image and the opacity would dissolve through the scroll to eventually reveal the image. The opening image, divided into three parts, takes shape during the three chapters using this method.

The parallax effect, which allows a website’s background to move at a different speed than the foreground content, becomes most noticeable when the image is complete. This requires two factors to be taken into account within parallax.js. Our code specified different depths for each image layer (three in our case, one in background, one in middle ground and one in foreground position). The depth of an image is a value between 0 and 1. The greater the difference between the values of each layer, the greater the 3D effect.

The Pope in Moving Panels

Another method inspired by “Persepolis” was the use of horizontally moving panels during vertical scrolling. Such panels bring up additional information, but instead of following the traditional vertical structure, they are horizontally positioned next to each other, moved from left to right by vertical scrolling.

“The Pope on the Road” has five sections that move horizontally as you scroll vertically: three sections for the three days of the Pope in Budapest, one section for a chart showing the heatmap of the travelling Pope’s apostolic journeys by year and continent, and one section for a chart showing the timeline of all the Popes. This method is also based on the GSAP ScrollTrigger module, and we used this template for these sections.

Music for the road

The use of background music is also inspired by “Persepolis.” We originally intended the music to start automatically when the page loaded, but most browsers no longer support the autoplay of sounds or videos with audio. To make any sound play on a website, the user has to interact with the page in some way, which could be as much as pressing a button. This is why a “sound” icon was added in the top left corner, which can be clicked to start the half-minute music snippet.

Realistic but fake Pope: using Midjourney AI images

The “picture” of the Pope in a puffer coat was just an episode in a longer story that begins to unfold, a story about AI-generated illustrations and images.

We wanted to include illustrations about the Pope’s visit to Budapest, but we didn’t want to infringe copyrights by using actual images. The images from previous visits could only illustrate events that had already happened. The connection between the Pope and AI had just stirred the world press, so this gave us enough reason to experiment with AI-generated images. 

Midjourney is one of the most advanced image-generating AI. This past year, the quality of the images it can generate improved tremendously, and with version 5, it can produce almost indistinguishable images (version 5.1, released in May, pushed this even further). Midjourney tries to visually interpret what you describe in writing. In a few seconds, it produces four versions of this written prompt, which you can either upscale and download at a higher resolution, or request variations for each of the four versions. These variations are made in the same composition, but using different faces, objects, colours, etc.

With Midjourney, it is also possible to complement the text prompt with a real image that looks similar to what you would expect the AI to generate. Adding an image makes the person’s face or the composition of the image more accurate. This is how we created the images depicting Pope Francis getting off an airplane or waving from the car window.

However, in multi-character images like the meeting between Viktor Orbán and Pope Francis, or the meeting between Katalin Novák and Pope Francis, it is much harder to support a prompt with an image of a certain person. It is either because the AI cannot decide who is on this image, and everyone will have the same face, or it will interpret the image as a stronger input, and recreate it with added elements from the text prompt. The image network on which the AI was trained contains images of many famous people, so it can produce an accurate face of Pope Francis even without an additional image, but Viktor Orbán looks less like himself, and Katalin Novák gives the impression of a completely different woman.

There are of course ethical concerns with AI-generated images, which should be self-evident to the lay user: can a notable person’s face be used to produce an image depicting a situation in which that person would not participate? As AI images become more and more realistic, will it be possible to determine whether the image is real or was created by AI? Will deepfakes become an even bigger issue with the combined use of AI-generated images and AI softwares that can animate these images? What impact will AI image creation have on the livelihoods of real artists, photographers, videographers, graphic designers, etc., if one can achieve almost indistinguishable results in a fraction of the time?

“Can a notable person’s face be used to produce an image
depicting a situation in which that person would not participate?“

In any case, these images will not disappear from our everyday lives. In fact, they will even become commonplace. However, there are some built-in limitations. In the first draft of the opening image, Pope Francis and Viktor Orban would have shaken hands in a church, symbolising that the Pope’s religious visit also has political significance. Interestingly, the word crucifix was part of the prompt describing the church in detail, and Midjourney did not produce any image. Instead, it warned us that frequent use of banned words would result in suspension of the user profile.

Many of the generated images depicted a situation that was partially similar to reality. One example is Pope Francis waving from his car. The generated image, however, still contains several errors: for one, Pope Francis is sitting in the driver’s seat. Although he has five fingers on his hands (a long-awaited success for AI, as it had trouble generating realistic hands and feet for a long time), in reality, he wears his ring on his right hand, not his left, as depicted by the AI.

The Pope getting off and on the plane is depicted by the AI only in a way we wrote the prompt, without any additional knowledge about the world, or the Pope’s medical condition. In reality, the Pope’s current knee problems made him unable to walk down the stairs from the plane. Instead, he used the elevator on the other side of the plane:

The Pope met young people at the Papp László Budapest Sports Arena on April 29^th and before his speech, he walked among the participants. In one of the pictures taken at this time, he puts his hand on the head of a young boy. Based on our prompt, the AI created a very similar picture of this event, showing the Pope and young people touching hands.

A similar situation was portrayed when he met poor people and refugees at The Church of St. Elizabeth of Hungary. The AI produced a similar image:

In conclusion, our aim with using AI-baked elements in “The Pope on the Road” was to try out the new technologies, and to show that we are dealing with tools capable of not only helping us compose articles, but also producing visually correct and appealing images.  As these technologies are still in their infancy, our experience was not without flaws. 

Nevertheless, when using the AI image generator for this article, we learned its capabilities and limitations, and came up with an end result that was very close to our initial intentions. We also ended up using ChatGPT considerably less than we originally anticipated, but it was still able to help with the structure, writing, and coding (to an extent), which allowed us to achieve a better end result.

As for the use of AI images in journalism, we believe it could be useful in the future to illustrate events that only have textual evidence or testimonies. The images can serve as visual illustrations of such events, albeit possibly requiring the supervision of an actual person to be the final judge whether the image is factually, visually, or ethically correct, and is usable. Given its advantages, we at ATLO believe this technology should not be rejected but embraced in the future.

The full feature is available here.

---

This article was edited by Noëlle T. Rakotondravony.