Category: Dataviz

Assignment 4 – Elena DeLuccia

I decided to take a look at Donald Trump’s tweeting activity in the days following inauguration (January 20th). There is a clear distinction between which tweets he authored and those he decided to retweet.

Assignment 3 – Elena DeLuccia

I thought it would be a good idea to do a timeline on something really relevant to news right now. So I decided to do mine on how Jeff Sessions got to the Attorney General position. I updated it to include the most recent controversies with his contact with Russia, and will continue to update if there are any other developments throughout the weekend!

 

2/28 Lecture Notes: No-Code Dataviz tools, CartoDB

12:30: Housekeeping

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.

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

 

 

 

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.

 

Assignment 2 Groh

I examined the population density of New York counties in regards to the number of liquor licenses each county has. I had to utilize two different data sources to obtain the population density. I put the number of liquor licenses in one column and the counties’ population in another. After that I inserted the formula =C:C/B:B. The significance of this formula is that I did not have to manually enter each formula. I was able to apply that formula to an entire column and excel was able to identify the proper numbers that corresponded to each row.

People per Liquor License in New York Countie
Create bar charts

Assignment 2 – Elena

2016-2017 NYS School Budgets by County
Create line charts

I took data from https://openbudget.ny.gov/schoolAidForm.html in order to develop an infographic that would show how much each county gets for its school budget for this year.

I filtered the information to only include the sum of the total budgets for each city in each county, then inputted each of these sums into the infographic to create a graphic representation of each county.

Dataviz, Week 1, Class 1

NEW 300 / 600 – Professor Dan Pacheco
S.I. Newhouse School of Public Communications

I. Welcome! An Introduction to using data visualization to tell stories.
– Let’s look at a few examples.

 

II. Class syllabus and expectations.
– Tuesday: instruction
– Thursday: lab
– Assignments due every Monday morning.

 

III. Class Blog, Spundge, Rebelmouse
Most of the assignments will be filed by embedding widget code into the class blog at http://journovationsu.org.

 

IV. Exercise: Introduce yourself through data!

1. Open this class roster in a web browser, or from your smartphone: http://jsfiddle.net/pachecod/HxpFX/embedded/result/.

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. Go to http://journovationsu.org/wp-login.php?action=register and register for an account (note: account registration is frozen now that the class has started). Check your email to get your temporary password, then click the link in the email to log in with that password.

5. After logging in for the first time, click the link at the very top of the screen inviting you to edit your profile and assign a permanent password. Click the Update button to save your new password.

6. Upload the selfie you took to your profile by clicking the Choose File button at the bottom of the page, then Update Profile.

7. Return to your profile by going to http://journovationsu.org/wp-admin/profile.php. Scroll down and right-click your photo. Choose View Image. Copy the URL for the image.

8. Finally, go this Google spreadsheet and paste your image URL into the image field. Fill out the rest of your information. (Note: the Google spreadsheet for this excercise is now frozen.)

