Category: DataViz Assignments

Assignment 4

In the future, if drones are more widely permitted. I think that media outlets will use drones to help accurately report the news. Especially breaking news such as fires and high-speed chases. Other media outlets such as ones for entertainment may use drones to catch celebrities in compromising situations or in ways that they would not be able to catch them if they just had a videographer with a camera. This can increase the sensationalism around celebrities and help the tabloid industry immensely and extend the 24-hour media cycle. Good for them and the fans, but bad for the rich and famous who are seeking privacy.

Overall, if used ethically, I think that drones can be good for the industry. However, if used with no code of ethics than it could create distrust between the people and journalists. If abused, it can lead to a severe invasion of privacy and a number of lawsuits.

Edward McFarland – Final PDR

Check and Slogan


Secret Stats will be brought into the sports market for journalist as well as collegiate and professional teams. Secret Stats is designed to create the most recent statistical data for individual players and teams as a whole. Though teams and the national leagues already do that, as a journalist sometimes the simplest stats are the hardest to find.

Therefore, Secret Stats will provide anyone who is a member with the stats they need to write a great story or produce a great show. The reason a reporter and/or a writer would want those stats is to make their story more appealing to the reader or viewer.

A journalist could easily look these questions up or crunch the numbers themselves, but when you consider a journalist who is writing with a deadline they have to meet, they don’t have time to thoroughly look up stats. Therefore, creating a company that has the ability to provide those stats within a minute would be a great contribution in the field of sports journalism.

An example of the questions would be:

  1. How many 60 point games did Kobe have?
  2. What was Kobe’s field goal percentage in his 60plus point games?
  3. How much Michael Gbinije (SU Player) is averaging during March Madness?
  4. How many points have Stephen Curry averaged against the Bulls?

Link to Final PDR: Secret Stats

When Journalism Students get access to the Microsoft HoloLens… (Assignment 2)

During the Week 2 lab, I was able to use the Microsoft HoloLens headset. We were some of the first students on campus to use the product because the headset was recently ordered and received in early April. This was one of the first times I had experienced augmented reality, other than with the Oculus Rift headset from Week 1’s lab, and it was amazing. In our first class we watched an advertisement video about the HoloLens, and after viewing the video, I was sold. Unlike many other “futuristic” technologies being created today, the HoloLens can do pretty much everything it’s advertised to do.

While using the HoloLens I was able to virtually place 3-D objects in the innovation lab. This was an interesting feature, and when using it I immediately thought of it being useful for designers who could be able to design their products digitally with the HoloLens. I think the best part about the HoloLens is that since it’s a Microsoft product, the interface is very easy to use, especially since I’m a PC user. I was able to watch YouTube videos, and go to different websites, just as a I would on my PC laptop.

Using the gestures made me flashback to scenes in the Iron Man movies when Tony Stark would gesture with his home computer system. Using the HoloLens is actually very similar to how the Jarvis technology was portrayed in the movie, especially in that you can view and change your designs virtually. Of course, it’s not as advanced as it is portrayed in the movie, but it seems we are getting close to technology similar to what was portrayed in the movie in the next few years. I can’t wait to see the new advancements as they develop in the future. iron man image

The only negative to this technology is the bulkiness of the headset but I’m sure with time and work, it will be scaled down to a more sleek design.

My career goals aren’t extremely clear for me yet, but as a sophomore dual Geography and Television major, I’m interested in creating content that will provide the world with information about the problems in the world, specifically in urban development. With this is mind, I feel the options with my career and the HoloLens are endless. In my geography courses we discuss different environmental problems and development issues everyday, and with the HoloLens we open up a new way of viewing a problem visually, which promotes a more creative outlook on problem solving.

Wearing the HoloLens is like having access to your own personal projecting device, but you’re projecting screen is anywhere! This provides a different mode of viewing television/video content. I can imagine a new industry of interactive media created for the HoloLens that will create a new experience for an audience.


Maxine Williams

Assignment 2: Post a blog entry about what you experienced with HoloLens. How do you think augmented and “mixed” reality might affect your career in the future?

Assignment #1

Throughout the years, I have observed in a number of science fiction movies the idea of living on another planet and or the moon. Most recently, I heard that there was a sign up for people to start a community on the moon, under the condition that they had to stay forever. I am not sure how true that rumor was, but if so I believe that it is a wild phenomenon that will change the way we think of space forever. I know personally I would never sign up or condone anyone signing up because it is permanent. Other reports are saying that it will be possible in the next ten years, which is scarily close to no longer fiction, but reality.

Of most interest to me are drones and the heights and depth they can reach and see. I would love to actually be able to use one to surveillance the campus, even if it is just a small part of the campus for my project.

Assignment #1: Edward McFarland Jr.

There is a food grading system called the NuVal Nutritional Grading System. The scoring system was created by doctors across the country in an effort to help grocery shoppers make healthier decisions in the grocery store. The scoring system calculates the ingredients from the “nutritional facts” on the back of food items and gives it a score of 1 to 100, with 100 being the healthiest. Shoppers can see the score on the shelf price tags.

I want to create a “calculating space” for the scoring system. The scoring system is only in 1200 stores across the country, it’s in a few stores in Syracuse. Because the scoring system is not in every store, creating a space to calculate food items online can expand the use of the NuVal Scoring System.

The “calculating space” effectiveness will be predicated on shoppers who don’t have NuVal in their local grocery store. This space will give shoppers the ability to use NuVal online in two ways, despite not having it in their local supermarket.

Example 1: The calculating space can allow shoppers to type in the food product (i.e.) chocolate milk, chips, cake mix, cereal, frozen chicken…etc and then type in the “nutritional facts” on the back (i.e.) Calcium 17% ; Saturated Fat 5%; Potassium 10%; Sugar 4%…etc. After those two steps, shoppers can then hit submit and a NuVal generator can give them a score of their food product. This will give shoppers an idea of how healthy their food item it is.

OR Example 2: Shoppers can still type in the food product; however, instead of typing in the ingredients they can take a picture of the “nutritional facts” and the NuVal generator will scan it and generate a score for the shoppers’ food item.

I believe this can be easy and effective to use for shoppers on either mobile or tablet devices. I will track how long shoppers stayed on the “calculating space”; if they took a picture of the “nutritional facts” or typed it in; and if the shoppers completed the calculation process for their food items.

Assignment8–NYS Primary Consumption of Energy by Fuel Type

Propose your Final Project

Your final project is due on Thursday, March 18, 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, February 22.

Final Project Due Date: Thursday, March 15.

Assignment 6: NVD3 Charts

NVD3, Assignment 6

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, April 6.

Assignment 7: Searchable, Sortable Data Tables

Searchable, Sortable Tables

Note: this tutorial borrows heavily from an ONA training session given by Chris Keller, news app developer at Southern California Public Radio. See his Tabletop.js tutorial for more info. Thanks for paving the way, Chris!

Learning Objective: The purpose of this exercise is not to turn you into a master coder, or even to become a master at using Tabletop.js. It is intended to help you see the power of using open-source code for your own reporting and storytelling projects. You will use code from an open source repository (in Github) and make a few minor configurations to create a compelling interactive experience. In the process, you will learn to not be afraid to tinker with code you find in the future.

What you need:

  • A modern Web browser, such as Firefox or Chrome.
  • An unzipping program (preinstalled on Macs).
  • A Google account.
  • Data in a spreadsheet format (Excel, CSV, etc.), or in Google Docs.
  • A text editor, like TextWrangler (installed on most Macs).
  • An FTP program, like Cyberduck.

But first – what is Tabletop, and why should I care?
Tabletop.js allows developers to easily create interactive ways to display information that is stored in a Google Spreadsheet. Anything that is added or changed in the spreadsheet automatically gets reflected in the news application configured using Tabletop. The library was released in February 2012 thanks to work by WNYC and Balance Media.

Problem: You have a big data set, such as a spreadsheet. You want to make it available to readers to search, sort and filter on their own without requiring them to download a spreadsheet or leave your Web site.

Solution: Put the data in Google Docs. Use Tabletop.js and code configured by Chris Keller (news applications developer at KPCC Southern California Public Radio) to display it on your site.

See some Tabletop examples by news organizations:

Now, let’s make our sortable, searchable table.

1. Get Tabletop.js.

  • Go to and click the Download Zip button on the lower right. Unzip the downloaded file (simply double click on Mac).
  • Open the folder, and you will see a second zipped file. Double-click it to unzip it as well.
  • Move entire set of unzipped folders to your desktop.

2. Go to this Google doc and create your own copy:

Choose File > Make a Copy to create your own copy (you need to sign in to Google first to do this).

3. Make your copy of the Google spreadsheet accessible to the public.

  • Click Share button at upper right.
  • Click “Change” next to Private.
  • Click Done button.
  • Check “Public on the Web,” then Save, then Done.
  • Go to File > Publish to the Web.
  • Check “Automatically republish,” then Start Publishing.
  • Copy the URL in Start Publishing dialog and paste into a new text file. Then click Close.

4. Isolate the Google spreadsheets “key” in the URL


  • Copy the key to your clipboard.
  • Go to the Tabletop folders you unzipped and open the Scripts folder. Open tabletop-feed.js in a text editor.
  • At line 6, find the key already there in the single quote marks after initializeTabletopObject, and replace it with your key so it looks similar to this:


5. Assign the columns you want to appear

  • Scroll down until you see “var tableColumns” at around line 28. You will see something like this:

{‘mDataProp’: ‘name’, ‘sTitle’: ‘Name’, ‘sClass’: ‘center’}

  • Go back to Google Docs and find the columns you want to display. Take note of the exact titles of each column and remove the upper cases, and spaces. For example, the column header Chapter GPA Spring 2013 should be changed to chaptergpaspring2013.
  • In the second and third lines starting with mDataProp, replace the names inside the single quotes that appear first with the new names.
  • Save your changes and close the text file.

6. Check out your sortable, searchable spreadsheet!

7. Assigment 7: Make your own table and publish it

Using what you learned above, you can create a searchable, sortable data table with new data for a story you want to tell.

Put your own data into the Google Doc and modify the HTML file to display the columns. Upload the files to the class server and embed the table in your blog post along with a short story explaining the data.

Due: Thursday, Feb. 18

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.

Get Set Up

We will be using the Chrome browser for this exercise, not Firefox. Before we get started, go to 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:

 In this exercise, we will use the “Area-spline” chart to show two line graphs on the same axis:

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:

 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 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.