Category: DataViz Assignments

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.

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:

How many 60 point games did Kobe have?

What was Kobe’s field goal percentage in his 60plus point games?

How much Michael Gbinije (SU Player) is averaging during March Madness?

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.

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?

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.

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.

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

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:

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.

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!

Double click the index.html file at the top of the Tabletop spreadsheet to open it in a browser. You should be able to search and sort the data.

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.

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

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.

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:

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

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.