Design

MAKING HISTORY VISIBLE
Demographic Origins of WWII Japanese American Incarcerees

“Modern data graphics can do much more than simply substitute for small statistical tables. At their best, graphics are instruments for reasoning about quantitative information. Often the most effective way to describe, explore, and summarize a set of numbers­—even a very large set—is to look at pictures of those numbers. Furthermore, of all methods for analyzing and communicating statistical information, well-designed data graphics are usually the simplest and at the same time the most powerful.”

— Edward R. Tufte
The Visual Display of Quantitative Information

To the best of our knowledge, the above is the first map of its kind to depict the origins of the more than 109,000 individuals that passed through one of the ten WRA camps during World War II. Although the map was assembled by our project team over the spring of 2017, the idea for a “big data” component to our interpretive work dates back to the November 5th, 2015, opening of the “Out of the Desert” exhibit at Yale. As attendees began to probe the different features of the exhibit’s digital touchscreen, they asked about searching for records of friends and families­—functionality simply beyond the capacities of a touchscreen interface hosting a hundred items.

The dataset used to make the map two years later was released by the National Archives in 1989 but has not attracted much attention. As a counterpoint to chronological and thematic modes of historical interpretation, data-rich approaches have the ability to present the lives of those who lived through camp in a different light. Viewed in aggregate, it becomes possible to map out social realities and broader patterns of experience.

As planned, the project’s interactive digital atlas will make it possible for users to organize, search, and visualize this historical record, with a suite of tools for sorting through data. As a topic-specific version of ancestry.com, this type of functionality has been requested on a number of occasions by various members of the Japanese American community out of interest in their own family histories. Given the growing interest in sites like Nate Silver’s FiveThirtyEight and the Upshot at the New York Times, this atlas and suite of tools promises to interest the general public as well.

Data Integrity and the Challenges of Making a Map

The demographic information for our digital atlas is drawn primarily from a single dataset: War Relocation Authority Form 26, coded by employees of the WRA, and keypunched by the agency. As an archival source, it records personal information for 109,384 individuals after their arrival in one of the ten WRA camps in the U.S. interior beginning in 1942.

With over three million individual data points, WRA Form 26 is one of the most exhaustive records created for a civilian population outside of transportation, immigration, or the U.S. census. As a new outgrowth of a qualitative and interpretive public-facing project, the feasibility of a “big data” challenge was a major concern.

Our first step was to assess the quality of the data. As a test, we set out to create a comprehensive demographic map of how Executive Order 9066 impacted individual communities at the start of 2017. Although this data has been publicly available since 1988-1989, this is the first time a data challenge has been undertaken.

Digging into Data: Preliminary Findings

Python was used to compile city-level demographic information from Densho.org’s database—itself drawn from the National Archives—and aggregated into county-level populations over the course of a weekend. Significantly, 84 city-level codes were listed as “undocumented” by the National Archives representing over 4000 individuals in the database­—slightly over 4% of the total. Over the course of two weekends, our project team set out to piece together the missing city codes. We were able to do so using a combination of python programming, queries to ancestry.com, and manually sifting through other clues in the database.

The map itself was also generated using Python. Saved in SVG format with polygonal coordinates for each county, the data can be converted to GeoJSON to add interactivity with leaflet.js or D3.js. As a further test of the data, we created a diverging stacked bar chart in D3.js showing population data. Keyed to 1942, the results are shown below. There are already stories to glean from this data, including the large number of older bachelors resident in camp.

An additional 870 individuals (<1%) represent corrupted data, either due to incomplete documentation during WWII or human errors in data entry as the data was catalogued in the 1980s and 1990s. Although more labor intensive, we are confident that these gaps can be corrected with a fair amount of certainty, either through census data or else through comparison with other entries in the database.