9. Return to the  Class Roster page in step 1 (http://jsfiddle.net/pachecod/HxpFX/embedded/result/). You will also see information from others in the class as they add theirs. Look at the home page of http://journovationsu.org and you should also see your info there. This is because the output of the link above is embedded into the page.

 

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. Assignments, due before next class:

1. Fill out class survey here (also linked into the class blog): http://journovationsu.org/2014/01/13/data-visualization-class-survey/

2. Read this summary from Jaimi Dowdell of IRE on on Excel functions for journalists: http://bit.ly/19aKVUa. We will go over some very basic Excel functions in class, but you are expected to learn more advanced functions needed for your projects on your own.

Propose your Final Project

Your final project is due on Friday, March 11, but I want to make sure you’re working on it starting now. The first step is to write up a proposal, which will make up 10% of your final project’s grade.

As a reminder, your final project must use use 3 dataviz tools we covered in class, or others you find, to tell a story. At least one of those tools must involve using open source code that you upload to the class server. Be sure to include the following in your proposal:

  • A few paragraphs describing the story you hope to tell.
  • What data do you need to acquire and analyze to tell this story?
  • Where / how might you acquire this data?
  • What tools are you thinking of using?
  • What are some of the unknowns that you need to flesh out?
  • How might things go wrong, and if so, what’s your plan B?

Proposal Due Date: Thursday, Feb. 25. But if you complete it by Thursday, you will receive 2 points of extra credit on your final grade and also get feedback from a data journalist who is visiting on Thursday.

Final Project Due Date: March 11.

Assignment 8: NVD3 Charts

NVD3, Assignment 7

Create an NVD3 chart using data you collect on your own. Convert the data to the JSON format, then put it into a chart that you choose. Upload that chart’s code to the server and embed it.

Due: Tuesday, Feb. 23.

2/11/16 Lecture Notes

Agenda for today:

  • #NHData Finds
  • How’s HighCharts going?
  • Searchable, sortable data tables
  • Assignment 7, due Thursday, Feb. 18
  • Work on Assignment 6, start on Assignment 7 if you like.

 

 

Assignment 4: Using Highcharts

This assignment is designed to make you comfortable with modifying data in open source code, then publishing it to a web site. We will go through part of the assignment in class today. The rest of the assignment is due next Tuesday night at midnight.

Note that there are two deliverables for the assignment. The first is to embed the chart in this exercise into the class blog, which you can do today. The second is to create a chart with original data for a story you want to tell with a chart, FTP all of the required code to the site and embed your chart and story in the class blog.

Get Set Up

We will be using the Chrome browser for this exercise, not Firefox. Before we get started, go to http://jsfiddle.net. Create a free account, or log in if you already have one. Keep the browser open after you have logged in.

Review chart types

Highcharts is a Javascript, HTML5 and Jquery library that has pre-canned charts that you can easily modify and publishing into your stories. You simply upload the Javascript libraries on your server (that has been done for you already in this exercise), then modify some code for the chart type you want, and finally embed it into a site where your story lives.

You can view all of the chart types that are possible here:
http://www.highcharts.com/demo

 In this exercise, we will use the “Area-spline” chart to show two line graphs on the same axis:
http://www.highcharts.com/demo/areaspline/dark-unica

Play around in JSFiddle

JSFiddle is a free sandbox that makes it easy to modify code and instantly see the results. You will be creating a “fork” (version) of some code I have set up for you. After you modify your version, you can keep messing around with it and even embed the output into a blog.

 1. Go here to see the JSFiddle for this exercise:
http://jsfiddle.net/pachecod/3Y8az/

 2. Making sure you are logged in first, click the “Fork” button at the top. You now have your own fork.

 3. Notice that the JSFiddle screen is divided into four parts. The top is HTML, the bottom Javascript, and the lower right is the output of the HTML and Javascript. (The top right is CSS, but we aren’t using that right now.) In this exercise we will only be modifying the Javascript.

4. Scroll down until you find the sections of code that start with xAxis. Notice the list of months. They only go through July. How do we get a full year’s worth of months into the chart? You need to type them in, being careful to copy exactly the style in the code. Of note: each month is surrounded by single quote marks, and there is a comma after the month. But this is also very important to notice: there is no comma after the very last month.

7. Add August through December, then click Update. Your chart will refresh, but there’s no data for the additional months. Why not? Oh yeah, because you have to add in those numbers!

8. Scroll down until you see “yAxis.” Put in a title for the Y axis, and a name for the units you are displaying. Be sure to include a space before what you put in for units or you will notice an embarassing typo in your chart later.

9. To add numbers for units, scroll down to the “Series” section and put in a title for each series, and numbers for each month in the series.

10. Click update when you are done. Does your chart look like you want it to? Good! If not, keep trying until it looks right.

Embed it

The last step is to embed the chart in a blog post along with a short story that explains the data.

11. Get a URL for the output of your chart. Click the Share button in JSFiddle, then copy the URL in “Share full screen result.” Test that URL in a new tab to make sure the chart appears correctly in a browser.

12. Because we’re embedding into a WordPress site, we will use the iFrame plugin’s short code to embed this chart. Put your URL into the “YOURURLHERE” section in this code snippet:

   <iframe src=”YOURURLHERE” width=”100%” height=”480″></iframe>

13. Go to the class WordPress Admin site at http://journovationsu.org/wp-admin/ and click the Posts > Add New button on the left. Enter a title. Making sure that the “Text” tab in the body area is active (not the Visual tab), paste this code into the box. Click Preview and make sure it apears in the preview. If it does, click Publish, then View to view the public post.

14. If the chart appears, the last step is to go back into the post and write a few paragraphs around the chart explaining to the public what it means.

Now, Go make Another Chart

To complete this assignment, create another chart using data for a story and embed it into a post in the class blog. You should do the following:

  1. Download the High Charts code, which you can get here.
  2. Find an example for a chart you want to make. Open the same Examples folder in the Highcharts codebase you downloaded, edit the index.html file contained in that example folder (not the index at the top of the folder tree), and preview it in a browser (which you can do by dragging the file into an open browser window).
  3. When your chart works the way you like, rename the top of the main folder to any name you choose, and upload the entire folder into the class server. You should be able to locate it in your browser and embed it into a second blog post just like you did in the first exercise.