Category Archives: digital humanities

Teaching with Tumblr and StoryMapJS

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:

Women of Colonial Latin America


A Cartographic Analysis of Colonial Latin America


Slavery: Conditions in Colonial Latin America


Racialized Depictions of Women & Children


The Chronicle of Felipe Guaman Poma de Ayala


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:

The Mexican-American War


The French Intervention in Mexico


Afro-Mexicans: An Invisible Population


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.

1 Comment

Filed under data visualization, digital history, digital humanities, history, public history

If These Bones Could Tweet: Teaching Introductory-Level History Courses with Twitter

As I transitioned from student to professor over the last year, I sought to find ways to transform the passive, top-down, large-scale lecture course into a student-centered, highly active, and goal-oriented collaborative learning environment.  To accomplish this, I have come up with an introductory-level course build utilizing Twitter and Google Drive in order to re-imagine the concept of the in-class “group project.”  In my three introductory-level world history courses this semester involving the participation of over 325 students, large-scale, collaborative group projects designed to “put history into action” serve as the central research project for each class.  The students, primarily freshman, have formed groups of 10-15 individuals tasked with the goal of a producing and publishing a work of digital public history via Twitter over the course of the semester.  I certainly remain skeptical of the promotion of technology in the classroom as the cure-all for the ills of higher education, but having seen the impact of this digital project on my students even within the short span of the first seven weeks of the semester, I have become a true believer in the potential of social media as a powerful pedagogical tool for transforming students into active, passionate learners working within these new “communities of practice.”

During the course of the semester, these groups work collectively to identify potential primary and secondary sources on a given historical topic, analyze those sources, compile data gleaned from those sources into a digital database stored on Google Drive, and finally publish a collaboratively-produced historical narrative using Twitter’s micro-blogging service, complete with metadata in the form of hash tags.  Through the merger of traditional historical methodologies with what was formerly a social media platform employed by students for “idle use,” Twitter is transformed into a powerful tool for turning students into producers, rather than mere consumers, of historical knowledge.  This hands-on engagement with historical sources and the utilization of social media, web publication, and digital databases to create collaborative, digital public history projects democratizes the practice of history and expands the notion of public history from exhibits and programs created for public viewing to an interactive historical space shared by its student creators and interested members of the public.

In the recent past, a number of educators have used social media such as Twitter as a means of extending student discussion outside the physical confines of the classroom.  My experiment attempts to go one step further towards integrating social media into the classroom by making it the central focus of the course itself.  These student-led Twitter projects form the pedagogical core of my world history courses and  provide instruction and practice in historical methodology, including the construction and manipulation of historical databases, navigating historical archives and databases, the analysis of primary and secondary sources, and the art of writing historical narratives.  Looking to the high-quality examples of historical publication on Twitter such as @RealTimeWW2, @TitanicRealTime/@WChapelRealTime, @CryForByzantium, and numerous others, these student-led projects seek to contribute to the body of historical knowledge available online.

Learning outcomes from this process are numerous and varied: students quickly learn to discern an academic from a non-academic source; work collectively to determine the best narrative structure for the publication of their particular topic; develop an awareness of the opportunities and challenges inherent to communicating information through digital media; utilize digital and physical library resources; construct Chicago Manual of Style-formatted bibliographies for their sources; and become “knowledgeable users” of several digital technologies.  Additionally, this project presents a powerful opportunity for “deep learning” on their historical topic, helping to offset the rapid pace of introductory-level courses which often are forced to skim the surface  of historical knowledge to stay on schedule.  The flexible, student-centered nature of this project also allows students to express their creativity and diverse personal perspectives, as a significant proportion of the projects being developed this semester deal with some aspect of gender, race, and/or class.

As of November 1st, the majority of groups have “gone live” and are now publishing their content on Twitter, allowing me to finally reveal the results of my students’ hard work over the last eight weeks.  They will continue publishing for the remaining six weeks of the semester, allowing their accounts to roll out at a semi-reasonable pace and hopefully attracting some interest from you, the public.  Are these projects perfect?  Absolutely not.  There will be some errors, as with any endeavor of this size created at such a high rate of speed, things will still slip through the cracks during the final edits.  However, while I am concerned with the historical accuracy and presentation of these topics, I am much more concerned with what my students have learned during the process of researching, writing, and synthesizing historical information for their projects.

I could not be happier with the ways in which this concept-driven, interactive course format has motivated and excited my students beyond what I’ve ever experienced before.  Innumerable students have approached me outside the classroom to express how enthusiastic they are about this project and how they have shared their work on the project with a family member, their friends, and even potential employers.  Additionally, this project allows exceptional students to stand out from their peers in a number of ways which traditional assessments simply do not allow for.  The leadership skills, drive, and creativity demonstrated by many of my first-semester freshmen has changed my (and I think their) assumptions about the complexity of tasks they are capable of successfully completing.

This kind of public, immersive digital project produces an end product which students are extremely proud of, as they are helping to contribute to the growing body of historical knowledge available on the web.  I believe these kinds of innovative digital projects could play a significant role in the future of the historical practice and directly address the concerns expressed in a recent article in Perspectives in History written by 2012 National Humanities Medal recipient Edward L. Ayers, in which he describes his undergraduate students’ appeal for historians “to engage people where they are…we must employ the tools people use every day to build communities of understanding in real time…[and] expand our definition of scholarship so that it would flourish in the new world of social media. [The students] felt certain that the public that would be interested in what scholars were writing if they could just see it. They wanted to put scholarship to work in the world, to make it a living presence.”[1]

For my future teaching, there is no going back to purely traditional methods.  As early as this spring, I plan to experiment with a number of other digital tools in my introductory-level courses, including the creation of interactive map layers utilizing Google Earth, virtual museum exhibits using Omeka/Neatline, and visual narratives constructed using Tumblr.  Also, this spring I have the honor of teaching the first upper-division methods course on the practice of digital history ever offered at Colorado State University, so next semester be prepared for a flurry of online tutorials and blog posts referencing our work across a number of my courses (you can follow me on Twitter at @rjordan_csu to stay on top of all my updates.)  For our Twitter projects for this semester, the following is a comprehensive list of accounts if you’re interested in viewing my students’ work and to start following them:

HIST 170.001 – World History: Ancient to 1500 (Topics on the Mediterranean World):

  • @Gladiator_Facts – A historical exploration of the lives of gladiators in ancient Rome.
  • @lifeofcleopatra – The life and reign of Cleopatra VII of Egypt, one of the most famous and fascinating women of the ancient world.
  • @AncientSports – A historical exploration of the variety of sports played in the ancient Greek world (GSPN).
  • @CenturionDaily – The life and times of a Roman centurion in the time of the Roman Civil War.
  • @Apostle__Paul – A historical account of the life and world of the Apostle Paul.
  • @Techno_Rome – A historical exploration of the technologies introduced and employed during the time of the Roman Empire.
  • @CaligulaTheMad – The life and reign of Caligula, one of the most infamous Roman emperors of all time.

HIST 171.004 – World History: 1500 to Present (Topics on the Industrial Revolution):

  • @WomenatWork171 – The narrative of the lives of four women living in London, England during the Industrial Revolution.
  • @VoicesofBedlam – A historical narrative describing the lives and conditions of Bethlem Mental Institution in the 19th century.
  • @LawandOrderVL – Two fictional detectives solve real cases straight from the criminal underworld of 19th-century London.
  • @RailroadsMuseum – A historical examination of the development of railroads on a global scale.
  • @TheOilBoomer – A historical narrative of the life of John D. Rockefeller and the oil empire he created.
  • @LondonLaborers – A historical retelling of the lives of child laborers in London during the Industrial Revolution.
  • @FivePoints_NYC – A historical narrative of the multitude of people living in the infamous Manhattan neighborhood known as Five Points during the 19th century.
  • @Allanpinkerton3 – Historical facts and stories involving the Pinkerton Agency.
  • @MedicinalRevo – A historical examination of aspects of medicine during the Industrial Revolution.
  • @londonunderworl – A narrative of the lives of everyday people living in London, England during the Industrial Revolution.

HIST 171.006 – World History: 1500 to Present (Topics on World War II):

  • @atomiclibrary – Facts and historical fiction pertaining to the Manhattan Project and the development of the first nuclear weapons.
  • @battleofmoscow – The devastating Battle of Moscow and events leading up to this military struggle from various perspectives.
  • @GoForBroke_442 –  The stories of the fighting men of the U.S. Army’s 442nd Battalion during their distinguished service in World War II.
  • @Story_AnneFrank – A historical exploration of the world of Anne Frank and her diary.
  • @thebritblitz – A historical examination of the Nazi bombing campaign on London during World War II.
  • @ww2propaganda – The history of World War II as told through a collection of global war propaganda.
  • @OpWatchtower – A livetweeting of the Naval Battle of Guadalcanal and Operation Watchtower from the perspective of a fictional embedded journalist.
  • @StalingradWW2 – A historical retelling and examination of the Soviet counterattack codenamed “Operation Uranus” centered on the city of Stalingrad from November 19-23, 1942.  (Live tweets to come).
  • @WWIIPearlHarbor – A historical retelling and examination of the events of December 7, 1941, “a date which will live in infamy.” (This group will be doing some major live tweeting later in the semester).

[1] Edward L. Ayers, “An Assignment from Our Students: An Undergraduate View of the Historical Profession,” Perspectives in History, September 2013, accessed October 8, 2013,

1 Comment

Filed under digital history, digital humanities, history, public history, Social media, Twitter

Getting started with Gephi

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.)

sigma screenshot

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).

excel screenshot

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.)

import screenshot

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.)

labelid screenshot

13. In the pop-up box, select “Label,” then OK. (See screenshot below.)

label screenshot

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.)

analytics screenshot

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.)

betweeness screenshot

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.)

sizeweight screenshot

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.)

config screenshot

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.)

wordpad screenshot

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.)

photo screenshot

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 if you have any questions.


Filed under data visualization, digital humanities, gephi, history, mexican history, network graph, textual analysis