We expect that a clean database can be constructed with a month of sustained effort. There are many stories to glean from a complete data set, including research into the lives of the dozens of individuals who entered camp from beyond the West Coast Exclusion Zone. Our mapping shows residents from twenty-five states in total, including Montana, Idaho, Nevada, Utah, New Mexico, Colorado, Texas, Nebraska, North Dakota, Missouri, Arkansas, Alabama, Wisconsin, Illinois, Michigan, New York, Pennsylvania, Virginia, and Florida. The most famous of these is Isamu Noguchi, the artist and sculptor who voluntarily entered Poston from New York City as an act of community solidarity. However, many more stories remain to be told.

USER EXPERIENCE
Conveying the project’s central humanities ideas, analysis,
and content through solid interaction design


The current iteration of outofthedesert.yale.edu was responsible for running the 40-inch digital touchscreen kiosk at the physical installation of “Out of the Desert: Resilience and Memory in Japanese American Internment,” which ran from November 2, 2015 through February 28th, 2016 at Yale University’s Sterling Memorial Library.

The exhibit was installed in the Sterling Memorabilia Room over the course of several weeks. As a gallery space, the room had its limitations. Objects on display were restricted to 10 glass-panel cases wrapping around one-half of the room. The idea to create a complimentary digital kiosk was born out of the limitations of this space—a first for a Yale Library exhibition. With planning beginning in July 2015, the digital kiosk was unveiled on November 5th to coincide with the official exhibit opening.

Simultaneously accessible online, the digital exhibit drew guests from other parts of the United States as well as from thirty other countries during the exhibit’s four-month run. The Guestbook primarily contains entries from visitors to the physical exhibit in New Haven, but also records comments from digital visitors spread across the country and as far away as New Delhi and Indonesia.

NAVIGATION

As the digital accompaniment to a physical exhibit installation, the kiosk added an element of self-guided user activity, expanding the range of experiences possible for on-site visitors. High school yearbooks that were left open to a single set of pages and encased behind glass could be browsed in their entirety on the digital touchscreen. The interactive map also introduced visitors to the location of the WRA camps and included a short introduction for each location.

The site architecture treats the browser window as an immersive aperture for displaying a diverse array of content. As a necessity of the touchscreen kiosk interface, all site navigation is handled natively within the site ecosystem without recourse to browser controls. Unlike most online experiences, much of the site’s interactivity occurs on a left-right horizontal axis, eschewing the more conventional logic of up-and-down vertical scrolling. Instead of moving between discrete pages, trays appear, resize, and disappear throughout the viewing experience as layers over the map interface. The map remains active throughout. Even with a tray opened to one of the camp sites—obscuring half of the screen­­—it is possible for users to pan around and click on the visible part of the map.

AESTHETICS

Our site design reflects the materiality of our exhibited content. The base map at outofthedesert.yale.edu draws heavily on the design aesthetic of World War II-era maps. Over four hundred period-specific maps were consulted at the outset of the design process in July and August of 2015, courtesy of the David Rumsey Collection at Stanford University. The look and feel of the site are meant to reflect those sources in public circulation at the time: metro newspapers and government-issued atlases, as well as material crafted for camp.

Many aesthetic details, including the font combinations for our interactive map, were derived from the San Francisco Examiner’s massive 45-inch “Map Story of the War” (above). Documenting worldwide campaigns against the Axis Powers two months after Nazi Germany’s unconditional surrender on May 8th, 1945­—and a month before the Japanese surrender—the map was printed across three full-page spreads. Published consecutively from July 2–July 4, 1945, the map was intended to be a commemorative keepsake, or at least cut out posted on the wall.

The map’s level of detail is impressive. In contrast to the colorful maps printed by the Examiner before the war, the map’s color palette is constituted entirely from combinations of blue, black, and red ink­—perhaps a nod to wartime austerity.

Further design inspiration was taken from the Atlas of World Maps for the Study of Geography in the Army Specialized Training Program (1943, bottom right). Spot samples were taken from a number of period maps to provide the site’s primary color palette.

Finally, the particular shade of red used throughout the site is taken from a hand-produced map drawn by Su Yabuki and Hisako Tanaka for the Spring 1944 issue of All Aboard, a newsletter published by the residents of Topaz Camp (bottom left). As there is no stock representation for barracks in standard icon sets, we modeled the site’s icon off of their map and used a spot sample to provide the color. Over time, it has become the signature contrasting accent for the site.



TYPOGRAPHY

Display Font: Futura is an early geometric sans-serif typeface designed by Paul Renner and released by Bauer Type Foundry in 1927. It is one of the most widely used typeface families of the twentieth century. The typeface family was expanded through 1955, and was re-issued and imitated by a number of foundries. It remains in wide usage and has inspired a number of fonts, notably Avenir (French for “future”) released by Adrian Frutiger in 1988.

Significantly, Futura (or more likely one of its many clones) was used to set the iconic evacuation order issued by General John L. DeWitt ordering the forced evacuation of Japanese Americans from the West Coast in the wake of President Franklin D. Roosevelt’s issuance of Executive Order 9066. As images have circulated in subsequent decades, the evacuation posters remain one of the most identifiable symbols of WWII incarceration. Our use of the font is meant to highlight the reparative dimensions of public-facing humanities projects.


Anchor Font: Yale (2004). Commissioned by Yale University and designed by 2010 MacArthur Fellow Matthew Carter, the Yale typeface is an old-style typeface influenced by Bembo (1929). Other aspects of the font are influenced by ITC Galliard (1978), also designed by Carter, which is notable for its robust stroke and sharp details. As an old-style serif, Yale approximates the look and feel of type in circulation in the first half of the twentieth century. Importantly for a digital project, the Yale family includes typefaces optimized for display on the web.

Accent Fonts: Karnak (1931) is a slab-serif typeface designed by R. Hunter Middleton. Slab serifs were often called “Egyptians” as an exoticism, with this font taking its name from the Karnak Temple Complex in Egypt. The font has received renewed attention since its digitization in 2009, with the New York Times commissioning a version from Matthew Carter.

Coronet is another Middleton font, released in 1937. With slanted matrices, Coronet’s letterforms are able to slope atop one another, lending it a handwritten feel. Although it has not dated particularly well and is little-known today, it saw widespread use in the mid-century. It will be used to set the text for water features on our map, further enhancing its period aesthetics.

Franklin Gothic (1902) is a sans-serif typefaces developed by the American Type Founders. Despite being eclipsed in the 1930s by Futura, it has returned to common usage. Widely found in advertising and newsprint, with the New York Times again commissioning Matthew Carter to create their own custom version. It will be used to set subheaders on our site.

TECHNICAL SPECIFICATIONS

Web design has reached a high degree of cross-browser compatibility with the standardization of HTML5 and CSS3, both of which reached critical milestones in 2014. A necessity for designing software that works on both a 40-inch touchscreen and mobile tablets, the current iteration of our website is engineered around principles of responsive design. As one example, using the Cascading Style Sheet (CSS) calc() function, the current map interface—beginning with the cutout at the top of the map—scales seamlessly from high-definition desktops down to screen resolutions of 1024 x 768, the original iPad specification from April 2010, making the user interface backwards-compatible with tablets from six years ago.

The current iteration of outofthedesert.yale.edu is run by a custom “Desert” theme written by our site architect Corey Johnson during the fall of 2015. With content served from the WordPress database, the primary navigation elements and much of site’s interactivity have been overwritten in JavaScript.

Because it was purpose-built to run a digital touchscreen kiosk running a fullscreen version of Firefox, user interactivity is completely native to the site, without recourse to the browser’s built-in navigation tools like the back button and page refresh. Instead, navigation was built into a discrete user interface layer written in a combination of plain JavaScript as well as a number of libraries (D3.js, leaflet.js). The current map was designed in Mapbox Studio Classic and the map tiles are served via Mapbox’s API. We have also devised a complex combination of CSS properties for the “Learn More” slideshow. CSS properties control the look and feel of websites. Here they are used specifically to create a dynamic background gradient that moves along with the text box as it shifts around the screen throughout the slideshow. This allows for the legible display of text over full-screen graphics, creating a user experience exceeding that of most websites today.