Category: DataViz Lecture Notes

2/4/16 Lecture Notes: Timelines

I. A CartoDB 

Irfan Uraizee, BDJ senior, created this poverty map of Onondaga County using skills he learned in this class. He’s now an interactive editor at the Sun Sentinel in Fort Lauderdale.

II. #NHData Finds

What cool data visualizations have you found this week?

III. Timelines

We’ll look at two options for timelines:

a) Vertical timeline, in code

Timelines are common in news stories, and let’s face it — if they’re nothing more than a long string of text, they’re BORING! We can do better with timelines on the Web.

Tabletop.js is one way to create an interactive timeline using pre-built HTML and Javascript code. You just have to change a few variables in the code and upload it somewhere. Everything else is updated through a Google doc.

As an example, let’s look at Professor Pacheco’s CV.

Lots and lots of text. Boring, huh? Now look at the interactive timeline version:, also embedded at the bottom of this post.

I only had to mess with a tiny bit of code, and now I can easily upload my resume timeline in this Google Doc. That’s because this timeline uses Tabletop, an open source code package that displays data in Google Docs in web pages.

Now it’s your turn to create your own timeline resume or portfolio. My friend and fellow data journalist Lisa Williams from the Independent News Network has create a friendly walkthrough of how to create your own timeline here:

Spend the rest of class going through the exercise. When you get to the point where you need to upload files to the server, go into Filezilla or Fetch and use the FTP server info provided on the first day of class when I asked you to upload your selfie.

Here’s an embedded version of my CV timeline:

b) Horizontal timeline
See the KnightLab timeline tool. Examples:

Assignment 5: Go through Lisa Williams’ Absurdly illustrated Guide to creating a vertical timeline and embed it in the class blog.

If you can’t get the vertical timeline to work, try the KnightLab timeline tool at

As an incentive to not give up on the vertical timeline, which requires you to mess around with code, I will give 5 points extra credit for anyone who succeeds in posting a vertical timeline!

Due date: Tuesday, Feb. 9 by 9 a.m.

2/2 Lecture Notes: Doing More with CartoDB

I. #NHData Finds

What cool data visualizations have you found?

II. Common issues with Assignment 2

  • Not embedding into blog correctly (review how embed codes work again.)
  • Map of points: not filtering.
  • Remember to choose “Dataviz Turned-In Assignments” category, not “Dataviz Assignments” or “Assignments.” That makes your assignments show up on the Student Work category page I use to grade.
  • Otherwise, good job!

III. CartoDB discoveries?

IV. Instruction / Lab – How to merge data sets.

Please follow along from your own computer.

You can create a lot of interesting maps in CartoDB by overlaying data. For example, here’s a map I created that overlays a data set of wine consumption on top of another of beer consumption. These are really two maps, but they are layered on top of one another, as you can see from the layer pulldown.

But what if you want all of the information on wine and beer consumption to appear in the same infobox? And what if you want to also display data from a completely different data set, such as, for example, annual number of road deaths? For that, you have to merge data tables into a single table.

You could do this manually in Excel but it would be quite a manual process. CartoDB will do it for you as long as you have one geographically-oriented column in each data set whose contents are exactly the same (for example, country names or country codes), you can merge them in a snap.

On your own time, I encourage you to go through a tutorial on about how to merge two data tables that are in Carto’s data library. Today we’re going to walk through how to merge two data sets into this single map:

I got this information from the World Health Organization, which as it turns out has a lot of really interesting data in CSV format. This map has data merged from the following two data sets:

In class, I will show you how I used sorting and filtering to create separate tables for alcohol and wine consumption which I merged into a single data set, then merged that again with data on road deaths.

During the rest of class, please work on Assignment 4, which is to create a CartoDB map with data you find and report on. You should publish the map that tells the story around your data the best, but I will be awarding the most points to assignments that incorporate as many of the following as possible as long as the choices are appropriate to the story:

  • Data from more than one source, either in CartoDB’s library or from somewhere else.
  • Data that is imported from outside of CartoDB’s library.
  • Data that is filtered to hide extraneous information, either within CartoDB or before importing by using Excel.
  • Layered data sets.
  • Customized markers and visual effects (e.g. different icons chosen in CartoDB or uploaded).
  • Customized infoboxes, especially if you modify the HTML or CSS.

Good luck!


1/28 Lab: CartoDB Basics

CartoDB Basics

Today we will be using CartoDB, which lets you upload and manipulate data that is then displayed in a map which you can embed on your site.

Get a CartoDB account

First you must set up a standard free account. Go to and click Get Started to create your account.

Example Map

Here’s a tourist map I made that overlays three sets of data for tourists visiting New York City.

How did I make it? Let’s crack it open.


Three Mapping Tutorials

Complete these three tutorials in class. Each takes approximately 10 minutes each:

1) Creating a simple map of points

2) Georeferencing

3) Map Election Results

Assignment 3

After you’re feeling comfortable with the CartoDB features, you can start working on Assignment 3, which is to post the results of the tutorials above. Due Monday, Feb. 1. 

Assignment 4

After you’ve done that, you can begin working on Assignment 4, which is to tell a story with data you find using a CartoDB map. Due Friday, Feb. 5.

1/21/16 Class 2 Lecture Notes

I. You

II. Excel

We’ll go through some basic features of Excel and how to create forumlas.

  • Adding information as data versus text.
  • Add a formula.
  • Columns and rows.
  • Formula: using the equal sign for functions. Basic math.
  • Sum columns or rows.
  • Format cells to change cell type (text, number).
  • Making simple charts in Excel.
  • Common formulas:  adding, subtracting, dividing, multiplying, summing

III. Acquiring Data

  • New York State public data.
  • Getting data: formats to look for (CSV, JSON).
  • What if you get a big, fancy Excel document? How to dumb it down to a CSV.
  • Copying and pasting data as values versus as formulas.
  • Copying data from HTML tables.

IV. Sorting and Filtering Data

  • Show how to sort and filtering data in Excel.

V. Sorting and Filtering Exercise

Assignment 2: Find some interesting data from the New York State open data site. Use sorting and filtering to hone in on some interesting and easily digestible data points that could be used in a story. Create a graph of the data you find in Create a blog post that includes a link to the raw data from the NYS site, explain how you filtered it, and embed the chart into the post. Due Tuesday morning.

1/19/16 Lecture Notes, Class 1

Tues 9/1 Class: Welcome!

I. Welcome! An Introduction to using data visualization to tell stories.

II. FERPA forms.

III. Class Blog, Rebelmouse
Most of the assignments will be filed by embedding widget code into the class blog at And you have an account! Walkthrough of how it works.

IV. Exercise: And now for a little magic. Introduce yourself through data!

1. Open this URL. How did that data get in there? Let’s find out together.

2. Pull out your cell phone and take a “selfie,” or have your neighbor do it for you.

3. Email the file to yourself and download the image to your desktop.

4. Open Cyberduck on your computer.

5. Log into the class FTP site. You can find the login info in Blackboard under the Access tab.

6. In Cyberduck, navigate to Exercise 1. Create a folder with your name in it, then drag the profile picture you created into it.

7. Follow the instructions here to create a direct URL to your image in a browser.

8. Go to this Google spreadsheet and fill out your info. Put your image URL into the correct column.

9. Take a look at this URL, to see class data populating in real time.

Congrats! You Participated in a Data Visualization
You not only introduced yourself to the class, but you participated in your very first interactive data-driven visualization. The data is all in a Google spreadsheet, and some free Javascript and JQuery code called Tabletop.js that we will use in a future class pulls all of that data into a web page. Try changing any of your information and you will see that the public web roster updates in real time.

V. Excel

Go through some basic features of Excel, and formulas.

  • Adding information as data
  • Add a formula
  • Columns and rows.
  • Formula: using the equal sign for functions. Basic math.
  • Sum columns or rows.
  • Select an area.
  • Format cells to change cell type (text, number).
  • Making charts in Excel.
  • Common formulas:  adding, subtracting, dividing, multiplying, summing

Assignment 1: Register for the class blog, fill out this survey. Due before next class.

Reading before next class: Excel basics: