2/28 Lecture Notes: No-Code Dataviz tools, CartoDB
February 28, 2017
- Add your name to this list if you want to help with the Sundance VR event March 24. Extra credit is available!
- Before Thursday, set up a free account at http://carto.com.
12:31-12:50: Guest: Jodi Upton, Knight Chair in Data and Explanatory Journalism.
12:50-1: Your Infogr.ams (assignment 2).
1-1:40: Other no-code dataviz tools
But first, HTML! You can go through these three self-guided HTML teaching tools on your own.
Simple No-Code Dataviz Tools
Here are the ones we will go over today:
1) Infogr.am (http://infogr.am)
Infogr.am is an easy way to create simple charts and graphs, as well as scrolling infographics that you may notice people posting in places like Facebook and Tumblr. For journalism I think the graphs and charts work best, because you can embed them directly into stories to visually explain something you are reporting in text.
Take note of the Graphs and Charts tab at the top. Click the Charts tab to see all the different types of charts you can use. Choose your visualization type, double click diferent parts of the interface to edit them, and copy and paste your data in. If you have trouble copying data from a web site, try starting from a summary sheet you make in Excel.
Click “Share” and copy the iFrame code at the bottom to embed into the blog. If you find that your chart is too wide for the blog post, you have two choices. You can manually change the width and height variables in the HTML code you copied, being very careful not to change anything other than those numbers, or you can try the “responsive” code which will make your chart shrink or stretch based on the width of the page where it’s embedded. The second option is good if you think your chart will be viewed by people on mobile devices, but be sure to test it out from a mobile device to be sure.
Here’s an example of a chart I made in Infogr.am using data from a previous exercise.
2) Easel.ly (http://easel.ly)
Think of Easel.ly as a quick infographic creator. You find a template you like, then start to manually edit it and add graphics from a built-in library. Charts can also be added and edited as spreadsheets, similar to Infogr.am.
3) Google Fusion Tables (http://fusiontables.google.com)
Google Fusion Tables turns columns and rows of numbers in spreadsheets into visualizations. Once signed in, import a spreadsheet in .xls or .csv formats (not not .xlsx, which is Microsoft’s proprietary format). Make sure your spreadsheet has column headers, or it won’t work.
Sometimes Google will add a tab that it calls a “card” that is the best choice for your data — for example, a “Map of latitude” will appear if your data includes geocoordinates. If you see a card that works for you click it and see how it appears. If not, click the + sign to the right of that tab and choose Add a Chart. Click Done when your chart is set up the way you want it.
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.
Here’s an example of a chart from Google Fusion Tables:
4) StoryMap (https://storymap.knightlab.com/)
From the Knight Lab at Medill, StoryMap lets you tell a story that’s broken up by points on a map. You can also use it to tell a story that moves across something that isn’t a map at all, such as a very detailed painting. Think of it like a timeline that takes place on a gigantic picture.
5) Google Maps (http://maps.google.com)
Quick overview of how Google Maps work if you don’t know already. Sign into Google, then choose the three lines at upper left and choose Your Places. Click Maps, then Create a Map. To embed it, you must first click the Share button in edit mode and change the access to “Public on the Web.” Then you can choose Embed.
6) CartoDB – Prepare for Thursday (http://cartodb.com)
On Thursday we will crack open CartoDB, which is a powerful mapping service that lets you tweak some of the interface and mess with a code a little. You can think of it as the gateway drug to other dataviz tools we will use that do require you to mess around with code. You can get a head start on how to use CartoDB through these free video tutorials on their web site.
Today I will show how we can create a map of the bridges in New York State that are in need of repair.