3A: Big Data and Digital Humanities

Zooniverse: People powered research

In-Class Project

Last week we tore furiously through the front-end of web development — HTML, CSS and JavaScript.  But we are not learning coding here, we are doing Digital Humanities. Today let’s look at how we can put those skills into practice for humanities data to tell a story.

One of the longest-running types of applications is an interactive timeline.  We will do a class project to convert a flat timeline into an interactive one using an easy to use application, but there are other tools that require more coding and show you how these work.  Take a look at the SIMILE timeline tool for an example of one of those.

Today, we are going to use the beautiful TimelineJS framework to give the college archive’s Timeline of Carleton History a web 2.0 overhaul.  This timeline was created in 1991 for the college’s 125th anniversary celebration, and while the content is still great, the presentation could use an update as we near the 150th anniversary in 2016.  Archivist Tom Lamb has given us permission to use the timeline as our dataset, and we are going to build a new, dynamic JSified instance of it as our first group project.

The timeline is broken into five date ranges between 1866 and 2002.  I have set up the first one as an example, and it is each group’s task to replicate this work for your own date range by doing the following:

  1. Go to the TimelineJS page and follow the 4 step instructions to Make a New Timeline
    • In Step 2, whoever downloads the Google template should share it with the other group members so that all may editScreen Shot 2015-01-15 at 12.17.03 PM
    • In Step 4, copy the embed code and paste it into a new jsBin.  This is where you will work on your own date ranges for now, and we will combine them all together next week.
  2. Once you are setup, delete the template data and move over your group’s data from the Timeline of Carleton History. The dates and captions should come over with an easy copy/paste, but then you’ll probably need to finesse the rest of the data a bit.
    • You might need to change the number format of the Date columns to a different date display or even Number > Plain Text to get them to display and order properly
    • All entries should have a brief headline that summarizes the text on that date’s card, which you’ll need to write
    • Where there are images on your page, click them to bring up the full resolution version in the fancybox viewer, then use your DevTools knowledge to find the image URL to paste in the appropriate Media column in the sheet
    • Where there are no images, see if you can insert a Google Map if appropriate.  Or search the Carleton Archives Digital Collections to find other appropriate photos or scanned documents
      • NB: All Media should have a Media Credit, which will usually be “Archives, Carleton College Gould Library
    • Finally, explore what happens to the timeline when you use tags to categorize events.  I used buildings and people as two basic categories on my example

If you’re in doubt or stuck, post a comment, ask a question on your blog or (as a last resort) send an email and we’ll try to help each other out.


Big Data

Big Data generally refers to extremely large datasets that require demanding computational analysis to reveal patterns and trends, such as the map below generated from the data in millions of Twitter posts. We are producing reams of this data in the 21st century, but how do we analyze it from a humanities perspective?  How do we perform these sorts of analyses if we are interested in periods before regular digital record keeping?

World travel and communications recorded on Twitter
World travel and communications recorded on Twitter

Enter digitization and citizen science initiatives.  One of the major trends in Digital Humanities work is the digitization of old records or print books that are then made searchable and available online for analysis.  Google Books is the most well-known project of this type, and we also read Tim Hitchcock’s article about his pioneering historical projects in this arena, e.g. the Old Bailey Online and London Lives.  These projects took years to build and required the dedicated paid labor of a team of scholars and professionals.  But there’s another model out there that relies on the unpaid labor of thousands of non-expert volunteers who collectively are able to do this work faster and more accurately than our current computers: crowdsourcing.

Zooniverse is a crowdsourcing initiative that bills itself as “the world’s largest and most popular platform for people-powered research.”  This platform takes advantage of the fact that people can distinguish detailed differences between images that regularly trip up computers, and empowers non-experts to contribute to serious research by reducing complex problems to relatively straightforward decisions:

  • is this galaxy a spiral or an ellipse?
  • is this a lion or a zebra?
  • is this the Greek letter tau or epsilon?

The project that Evan and his team just launched, Measuring the Anzacs, seeks to study demographic and health trends in the early 20th century by transcribing 4.5 million pages worth of service records from the Australian and New Zealand Army Corps during WWI.  This data would take countless years to process with a small team of researchers, but as Evan told us, they hope to speed up this process tremendously by taking advantage of the fact that there are lots of people who have access to a computer, speak English and can read handwriting.

Tim Hitchcock ended his piece with a conundrum:

How to turn big data in to good history?  How do we preserve the democratic and accessible character of the web, while using the tools of a technocratic science model in which popular engagement is generally an afterthought rather than the point.

The Zooniverse model has taken a major step towards resolving this tension and turning formerly restricted research practices into consciously public digital humanities work.

 


Assignment

Explore the Measuring the Anzacs project and work your way through at least one document, marking and transcribing the text.

Screen Shot 2015-09-30 at 6.24.24 AM

When you’re done, post a brief comment below giving some feedback on the process.  Were the instructions easy to follow?  Was the text easy to transcribe?  Did you feel like you were making a real contribution to the project?  What did you get out of the project, from a humanities perspective?  Did you come away with a greater understanding of either the research process or the lived experience of the individual people whose records you were working with?

2B: JavaScript 101

JavaScript logo

JavaScript is the lingua franca of the modern responsive web, and almost all the pages you interact with online use it in some form or other.  As with the other things we’re learning in this class, our aim is not to memorize every aspect of the language and become experts overnight, but to gain enough understanding of what it is and how it works so that we can ask the right questions when conceiving our own projects and can intelligently leverage the hard work of people who know these things much better than we do.  Thank heavens for JavaScript libraries!


In Class: Hacking with jsBin

To get the hang of how these three languages fit together we are going to explore some examples I set up in jsBin.  This code sharing site is a fantastic tool in the hacker’s toolbox, since it lets you copy and edit code in the cloud without having to invest in your own setup or FTP files to a server, view the output live, and then share all of it with others really easily.  We’ll be making a lot of use of jsBin in this class, so get used to the interface.

The first example is basic, and will let you test out what each of our three major client side languages does, and hack away to make modifications.

Go to http://jsbin.com/busimo/edit?output, follow the instructions, and start hacking.

The next example illustrates the power of the useful and ubiquitous jQuery library, which lets us do fancy things like extract data from structured markup, with a lot less code than straight JavaScript.  For this example, we’re trying to take the Carleton timeline information from this website and put it into a JS object (for a full description of this method see Dave Ward’s post).

Go to http://jsbin.com/zohawafinu/edit?html,js,output read the comments and try to figure out what’s going on.

 


Assignment

The assignment for this week is twofold:

First, make sure you have registered your domain and installed WordPress, and then spend some time setting up your personal website on your newly installed server. These are the most basic steps you should take to get your site looking like personalized rather than a generic WordPress blog.

  • Create an “About” page (not Post) to let the world know who you are
    • Write a brief bio paragraph about your background, what you are studying, your goals, etc. and post it to the site.  See mine at meDHieval.com for an example.
  • Get an API key for the Akismet plugin and activate it to block comment spam.
  • Choose a new theme to install and activate it
  • Add the Simple Custom CSS plugin and use your DevTools skills to change at least one element of your site’s design via CSS code

Secondly, continue your self-directed journey of discovery by taking at least one JavaScript course at Codecademy, so that you can include that experience in your blog post detailed below.

Blog Post

Your course blog post assignment for this week is to reflect on your experience with coding so far, and engage in the debate within the DH community over whether or not humanities students should learn to code.  Your post should include the following:

  • A clear statement in the first paragraph stating your position either for or against.
  • A discussion of your coding experience, including a link to your profile page on Codecademy
    • This link is in the format www.codecademy.com/<username> and can be accessed by clicking your avatar icon in the top right corner of the page
    • The profile should show at least one lesson each in HTML, CSS, and JavaScript
  • At least one quotation from each assigned reading: Kirschenbaum for, or Donahue against.
  • At least one example from your own experience coding, either this week or earlier, that supports your position.

References and links to other articles/blog posts on the issue or not required, but will be looked upon kindly.

 


Resources

JavaScript

Julie Meloni has written several how-to guides for programming, and has very helpfully posted two gentle introductory lectures pitched at Digital Humanists on Slide Share.  We covered some of this material in class, but here are the full lectures to peruse at your leisure.

 

2A: HTML/CSS 101

HTML and CSS are the bedrock foundations on which the world wide web (and therefore most digital humanities projects) are based.  HTML provides the basic structural markup that tells your browser what to do with the information on your page.  In the early days, HTML offered rudimentary styling and layout support as well, but CSS (Cascading Style Sheets) offers a much superior method of making all the different elements of your pages look exactly how you want them to look, and go exactly where you want them to go.  The biggest benefit of style sheets is that one sheet can influence the appearance of an infinite number of pages, allowing you to update code in only one place to change anything from the color of text to the positioning of an element.


Assignment 1

Your task for next time is to write your first true blog post.

Having watched Miriam Posner’s video and read Johanna Drucker’s article on the components of a DH project, explore one of the sites below and write a post trying to reverse engineer one of these DH projects.

Make sure your post does the following:

  • Introduces and links to the project you explored.
  • Contains an image of the project that links directly to it.
  • Breaks down the black box of your digital project by indentifying its
    • Sources (assets)
    • Processes (services)
    • Presentations (display)

You may need to poke around the About or FAQ sections of the page to figure out this information, but see how far you can get.

As you write, remember that blog writing is a different beast that lies somewhere between formal academic writing and casual social media or email style.  Try for a tone that is scholarly and informed but neither too stiff nor too sloppy.  It can be a tough balance to strike, but think of your intended audience and try to find a voice that works for you.


Assignment 2

There are many excellent resources for learning the fundamentals of HTML and CSS on the web.  If you want to build pages from scratch from the ground up, pick your favorite code school or tutorial series from the resources section below and go crazy.  In this course, however, we are primarily hacking and modifying other people’s code for our own purposes, rather than building from scratch, so we will keep it simple.

  1. Your assignment is to create an account at Codecademy, if you don’t already have one,
  2. Take at least two courses (one on HTML and one on CSS).
    • Many of you already have some HTML experience, and a few already have CSS experience, so if you’re an experienced user, chose a lesson further down the list and challenge yourself.  If you’re new to web development start near the top with the basics.
  3. After you’ve successfully completed your short courses, Codecademy will give you badges. Save the URL of your profile page, since we’ll link to it once we get up and running next time.

Make sure you remember to comment on at least two fellow classmates posts before next class.

And bring your credit card! We’ll be setting up our own servers next time.


Resources

Here are some places to go for more information If you need a refresher on the tools we used in class

  • An Introduction to DevTools for Chrome, and a more detailed discussion (with nifty GIF examples!) of using them to edit CSS styles
    • If you regularly use a different browser you can also checkout the comparable tools for Firefox and Apple’s Safari, but I would recommend reducing confusion by sticking with Chrome’s until you get the hang of it before figuring out how others differ.
  • A quick rundown on the basics of the fantastically useful Digital Color Meter for Mac OS X, which lets you grab precise colors from images to use in your CSS.

Codecademy is a great place to start, but there are tons of other places to learn coding on the web for free.  Here are a few further HTML/CSS resources:

  • w3schools.com is one of the most comprehensive sites around, with many excellent lessons and a handy “TryIt” tool that lets you see your code in action.
  • HTML Dog offers a solid series of tutorials with beginning, intermediate, and advanced tracks on the three major client-side languages you need to know: HTML, CSS and JavaScript.  They also have several minimal example pages for specific effects you might want to achieve.
  • A straightforward HTML assignment of constructing your first page from the ground up from the folks at UCLA’s Digital Humanities 101 course.
  • A handy list of the most common HTML elements to familiarize yourself with at ReWritables.net.
  • Since Carleton has an institutional subscription, you can also check out the HTML and CSS video tutorials on Lynda.com if you’re hungry for more.

If you find another that’s helpful, pass it along on your blog.

Happy coding!

1B: WordPress 101

Debates over the definition of the Digital Humanities are by this point very clichéd, to the point that many people have begun arguing that we stop worrying about it altogether.  There is a building consensus that DH, however you define it, is above all a community, or if you like a social network; specifically, a community of practice that is open, public, collaborative, and above all welcoming.  The main thing you have to do to get involved, is to just get involved.  Express your interest by joining the community.  One of the main ways people do that is by posting, blogging and tweeting their ideas, projects, and questions publicly on various platforms.

To that end, you will all be reading, writing, and sharing what we do this term on this blog and your own, which we’ll set up next week.  This is not just about trying out the digital humanities.  It is also about practicing skills that will serve you well beyond your college career no matter what you choose to do.  Having control over your internet presence is crucial in this day and age, and building your own website is one of the best ways to craft and maintain a public, online identity.

 


In Class

For starters, you’ll register for this class site so you can comment on assignments, post to the blog and get familiar with the WordPress interface, if you aren’t already.

Follow these instructions to register for our course site and post your first comment.

Once you’ve done all that…

  1. Log in to the Hacking the Humanities class blog and make a new post sharing the 2D image of your house that you exported from SketchUp and telling us about your process. How easy/hard was it?, what elements particularly bogged you down?, what compromises did you have to make?
    • Make sure to also share a tip for other novice SketchUp users about the tool that you found most useful, or a technique that you wish you had figured out sooner.  Part of the digital maker philosophy is sharing the knowledge you gained, so make sure to pass it on.

Congratulations!  You have posted your first blog post and can now share your interests and knowledge with the world.

We barely scratched the surface of what you can do with this platform in class, but we will get deeper into the weeds next week as you set up your own WordPress instance with complete administrative control.


Resources

Carleton College’s own web services group has a lot of good resources for how to write for the web effectively.

1A: SketchUp 101

Since we will be telling stories that take place in versions of Carleton College that no longer exist, one of our primary collaborative efforts will be attempting to recreate elements of the college as it once was using 3D visualization and simulation techniques.  We will be discussing the theoretical implications of such a project throughout the term, but since the skills required to model in 3D are complex, we will begin practicing in week one.

SketchupLogoThe 3D software with the gentlest learning curve is SketchUp.  Formerly owned by Google, it puts an emphasis on ease of use and compatibility with other popular platforms like Google Earth.  This is the software that many of the 3D buildings you might have seen in Google Earth were created with. Despite the user-friendly goals, SketchUp is a powerful program used by industry professionals and will let you start making impressively detailed models very quickly, which can be exported in a variety of formats.

We will eventually be modeling buildings as accurately as possible, but it is useful to start with more free-form projects to get a feel for the various drawing, transformation and navigation tools SketchUp has to offer, so that’s what we will focus on here.


 Assignment

In class, we modeled a simple dog house to get a feel for the software.  (If you’d like to review that project at your own pace, you can watch a tutorial video of it here.)

Your assignment is to use the techniques we employed to make a model of the house you grew up in.  Don’t worry about photo-realistic accuracy, just try to get the basic features, colors and textures in place, so that someone who knows the house (your parents, say) could recognize it.  If you grew up in a ranch house, then your building should be long and contain only one row of windows, whereas if you grew up in a bungalow or a cape cod you’ll have a taller building with a half or full second row. You get the idea. And don’t worry about the inside!  We’re just focusing on the external features for now.

When you are happy with your model, export it as a 2D graphic and save it to the Google Drive shared folder.

During the next class we’ll set up blog access, and you’ll use this image to write your first post along with some thoughts on your process.  As you model, think about how easy/hard it was, what elements particularly bogged you down, what compromises you had to make, etc.  Also think about a technique or tool that you wish you had figured out sooner, so that you can provide a tip for other novice SketchUp users and share your knowledge.


Resources

There are millions of SketchUp tutorials available online (just google SketchUp + what-you-want-to-do and you’ll be overwhelmed with options), but here’s a targeted list of resources to get you started.

  • If you haven’t already, download and print out a Quick Reference Card, so that you can start using keyboard shortcuts to switch between tools and get good fast.
  • Watch the Getting Started with SketchUp tutorial videos.  The first two are particularly useful for exteriors, but the third and fourth will give you more advanced techniques and tool tips, if you’d like to explore further.
  • SketchUp has also put out a couple series of videos that let you watch pros at work and give you great advice.

Lynda.com is a paid service, so not open to everyone, but you can access its tutorials by logging in with your Carleton ID.  If you want a more structured course, their SketchUp Essential Training is a great place to start.

 


Feel free to leave a comment if you’re having trouble, or if you discover something really great, and feel free to respond if you know the answer to a question.

Happy modeling!