Here are your data sets and links to the programs needed for today’s workshop:
Another semester yielded another crop of impressive DH projects in my courses on the history of Colonial Latin America and the History of Mexico. Utilizing Tumblr for the first time in my Colonial Latin America course (HIST 410), students were given free rein to create a visual project centered on a topic of their choice pulled from within the chronological and geographic boundaries of the course. Selecting the top five Tumblrs from this course was EXTREMELY difficult as my students produced some amazing work product, but here are the top 5 projects:
For the first time in my History of Mexico course (HIST 412), my students used StoryMapJS to produce highly visual, geospatial historical narratives on a topic of their choice. Here are the top 3 projects:
Minus some minor errors in proper citations, the formatting of those citations, and the use of non-academic sources for images (I’m looking at you Wikimedia Commons), the majority of projects across both classes were of very high quality. Students greatly enjoyed (or so they told me) working on these projects during the course of the semester and the projects provided an excellent opportunity to hone their abilities to produce well-researched, well-documented, highly accessible, and highly engaging historical narratives. Additionally, I believe that this kind of work product can and should be a prominent part of students’ portfolios when applying for graduate school, internships, and jobs, as the skills acquired from this hands-on, project-based approach to learning provides my students with the knowledge necessary to take their passion for history into the digital realm of the 21st century.
Encouraged and inspired by my colleague Diana Montaño and Clayton Kauzlaric’s “Then & Again” project, I tried my hand at juxtaposing vintage, historical images onto modern ones. This approach, which visualizes physical changes over time, creates a powerful connection between the past and present of a particular place. In this tutorial, I will introduce the basic methodology for creating such an image using free, nearly universally-available tools. However, keep in mind that I am very much a novice at image retouching and editing, and feedback is much appreciated as I continue to improve this process and its end products.
Google Maps, Gimp 2.8, Microsoft Office Picture Manager, Microsoft Paint (seriously)
1. Locate the historical image you wish to superimpose onto a modern one. For this example, I will be utilizing the fantastic digital archive of historical photographs of Mexico City created by Carlos Villasana, Juan Carlos Briones, and Rodrigo Hidalgo and located on their Facebook page, La ciudad de Mexico en el tiempo.
2. In this case, I selected a photograph of the iconic Palacio de Bellas Artes under construction during the first decades of the twentieth century (See below). Once one has decided on the historical image, it’s time to find its modern counterpart using Google Maps.
3. Normally, one would need to open up a browser, go to the Google Maps site, and locate the approximate modern location of your historical object/building/event from the vintage photograph. Fortunately for those of us interested in the history of Mexico City, La ciudad de Mexico en el tiempo’s photo galleries include links directly to the Google Maps Street View corresponding to the vintage images. (See image below.)
4. While viewing the modern location In Google Maps Street View, attempt to recreate the same angle and viewing distance as the original historical image. This can be frustrating as Street View may not provide the perfect perspective for the juxtaposition of the two images. This issue can be resolved by taking one’s own photograph at the physical location, but of course this is much more time-consuming and may require some travel. Once you have lined up your perspective in Street View as best as possible, it’s time to capture the images.
5. To capture the two images (historical & modern) for beginning the juxtaposition process, I’ll use one method for both images, although there are several ways to accomplish this step. For all images that cannot be right-clicked on and the image directly downloaded, you can use the “print screen” button on your keyboard. Move your mouse cursor away from the area of the image you want to capture and click the print screen button once. (See image below.)
6. This single press of the button copies the entirety of your screen to be pasted into an image retouching program, which in this case, will be good old Microsoft Paint. Open up Paint and press the “paste” icon in the upper left corner of the program. (See image below.)
7. Once you’ve hit this button, the captured image should be pasted into Paint for capture as a .jpeg file. Go to the drop down icon in the upper-left corner of the program and select “Save as” and then “JPEG picture.” (See image below.)
8. Do this process twice, once for the Street View image and one for the historical image, and save your new image files to a secure, familiar location on your hard drive (these steps can be skipped if you scanned and/or uploaded the image files to your hard drive yourself rather than from the web).
9. To edit these images for juxtaposition, we’ll need to crop them down a bit, so open these two image files with Microsoft Office Picture Manager or your image editor of choice. You can select which program to open these files with by right-clicking on the image file and selecting the program from the drop-down list. Once you’ve opened the image file, you’ll want to open up the option to “edit pictures” or its equivalent. (See image below.)
10. To crop out the unwanted content surrounding the images, use the “crop” tool to edit the image. (See image below.)
11. Once this has been done, the perspective of the modern image should resemble the historical image as closely as possible. (See image below.)
12. Now that we have our two images looking as similar as possible prior to juxtaposing, we are ready to open up the modern image first using our free image retouching program, GIMP. Certainly it is possible to retouch these photos using Adobe Photoshop, but money doesn’t grow on trees, and as an adjunct professor I’m always looking for ways to cut costs and instead utilize good quality freeware. Download and install GIMP (I’ll be using GIMP 2.8 here) from their official website.
13. Open the modern image pulled from Street View first, clicking on the “open” tab found under the “File” icon. (See image below.)
14. Once you’ve successfully imported the image into GIMP, it should look like the image below. A multitude of tools are now at your disposal for image retouching, but first you need to import the historical image (See image below.)
15. Instead of using “open” to bring in the historical image, go to “File,” select “Open as Layers,” and then the image file for the historical photograph. (See image below.)
16. Once you’ve imported the historical image in as a separate layer, your screen in GIMP should look like the image below. Now it’s time to manipulate the size and positioning of the historical image to match the modern image. (See image below.)
17. The first tool needed to manipulate the historical image is the “move” tool, located in the “toolbox” window on the left side of the program. This tool allows you to grab and relocate the positioning of the historical image atop the modern one. (See image below.)
18. The other very important tool utilized for this process is the “scale” tool, also located in the left-hand toolbox window. This tool allows you to resize the proportions of the historical image to fit as precisely as possible on top of the proportions of the modern image. (See image below.)
19. After you click the scale tool button, left click on the historical image to begin resizing it. A grid and resizing boxes will appear over the historical image, allowing you to either input the exact pixel dimensions of the image or to left click and hold on the resizing boxes at the edges of the image.(See image below.) I prefer to resize using the latter method, but be sure to hit the “scale” button on the pop-up box once your resizing process is complete. However, to “perfectly” line up the two images, you’ll need to use a combination of “scale,” “move,” and a particular image attribute explained in the next step.
20. The obvious challenge in lining these two images up and resizing/repositioning the historical image is the inability to see through the historical to the modern for accurate juxtaposition. This can be resolved by adjusting the “opacity” of the historical image via a slider bar located under the “Layers” window on the right side of the screen. (See image below.) By clicking/sliding this attribute’s value (0-100), the historical image becomes more transparent as the opacity value goes down. By doing this, the modern image can more easily be seen in the background, allowing for accurate resizing/positioning of the historical image.
21. As you reposition and resize your historical image, be sure to use visual reference points in your two images to ensure proper overlap. In this example, I used three specific visual markers. (See image below.)
22. Once the two images are properly juxtaposed on top of one another (see image below), it’s time to remove unwanted visuals from around the historical image in order to blend it into the modern landscape.
23. The final tool to be utilized is the “eraser” tool, located on the toolbox window on the left side of the program. (See image below.) Adjust your brush size, hardness, and opacity to remove the background from the historical image.
24. Carefully use the eraser tool to remove unwanted image materials around the historical image, careful not to go too quickly or with a brush that is too large to preserve the fine details at the edge of the building. (See image below.)
25. This process of erasing and blending is where an artistic eye can be helpful, as the best means of blending in the street lamps, bushes, and pedestrians to appear as a natural part of this hybrid image is up to the editor. Use a medium-opacity eraser at the edges of the historical image to carefully blend it into the modern background to complete the juxtaposing process. (See image below.)
26. You can now finalize your juxtaposed image by exporting it from the program. Click the file icon and select “export” from the drop down menu. You can select the file type (.png, .jpeg, etc.) and save location, click the export button, and you are done! (See image below.)
27. These steps are a very crude, simple means of juxtaposing a historical and modern image, but I hope this tutorial provides a starting point for historical enthusiasts/image retouching novices to get started. I will continue to update and edit this tutorial as I learn more about fine tuning the process and improving the quality of the final product. I look forward to seeing your images!
After the wonderful but time-intensive relationship with Twitter in my world history surveys last semester, I decided to take a break from group projects and social media. This semester I gave my students a chance to create their own uncompromising, individual vision for a history project. Using the free, web-based software provided by Tiki-Toki, my 260+ students all “translated” research papers they completed earlier in the semester into digital, interactive timelines available for public consumption. As I stated in my post concerning the Twitter project, I am a huge believer in the capacity for these types of digital projects to empower, inspire, and educate students through the use of such a student-centered approach to learning. Through the creation of these timelines, students learn a greater appreciation of chronology and periodization, the art of constructing a historical narrative fit for “everyman” usage, and training in the usage of a powerful digital toolkit. I’m happy to say it was extremely difficult to narrow it down, but below are the top ten timelines produced by my students this semester. Enjoy!
In an attempt to answer a question frequently asked on Twitter: “What universities have graduate programs in the digital humanities?” I offer up this latest post. As of now, there is no “master list” of universities offering digital humanities courses at either the undergraduate or graduate level, provoking me to produce my own list of such programs. However, as much as I believe my initial attempt to answer this question is a step in the right direction, it heavily relies upon a certain assumption. My undoubtedly incomplete list found below is composed of DH centers, projects, and initiatives at a number of universities in the United States. Considering that these universities have devoted substantial financial and intellectual resources to the study of the digital humanities, I assume that they also are offering courses on the subject as part of their regular curriculum. Certainly @DHcenterNet’s list of digital humanities centers is a good place to start, but at the time of this post, the following serves as a more comprehensive list (please feel free to email me at firstname.lastname@example.org to add additional universities to this list or to correct any of the information found below):
Alabama Digital Humanities Center at the University of Alabama
Baker-Nord Center for the Humanities at Case Western Reserve University
CATH: Center for Applied Technologies in the Humanities at Virginia Tech University
CDH: Center for Digital Humanities at the University of South Carolina
CDRH: Center for Digital Research in the Humanities at the University of Nebraska-Lincoln
Center for Digital Humanities and Culture at the Indiana University of Pennsylvania
Center for Digital Humanities at Brock University
Center for Digital Scholarship at Brown University
Center for Scholarly Communication & Digital Curation at Northwestern University
Centre for Oral History and Digital Storytelling at Concordia University
CHNM: Center for History and New Media at George Mason University
CMS: Comparative Media Studies at Massachusetts Institute of Technology
CPHDH: Center for Public History + Digital Humanities at Cleveland State University
CTSDH: Center for Textual Studies and Digital Humanities at Loyola University
CUNY Digital Humanities Initiative (all 24 CUNY campuses)
DHC: Digital Humanities Center at Columbia University
DHI: Digital Humanities Initiative at Hamilton College
Digital History Lab at California State University-San Marcos
Digital History Lab at Harvard University
Digital History Lab at Princeton University
Digital History Lab at the University of Massachusetts-Amherst
Digital Humanities 2.0 Collaborative at the University of Minnesota
Digital Humanities Initiative at Hamilton College
Digital Innovation Lab at the University of North Carolina
Digital Scholarship Commons at Emory University
Digital Scholarship Lab at the University of Richmond
Digital Studio for Public Humanities at the University of Iowa
DSC: Digital Scholarship Center at the University of Oregon
HASTAC: Humanities, Arts, Science, and Technology Advanced Collaboratory at Duke University
Humanities Research Center at Rice University
Humanities Technology and Research Support Center at Brigham Young University
I-CHASS: Institute for Computing in the Humanities, Arts, and Social Science at the University of Illinois
IDAH: Institute for Digital Research in the Humanities at the University of Kansas
IDHMC: Initiative for Digital Humanities, Media, and Culture at Texas A&M University
Institute for Advanced Technology in the Humanities at the University of Virginia
IRIS: Interdisciplinary Research and Informatics Scholarship Center at Southern Illinois University
MATRIX: Center for Humane, Arts, Letters, and Sciences Online at Michigan State University
MITH: Maryland Institute for Technology in the Humanities at the University of Maryland
Research in Computing for the Humanities at the University of Kentucky
SJCDH: South Jersey Center for Digital Humanities at Stockton College
Spatial History Project at Stanford University
Virginia Center for Digital History at the University of Virginia
Wired Humanities Project at the University of Oregon
For this post, I’m going to provide step-by-step instruction for those of you interested in creating network graphs using Gephi. Certainly there is other open-source software available for visualizing social network and textual data such as Pajek (this website could use a serious design update), but at the time of this post, Gephi 0.8.2-beta has some significant advantages. Software such as Pajek allows you to save your project file as a .bmp, .png, or .svg, but Gephi allows you to save your graph image as a .pdf.
Additionally, Gephi’s most significant advantage over the competition comes from the inclusion of the sigma.js plugin, which uses the HTML canvas element to display static graphs like those generated in Gephi. This is a massive leap forward for sharing graphs generated in Gephi, as now they can be uploaded directly to your server/website using an FTP file manager such as FileZilla. To interact with the graph rather than view it as a static image used to require downloading the specific, proprietary program file containing the graph from its creator, then downloading the specific software to open the file. However, with the sigma.js plugin, interactive graphs can be displayed and shared instantly via a simple web address.
To begin the process of creating and sharing your own network graph using Gephi, I’ll break the process into a series of simple steps. I think these instructions will be useful to those of you starting out, as a simple, step-by-step “Gephi for Dummies” manual simply doesn’t exist at the time of this post, something that I wish I had when I first started working with the software. Gephi has a “Quick Start” guide here which is worth a look, but it leaves much to be desired as a basic guide for a novice user. The following instructions which I’ve created owe much to the wisdom and experience of Jason Heppler and Rebecca Wingo, graduate school colleagues who provided a lot of assistance during my trial and error process of figuring out Gephi’s software.
1. Download and install Gephi from their website.
2. To download and install the Sigma.js plugin, open Gephi. Click on the “Tools” tab and click “plugins” from the drop-down menu.
3. Click on the “Available Plugins” tab and scroll down nearly to the bottom of the list to find the “Sigma Exporter” plugin.
4. Click the check box next to the “Sigma Exporter” plugin, then click the “Install” button at the bottom left corner of the window. (See screenshot below.)
5. Once the plugin is downloaded and installed, close and re-open Gephi to complete the plugin installation.
6. Now it’s time to format your data for importation into Gephi. Using Microsoft Excel, create a two column data set. The specific format for the data needs to be divided into one column as SOURCE and the second column as TARGET. (See example screenshot below).
7. The SOURCE column on the left determines the number of nodes your graph will contain and the TARGET column will determine the number of edges (or connections) between nodes. Repeat the node-edge/source-target pattern in these two columns for each connection between nodes you wish to visualize.
8. Once you’ve entered in (or hopefully imported) your data and saved it as a .csv file, you’re ready to import the file into Gephi.
9. Open Gephi, click the “File” tab, then click “Open” from the drop-down menu. Browse for your .csv file, and click the open button at the bottom of the window.
10. This will open the “Import Report” window. Make sure the “Create Missing Nodes” box is clicked, then hit OK. (See screenshot below.)
11. To label your nodes in the graph, click on the “Data Laboratory” tab.
12. At the bottom of the screen, click the “Copy data to other column” button, then select “ID” from the drop-down menu. (See screenshot below.)
13. In the pop-up box, select “Label,” then OK. (See screenshot below.)
14. Now click on the “Overview” tab to tinker with your graph’s spatial/visual layout.
15. Click on the “Choose a layout” tab on the lower-left part of the window to determine how you want to display your nodes and edges. A popular choice is either of the “ForceAtlas” templates, but I’d recommend tweaking the value of the “gravity” input to expand/contract the spread of your nodes to your liking.
16. At this point, you should be able to see your network graph on the “Overview” page and can choose to export your graph as a .pdf or as a Sigma.js template. Click the “File” tab, scroll down to “Export” and select your preferred format for exportation. If you choose to export using the Sigma.js template, Gephi will create a folder containing files ready to be uploaded to your server/webpage. If you want to view the graph in a browser, click on the “index” file in the folder.
17. (ADVANCED) For those of you who wish to further tweak your visualization, you can customize your node colors and sizes by linking them to particular data attributes.
18. This is accomplished using the statistical analysis options on the right side of the “Overview” interface. (See screenshot below.)
19. To color code your nodes by cluster and to emphasize the significance of particular nodes via node size, you’ll need to run at least one of several statistical analyses, which are located on the right side of the screen.
20. I found that running “Avg. Path Length” under the “Edge Overview” tab to be particularly helpful in visualizing relationships between nodes. This statistical analysis generates new metrics such as “betweenness centrality,” which, when tied to node size, visually emphasizes the more significant nodes in the graph. (See screenshot below.)
21. To link “betweenness centrality” to node size, click the red jewel icon on the upper-left-hand side which selects the size/weight attribute for each node, then click the “Choose a rank parameter” tab on the upper-left side and select “betweenness centrality” as the attribute you wish to link to size/weight. (See screenshot below.)
22. You can link any of the attributes from the “Choose a rank parameter” tab to node color, size/weight, and labels, so there’s a great deal of customization options available to you.
23. Once you’ve established the link between your nodes and your attribute of choice, you can adjust the min/max size and color of your nodes to further customize your graph.
24. This is as far as I’ve gone with Gephi, so I’ll end here with a couple final troubleshooting tips after you’ve exported using the Sigma.js template.
One issue I had during my first project was that in Overview, my labels and custom node sizes showed up fine, but upon exporting the graph, all the nodes were the same, tiny size and had no labels.
To fix this particular issue and/or to customize which nodes are labelled, you’ll need to open the folder created by the Sigma.js template and then open the “config.json” file with Wordpad or an .xml editor. (See screenshot below.)
Once you’ve got the file open, scroll down to the lines “maxNodeSize” and “minNodeSize,” change the values until your nodes are large enough, save the file, and re-open the “index” file in your browser. (See screenshot below.)
To fix the label issue, lower the “labelThreshold” value in the config.json file to assign labels only to nodes equal to or above a certain weight. Again, save the file once these changes are made, and re-open your “index” file in your browser to view the results.
My first project using Gephi resulted in a network graph created using 33 nodes and 213 edges. This was just a test run using the names of several prominent political figures from twentieth-century Mexican history, so my data set doesn’t actually analyze anything (however, I have plans, big plans for the near future.)
This screenshot is equivalent to the level of interactivity you can gain from viewing the graph as a .pdf, a static image. However, with the aid of the Gephi.js plugin, you can view a fully interactive version of the graph here, complete with clickable nodes containing a variety of attribute data.
I hope you find this tutorial useful, and I look forward to seeing your future projects using Gephi. Stay tuned for more mapping and network graph projects I’m churning out this fall, and feel free to contact me at email@example.com if you have any questions.