Using TabletopJS to support translations for interactive graphics

Using a googleDoc spreadsheet to help translate a map.

Our office uses GoogleDoc spreadsheets as a way of collaborating internally and with the different language services. We use them to help manage the translations for app and website navigation across more than 60 languages. And we’re encouraging newsrooms to use the spreadsheets with TimelineJS to create interactive timelines. Recently we experimented with using TabletopJS and Google spreadsheets to help facilitate the translations for an interactive project.

For the 60th anniversary of Joseph Stalin’s death, we partnered with Radio Free Europe / Radio Liberty (RFERL) to create a page that looked at his life and legacy. The project needed to be capable of being translated into multiple languages.

It’s a fairly straightforward task to translate text. It’s more of a challenge to translate graphics. For this project we tried a number of different approaches:

  • We used static images of graphics without any text and kept the text in the surrounding HTML.
  • We inserted SVG graphics. SVG is an XML-based way of creating vector graphics. In order to translate the graphic, the editors had to manually dig through the XML tags and translate each one.
  • We experimented with different charting services.
  • And finally we created a simple interactive graphic with RaphaelJS that used a Google spreadsheet for the data and labels.

The map of the former USSR showed over 20 years of forced migrations where millions of people had to leave their homes. Over a million of them died in the process.

Map of forced migrations in the Soviet Union under Stalin.

Building the Graphic

We created a vector map of the region in Illustrator, saved it as an SVG file and then converted it to RaphaelJS. We connected the map and arrows showing migration patterns to a Google spreadsheet using TabletopJS. TabletopJS makes working with a spreadsheet as easy as working with a simple Javascript array of data. “… Imagine it’s a read-only, JavaScript CMS that you can edit through Google Docs.”

The spreadsheet includes the year, population, number of people and the reason they were forced to move. The spreadsheet also includes a column for the map locations and navigation terms.

Once we had the graphic working in English, it was a fairly straightforward task to support additional translations.

We shared the spreadsheet with the different language services. They duplicated the main sheet of spreadsheet, naming each new sheet with the name of the language. As long as the column headers and the organization of the data remained consistent between the pages, we could redirect TabletopJS to the Belarusian, Persian or Romanian sheet. We then used jQuery to replace the graphic text with the appropriate translation to create a Belarusian, Persian or Romanian map.

Why This Helps

Graphics can be difficult to translate for several reasons. The data may be stored in a database with limited access. It may be buried in a dense nest of code and tags. It may be hidden inside of a third party tool like Flash. Or it could be part of a flat, static image file. These methods all require additional time and technical skills to help translate.

By using a GoogleDoc spreadsheet:

  • We’re separating the data from the presentation
  • We’re sharing the data in a format that people are likely familiar with
  • And when you combine it with TabletopJS, you have a quick and easy way of connecting the data with the graphic.

- – - – -
Do you publish content in multiple languages? How do you handle graphics? Post in the comments section below or tweet us @BBGinnovate.
- – - – -

(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)

The following two tabs change content below.
Brian Williamson

Brian Williamson

Brian Williamson is the senior UX designer for the Office of Digital & Design Innovation. Follow him on Twitter: @drawinghands.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *