The Shape of History: Reimagining Nineteenth-Century Data Visualization CarolineFosterGeorgiaInstituteofTechnologyUnitedStatesofAmericacfoster2@gatech.eduAdamHaywardadam.hayward@gatech.eduGeorgiaInstituteofTechnologyUnitedStatesofAmericaSvyatoslavKucheryavykhGeorgiaInstituteofTechnologyUnitedStatesofAmericaAngelaVujicGeorgiaInstituteofTechnologyUnitedStatesofAmericaManinderJapraGeorgiaInstituteofTechnologyUnitedStatesofAmericaShivaniNegishivani.negi@gatech.eduGeorgiaInstituteofTechnologyUnitedStatesofAmericaLaurenKleinlauren.klein@lmc.gatech.eduGeorgiaInstituteofTechnologyUnitedStatesofAmerica
Introduction
In the mid-1850s, American educator and editorElizabeth Peabody (1804-1894) set off from Bostontoridetherails.ShetraveledasfarnorthasRoches-ter,NY;asfarwestasLouisville,KY;andasfarsouthas Richmond, VA, in order to promote the textbook
shehadrecentlypublished,AChronologicalHistoryofthe United States (1856). Along with her suitcase,Peabodytraveledwithalargefabricroll,which,whenunrolled, displayed a grid-like array of coloredsquaresthatrepresentedthemajoreventsinU.S.his-tory. In the nineteenth-century version of a productdemo, Peabody would arrange the “painted centu-ries,”as shecalled them,on the floor, and invitepo-tentialtextbookadopterstositaroundthechartsandcontemplate the colors and patterns that they per-ceived(9).
Althoughnotdescribedintermsofvisualization--the term did not enter common parlance until theearly twentieth century--Peabody’s ideas about theusesofherchartsanticipatemanyofthebenefitsas-sociated with visualization today: the ability to “of-fload” mental processing “from cognitive to percep-tual systems,” to “enhance” pattern recognitionthrough“abstractionandaggregation,”and,crucially,tointeractwithandpotentially“manipulate”thevis-ualization itself (Card et al. 1999, 16). For Peabodydidnotonlyimaginethatherreaderswouldinterpretthe“data”presentedonhercharts;shealsointendedfor them to create charts of their own. To this end,Peabodyalsosoldworkbooksofblankcharts,sothatstudentscouldreadeachchapterofhertextbook,andthenconvertthelistofeventsthatfollowedintocolorandposition,accordingtohervisualscheme.
Figure 1: Peabody’s visualization of the significant events of the seventeenth century. In A Chronological History of the
United States, arranged with plates on Bem’s principle (New York: Sheldon, Blakeman, 1856).
Figure 2: A blank chart included in The Polish-American
System of Chronology: Reproduced, with some modifica-tions, from General Bem’s Franco-Polish method (New
York: G.P. Putnam, 1850). Project Overview
Drawing from recent digital humanitieswork re-latingtohistoricalfabrication(e.g.Elliottetal.2012,Sayers 2015), aswell as from our own previous ex-plorations of historical visualization techniques (e.g.Foster et al. 2016), we set out to recreate and en-hancePeabody’spioneeringvisualdesign.Inparticu-lar,we focusedonPeabody’s ideasabout interactionand interpretation, since her ideas about the tripar-tite relationbetweendata, text, and image-- and theroleofthereaderintranslatingbetweeneach--speakdirectly to current debates in the digital humanitiesabouttheimportanceofacknowledgingdataas“cap-ta”(Drucker2011),andofrecognizingtheroleofin-dividual interpretationinboththedesignandrecep-tion of visualizations (Posner 2016). In our project,we focused first on reimagining Peabody’s originalinteraction for the web, employing current infor-mation visualization research to suggest techniquesfor emphasizing the interrelation between the dataand their visual display.We then began a project torecreate the floor-sized version of Peabody’s chartusing physical computingmaterials, so as to furtherexploretheembodiedaspectsofPeabody’svisualiza-tion scheme. In the following sections, we describethe design choices involved in each recreation-- thedigitalandthephysical--withparticularattentiontohowwesought toamplifyPeabody’s ideasabout in-teraction, interpretation, and embodiment throughourreimaginedinterfaces.
The Shape of History: Reimagining Interaction and Interpretation for the Web
The website located at shapeofhistory.net repre-sents the culminationof a year-long iterativedesignprocess. From Peabody’s original textbook, we dis-tilled four conceptual modes of interaction: an “ex-plore”mode,designedtoexplaintonoviceusershowtointerprethercharts,andhowtotranslatebetweentext and image; a “lesson” mode, designed to allowusers to create theirowncharts, drawinguponPea-body’s original data; a “compare”mode, designed tocall attention to how choices in visual display affectthe charts’ ultimate interpretation; and a “play”mode, intended to facilitate the most open-endedformofinteractionandexpression.Toimplementthesite,weemployedacombinationofHTML5,CSS,andJavaScript, including Bootstrap.js for site structure,jQuery for navigation and site-level interaction, andD3.js and two.js (along with custom JavaScript) forthevisualizationcomponents.
At each juncture,we considered how to enhancePeabody’s original designs and interactions. For in-stance,whenrecreatingthegridthatwouldserveastheprimarytypographicalform,weremainedfaithfultotheoriginaldesignandcolorpalette,whileaddingadditionalminorgrid lines(in lightgray)so thatus-erswouldknowwheretoclick(White2011).Inordertoemphasizetherelationbetweentextandimage,animportant feature of both the “explore” and “com-pare”modes,we added a simple interaction, knownas“brushing,”sothathoveringoverasingleeventineither the text or the image would simultaneouslyhighlightbothelements,aswellasthecorrespondinglocation on the chart’s key (Stasko 2007). For the“lesson”mode,weaugmentedthefeaturesdevelopedfor theother twomodeswithamoreguidedexperi-ence,akintothelessonthatPeabodydescribedinhertextbook,throughproceduralizedinteraction(Bogost2007).Inthelesson,usersmustreadeachevent,oneat a time, translate it into color, and then place thecolored square in the appropriate location on thegrid.Throughenhancedusercues,suchasconvertingthecursortoapointerasithoversoverthegrid,andhighlighting empty squares as the user hovers overthem, users are guided through a digital version ofthe interactive lesson that Peabody envisioned inprint.
Figure 3: A screenshot of the “Explore” mode, with an event
from 1565 highlighted. Viewable at http://www.shapeofhistory.net/.
Reimagining Peabody’s historical visualizationschemeforthewebhelpstounderscorehowsheun-derstood interpretationasa fundamentalpartof theprocessofperceivingvisualizations.Hervisualdesignbearsverylittlerelationtotheimmediately intuitiveimages that we associate with visualization today.Andyet,forPeabody,theabstractionofthechartwaspartof itspurpose;sheintendedherchartstobein-dividually interpreted by each person who encoun-teredthem.Morethanthat,sheenvisionedherchartsaslessonsinthemselves--lessonsthatoftentooktimeandeffortinordertocomplete.Inthisway,theinter-actionssheenvisioned,whilemadequickerandmoreintuitivethroughtheirdigitalrecreation,losesomeoftheiroriginal intent, inthatPeabodydidnot identifyefficiency as a feature of her designs. Instead, sheviewed the interpretive process--sometimes difficultand often slow-- as the best source of historicalknowledge. The “lesson” of The Shape of History, asdistinctfromPeabody’soriginalscheme,isaremind-erofhowlittleinterpretationisintended--evenifitisstill required--when encountering visualizations ofdatatoday.
The Floor Chart: Reimagining Embodiment through Physical Computing
WhilethedigitalversionoftheprojectemphasizesPeabody’s interest in facilitating interaction and in-terpretation,itdoesnotconveytheembodiedaspectsoftheoriginalinteraction;lookingatascreenisafardifferentexperiencethanwalkingaroundarug-sizedchartonthefloor.Toreimaginethisembodiedmodeofinteraction,wedesignedaone-meterbyone-meterfloor chart, consisting of amatrix of thirty by thirtyindividually addressable light-emitting diodes(LEDs). Each LED corresponds to one subsection of
Peabody’s original chart, so that the 900 possibleevents can be represented. (We cannot account formultiple simultaneous events, however). The LEDscan be pre-programmed via custom software,whichmakesuseofAdafruit’sNeoPixellibrary.Wearealsointheprocessofdevelopingaflexibletouchinterface,using conductive copper tape and neoprene, so thattheLEDscanbecontrolledthroughasoftbutton-likeinteraction.BoththeLEDsandthetouchinterfacearecontrolledbyanArduinoMega2560microcontroller.
Figure 4. The LED matrix.
Figure 5: The touch interface in progress.
Weviewthisprojectasoneofspeculativedesign(Dunne and Raby 2013). Since Peabody’s originalfloor charts were not preserved, wemust speculate
about everything from the size of the chart, to thecolors employed, to the events depicted. While wehave textual accounts, in Peabody’s correspondence,of how nineteenth-century viewers would interactwith the floor charts, the original charts were obvi-ously not programmable.What the reimagined floorchartteachus,then, isabouthowwemightincorpo-rate embodied elements into current visualizationdesign practices, asmuch as about how viewers in-teractedwithlarge-scalevisualizationsinthepast.Italsoremindsusaboutthe labor involved in fabricat-ing the original charts. (Peabody complained aboutthe magnitude of the task in her correspondence).Theworkofdatavisualization,whilenot alwaysex-pressedinphysicalform,isalwaystheworkofmanyhands.
Conclusions and Next Steps
In their foundational essay on historical fabrica-tion, Devon Elliott et al. observe that “workingwithactual, physical stuff offers thehistoriannewoppor-tunities to explore the interactions of people andthings”(2012).Inthisproject,wehavesoughttoex-tend these opportunities for exploration to includethe interactions of peoplewith data, aswell aswiththeir visual display. Our project underscores thefoundational role of interpretation in designing andperceivingvisualizations;andshowshowinteractioniscrucialtotheinterpretiveprocess.Italsopointstofuturemodesof visualization,not yet imagined, thatmight better emphasize embodiedways of knowing.In terms of next steps, for the website, we plan tothink through what a more scholarly version of thesite,withroomformoreexplanatorytext,mightlooklike.Forthephysicalization,wearecontinuingtoim-plement the touch interface. From there,wewill fo-cusontheaestheticaspectsoftherug,exploringop-tionsforlight-diffusingfabricstoframetheLEDs,andlight-blockingmaterialstocreatethegrid-lines.
Bibliography Bogost, I. (2007)Persuasive Games: The Expressive Power
ofVideogames.(2007).MITPress,Cambridge.Card, S.K., Mackinlay, J., and Shneiderman, B., eds.
(1999).Readings inInformationVisualization:UsingVi-siontoThink,1stEdition,MorganKaufmann,NewYork.
Drucker, J. (2011). Humanities Approaches to Graphical
Display.DigitalHumanitiesQuarterly5(1).Web
Dunne,TandRaby,F.(2013).SpeculativeEverything:De-sign, Fiction, and Social Dreaming. MIT Press, Cam-bridge.
Elliott,D.,MacDougall,R.andTurkel,W.J.(2012).New
OldThings:Fabrication,physicalcomputing,andexper-iment in historical practice, Canadian Journal of Com-munication,37(1).Web.
Foster,C.,Pramer,E.,Klein,L.(2016).RepairingWilliam
Playfair: Digital Fabrication, Design Theory, and theLong History of Data Visualization. InDigital Humani-ties 2016: Conference Abstracts. Jagiellonian University&PedagogicalUniversity,Kraków,pp.513-516.
Peabody, E. (1856). Chronological history of the United
States,arrangedwithplatesonBem'sprinciple.Sheldon,Blakeman,NewYork.
Peabody, E. (1850). The Polish-American System of Chro-
nology:Reproduced,withsomemodifications, fromGen-eral Bem’s Franco-Polish method. G.P. Putnam, NewYork.
Posner, M. (2016). What’s Next: The Radical, Unrealized
PotentialofDigitalHumanities.InDebatesintheDigitalHumanities 2016, ed. Matthew K. Gold and Lauren F.Klein.UniversityofMinnesotaPress,Minneapolis.Web.
Rhoda,B.(1999).ElizabethPalmerPeabody:AReformeron
herOwnTerms.HarvardUniversityPress,Cambridge.Sayers, J. (2015).Why Fabricate?, Scholarly and Research
Communication,6(3),n.p.White,A. (2011).TheElements ofGraphicDesign, 2nd ed.
AllworthPress,NewYork.Yi, J.S., Kang, Y., Stasko, J.T., and Jacko, J.A. (2007). To-
wardadeeperunderstandingoftheroleof interactionininformationvisualization.IEEETransactionsonVisu-alizationandComputerGraphics13(6),pp.1224-1231.
