1/23/2018 Lecture Notes

12:30-12:45: Housekeeping

  • Feedback on Jodi Upton?
  • Look through Class Finds and Twitter hashtag #nhdata.
  • Reminders:
    • Class survey! If you got a zero, you can do it today and still get partial credit.
    • Submit URLs in Blackboard! (Let’s look at it again).
    • And how do you embed?
  • Assignment 2: Good examples. And a couple critiques.

12:45-1:30: More no-code dataviz tools.

Today we will be using free data visualization tools that require hardly any coding at all. Feel free to use any of these in your final project. We will also begin creating maps in CartoDB.

1) Infogr.am (http://infogr.am)

You’ve already used Infogr.am, but here’s an example of a tabbed chart that breaks things out in a nice step by step way.

Cardiac Deaths in Central New York Hospitals in 2010 | Create infographics


2) Google Maps (http://maps.google.com)
Google Maps can be easily embedded into web sites using the My Maps feature.

First, sign into your Google account, then go to http://maps.google.com. Click the “hamburger” icon at the top left labeled Menu when you hover over it, then choose Your Places, then the Maps tab, then the Create Map button.

Search for a place on the map and click Add to Map in the info box for that location. You can edit the information on the map by clicking the pencil icon. You can add images or videos to the placemarks by clicking the camera icon.

Now, change the base map, which controls the look and feel of the map. Click Base Map on the left and choose a different layer.

When you’re ready to publish the map, click Share and then change the settings from private to public.

Finally, embed the map in a blog post. Click the three dots at the upper right and choose Embed this Map. You will get embed codes.

Go to the class site and create a blog post. Click on the Text tab of the posting screen and paste your embed codes in there. The end result should look like this:

3) Google Fusion Tables (fusiontables.google.com)
Google Fusion Tables turns columns and rows of numbers in spreadsheets into visualizations. Once signed in, go to Google Docs (drive.google.com) and create a spreadsheet. In Google Fusion Tables, create a table and choose the Google Doc you created as the source. You will need to fiddle with the settings to make sure it’s grabbing what you want.

On the next screen, click the Plus sign to the right of Cards and choose a visualization. Fiddle around with the appearance settings to get everything as you want it, then click Done.

To publish your chart, you have to do two things:

1. Click the Share button at the very upper right of the browser, then “Change” next to Private under “Who can Access.” Select “Public on the Web” and then Save and Done.

2. Go to the Tools menu and choose Publish. You will see iframe tags here that you can embed in your blog post.

From this point onward, that table will automatically update as the data in your Google spreadsheet changes.

Here’s an example of a chart from Google Fusion Tables:

4) Maps from Fusiontables.

  • Go through this tutorial.
  • Check out the latitude and longitude fields in this spreadsheet.
  • (One change: choose New > More > Google Fusion Tables.)

5) PiktoChart

6) Timelines and Storymaps.

7) More

See a list of other no-code tools in the Tools tag of the class Diigo group, and Professor Barbara Fought’s JTools web site.

8) Assignment 3: Assignment 3 is to create a data visualization using one of the no-code tools above to tell a story using data that you find and analyze yourself.

Note: on Thursday we will take a look at a coding-based timeline example. If you make a timeline with that instead of the Knight timeline, I’ll give you 5 points extra credit.