4/20/2017 Lecture Notes
April 20, 2017
On Tuesday we started learning how to create chatbots. Here are links to the info and services we went over.
- Try the TechCrunch Facebook Messenger bot: http://m.me/TechCrunch
- Try Dan Pacheco’s autodanpacheco bot: m.me/autodanpacheco
- Create your own Chatbot: http://chatfuel.com
- Remember that you will need to create a Facebook page for the bot before you can publish it. You can create that here: facebook.com/pages/create
Your Third assignment is to create a Facebook Messenger chat bot using Chatfuel.com. The topic of the bot should be something informational. This could be a topic in the news, information about an event (future or historical), a science topic, information about Newhouse, etc.
12:40-1:10: Amazon Skills
Today we will look into voice-based assistants, specifically Amazon’s Alexa and Alexa “Skills,” which are like voice-activated apps for the Amazon Echo.
- Demo of how Alexa works.
- Installing Alexa Skills.
- Creating a conversation tree with PullString, and (theoretically) how to publish that as a voice-activated Alexa Skill. You can also use PullString to create a basic chat bot for other services.
- You can also try creating an Alexa skill using Amazon’s new Skills kit and its Builder Beta tool.
- Quick demo of http://IFTTT.com
4/11/2017 Lecture Notes
April 11, 2017
12:30: I’m back!
- International Journalism Festival report.
Watch the session here.
- See my 360 videos of Assisi and Perugia, two previously warring city-states in Italy.
- How 360 in YouTube works with Cardboard (send out link, everyone views in cardboard)
12:55: Walk to Innovation lab
1:05-1:50: 360 video
- Shooting on Samsung Gear360 and Nikon KeyMission
- Transferring videos
- Stitching videos (Samsung only, Nikon is automatic)
- Processing and exporting in Adobe Premiere Pro
- Adding 2D text effects in SkyBox VR Tools plugin
—> You can access this software in the lab, or in 206B or 205A.
- Only 206B has Skybox.
- You can shoot a 360 video with a team, or …
- Learn how to create computer-generated environments in Unity
4/4/2017 Lecture Notes – welcome!
April 4, 2017
Welcome! Here’s the presentation from the first class.
3/30/2017 Lecture Notes
March 30, 2017
- Google News Lab / Poynter Drone Journalism training, April 21-22. Volunteers needed.
It’s our last class! Use this as a lab day to:
- Work on Assignment 6 using NVD3.
- Begin working on your final project. Feel free to run ideas by me.
- Do your course evaluation for dataviz. Remember, it is completely confidential.
For those in New Tech for New Media:
- We meet here next Tuesday.
- Next Thursday is at the SU Makerspace with John Mangicaro. I will be at a conference in Italy so won’t be there.
But a couple last things:
- Look into Jquery Visualize, another open source charting tool.
- Need JSON? Try this CSV to JSON converter.
- You may want to look into download the academic version of Tableau, a popular dataviz software, on your Mac or PC.
- You can also do more with maps using Mapbox studio, which also must be installed on your laptop.
Thanks for being part of the dataviz class!
3/28 Lecture Notes: D3 and Final Project
March 28, 2017
I. Propose your Final Project
- Write up a blog post explaining the story behind your final project. See details on what to include in the blog post on the Final Project Proposal page.
- Your final project, you should use use 3 dataviz tools we covered in class, or others you find, to tell a story. You can find a list of some other tools here: https://groups.diigo.com/group/new300dataviz/content/tag/tools
- Final project is due Thursday, April 27, one month from the last day of this class.
- Remember: grad students need to publish online somewhere, which can also be your own web site.
- Best example ever: http://chrisvoll.com/syracuse-rising/
- More typical, Racing horse deaths: http://journovationsu.org/final-project-horse-racing-deaths-in-new-york-state/
What is it? Let’s see some examples and ideas for how to learn more about it.
D3 — short for Data-Driven Documents — is emerging as a popular open-source library for data visualizations. This is partly because its creator, Mike Bostock, uses it to create stunning visualizations for the New York Times as an interactive graphics editor. Bostock is also the creator of D3. You can view a collection of D3 interactives Bostock has worked on at his personal web site.
Here are several tutorials to try, starting with the easiest:
D3 is way too advanced to get into in much details in this 5-week course, but if you are interested you can start to go through some online tutorials on your own.
Getting Started With NVD3
The first step is to download the NVD3 code. Click the Zip button at the upper right corner of the NVD3 site , unzip the file and drag the resulting folder to your desktop.
Open the Examples folder, and you will see a different HTML file for each chart. The examples match up to those you see in the examples gallery. Find the file linePlusBarChart.html and drag it into an open browser window.
Let’s Examine Our Two-Axis Chart
You should see a chart with bars and lines, and two scales — one on the left, and one on the right. This type of chart is useful for comparing two types of data that may relate to each other, but are on completely different scales. For example, in this chart they’re comparing quantities in the millions of units with costs in the low hundreds of dollars. If you tried to create a chart like that in Excel the line representing dollars would be too small to display anything. This NVD3 chart auto-scales based on the data it’s given.
Getting Data Into the Chart
First — and this is important — make a copy of that chart file and give it an original name. You will likely get tripped up the first time and need to start over. This way, you can play around with your new file and go back to square one if needed.
Next, open the file in a text editor such as TextWranger or Sublime Text. You will see some HTML elements that should be familiar to you by now. Stop at line 49 where it says var testdata. See all the numbers below? That’s the array that the chart displays. Each point consists of a pair of numbers that determines the height of the bar.
You will also notice that there are two sets of arrays: one labeled “Quantity” and the other “Price.” Obviously, the array under Quantity controls the bars that are aligned to the scale on the left, and the array under Price controls the line that is aligned with the scale on the right.
Go back up to the Price array and look closely at each pair of numbers and you will see something like this:
[ 1136005200000 , 1271000.0]
Compare those numbers with what’s in your chart, you will eventually notice that the second number matches up with quantity. Great!
But what in the world is the number on the left? Do you have any guesses?
How Computers Calculate Dates
I’ll spare you the guesswork and just tell you. Those 13-digit numbers are dates that are formatted in a way that only computers understand. This is something that you would only be able to figure out by talking to a computer programmer, or doing some very specific web searches.
This will sound really bizarre, but those numbers represent the number of seconds that have passed since January 1, 1970 (I know — it’s weird, just accept it). This is true not just of this script, but for computers in general. Have you ever had your computer crash, or moved a bunch of files from one computer to another and noticed that the creation dates of the files are set back to 1969? Now you know why. It’s because they have no date, so the computer sets them all the way back to before 1970.
This means that if you want to input a set of date-value pairs for your chart, you need to convert every date into that format. This is where Excel can help you. Open an Excel spreadsheet, or download this one, and add two columns: One with dates in MM/DD/YY format, one with the values you want to display for each date. In the third column, enter this formula:
Make sure the A1 is referencing the cell directly to the left (so if you have column headers, you would probably want that to be A2). You will see a 13-digit number. Copy that formula all the way down the column. Now you have a list of dates the script can read.
Add your data to the script
The final step involves a lot of copying and pasting, or formatting in a text editor. You want to get all of your machine-readable date and data pairs into that script in exactly the same format as what you see, and remove all of the other data. If you are very careful and have a small amount of data you may be able to do it in a first try, but it’s very likely that you will have typos.
At the end, your array should look something like this:
[ [ 1388620800000,4234] , [ 1388620800000,234] ,[ 1388707200000,53] , [ 1388793600000,3634] , [ 1388880000000,434] , [ 1388966400000,6433] , [ 1389052800000,43454] , [ 1389139200000,4354] , [ 1389225600000,54] , [ 1389312000000,34534] ]
The array under Price will look similar, but with different sets of numbers depending on the data you’re comparing.
Finally, change the text next to “Key” above each array to whatever you are comparing. Drag your HTML file into an open browser window and you should see your data in there.
(Wondering how to get a lot of data into JSON format? There are converters online, like this one.)
Upload and Embed
As with every other code-based visualization, the final step is to upload the NVD3 folder to a web server, navigate to it on the server, and put the URL into iFrame codes like this:
<iframe src="YOURURLHERE" width="100%" height="480"></iframe>
Put that code into a blog post along with a story explaining the data.
IV. NVD3, Assignment 6
Assignment 6 is to work on your own using your own data. Feel free to use one of the other charts at NVD3.org.
Due: Tuesday, April 4.
V. Remember to do course evaluation.
Please spend last 15 minutes doing it in class.
3/23/17 Lecture Notes
March 23, 2017
Start working on Assignment 5. Here are some data sources you may want to peruse.
Assignment 5: Sortable, searchable list
March 23, 2017
Use Tabletop to create a sortable, searchable list for a story using data you find on your own. Upload it to the class FTP and embed the list in your story.
In addition, summarize a subset of the data in a chart using one of the other tools we have covered so far in class such as Infogr.am, Google Maps, Highcharts.
Due: Tuesday, March 28 before class.
3/21/17 Lecture notes: Sortable tables
March 21, 2017
- Who’s finished Assignment 4? Let’s see.
- Sundance event on Thursday/Friday!!! It will be very cool, you should come.
- Special invite for VR Journalism workshop: 5-7 p.m. Thursday in Innovation Lab for journalists and VR creators. Please RSVP here if you plan to come so I can get enough pizza:
12:45: Sortable data tables
- Tabletop, what I used in the first class. Displays days from Google spreadsheets.
- See how one past student used it in his final project, near the bottom.
- Some coders, like Chris Keller, have modified it for journalism. Here’s an example of a sortable, searchable table.
- Where do you get the code? Github of course!
- Download the code. Then …
1-1:30: How to make it work
- Make a Google spreadsheet.
- Give it a name with no spaces. Change the tab label to the same name, also with no spaces.
- Share it, and make it public to the web.
- Publish it (File > publish to the web.) Yes you must do both of these to make the data available.
- Take the URL and save it somewhere.
- Download the Tabletop for Data Tables code and unzip it. Note the files you need is in a second zip inside the first one.
- Open the Scripts folder, then open tabletop-feed.js in Sublime Text.
- At the very top, find initializeTabletopObject and put your URL into the place after it, being careful not to remove any necessary syntax.
- Remove everything except for the “key” which is the long list of characters near the end, before /pubhtml.
- Scroll down to what you see in var tableColumns (around line 28).
- Look at your spreadsheet column names. Copy and paste them into the field after “sTitle”. This is what will be displayed in the column on your site.
- Then, in the field next to mDataProp, paste the same name, but remove all capitals and spaces. This is the variable that pulls from the Google sheet.
- Finally, you will need to remove some logic at the end that makes the last column display a web site link. We will go over how to do this, and what the code means, in class.
- Edit the top of the HTML file to remove the sample text, then preview the HTML. You should see a searchable sortable table.
- The last step? Upload into the class FTP and embed.
1:30-1:50. Phew, that was a lot!
So now work on it and try and fail and try and fail and try again until you can get a table to appear. I will go around to help you 🙂
Feel free to use data from previous exercises or assignments, such as New York State bridges or any data from the NY State open data site.
3/9 Lecture Notes: High Charts Part 2
March 9, 2017
12:30-1:15 High Charts, part 2
- Downloading and modifying locally.
- Previewing and preparing for upload.
- Embedding after upload.
- See if you can recreate this chart on Business Insider.
3/7 Lecture Notes: High Charts
March 7, 2017
12:30-12:50: Assignment 3 review
Remember: you need to embed the code from timeline.knightlab.com, not the Google Spreadsheet.
A few good ones:
- Mahima Singh: Cartoon Network logo evolution
- Eleanor Haines: Warner Brothers history
- Evan Jenkins: Brief history of Samsung
- Carla Caban: Elon Musk
- Kristen Edwards: Broadway’s Beginnings
Who rocked it with code?
- James Groh — EXTRA CREDIT!
BUT need to do the last step of uploading and embedding.
- Yuan Peng: EXTRA CREDIT!
12:50-1:20: High Charts
- Highcharts demonstration.
- Downloading code
- Finding a chart you like
- Customizing the data
- Load locally
- Upload to FTP
- Embed in a blog post
1:20-1:50: Make a sample chart
- Start working on Assignment 4
Reminder of how to FTP and embed: