3/8/2018 Lecture Notes: Work on your Chat Bot
March 8, 2018
Today you can work on your chat bot for the assignment that is due Sunday. See links to chat bot creators and other info from Tuesday’s class notes.
If you are interested in how to create skills for Amazon Echo / Alexa, Professor Pacheco will show the Alexa Skills Kit. The Alexa is also set up in the Innovation Lab today for those who want to experiment with it. Here are some tutorials from Amazon:
The skills creator gets a little developer-ey, so you may also want to look into Dexter which is supposed to make it easier. You build a chat bot there, then click a link to turn it into a Skill. The hardest part is to set up an Amazon AWS account, which is not that hard.
Please let Pacheco know if you would like him to enable additional skills found here: http://amazon.com/alexaskills. I have already installed the following:
- NPR One
- Washington Post
- The Daily Show
- The Daily from The New York Times
- Wall Street Journal
- The Economist
- USA Today
- NASA Breaking News
- Trump Impeachment Clock 🙂 (Try also asking it what Trump just tweeted).
- Miami Herald News
3/6/2018 Lecture Notes: Chat bots and conversational interfaces
March 6, 2018
- Review of last assignment
- Finds from slackchat
12:45-1:10: Chat bots: the context
- Tech Crunch bot
- Most major news providers are experimenting with bots. See a few stories about that.
- Conversational interfaces – KPBC
- See slides 114-131 in the 2016 KPBC’s Internet Trend report.
- KPCB predidts that by 2030, 50% of jobs we do today will be replaced by robots.
- Today’s chatbots are accurate 95% of the time. When speech recognition gets to 99%, we will all be using voice much more often than our thumbs to get information.
- Amazon Alexa Skills
- The Knight Center for Journalism even offered a MOOC on chat bots for journalism.
- Quartz has a Bots News Lab dedicated to making bots.
- They use Dexter, and it has an interface that lets you enable your chat bot for Alexa. It looks like there’s a good quickstart guide to create a bot. We will experiment with this on Thursday.
- Open your Facebook account and create a new Facebook page about anything.
- Go to Chatfuel.com and create an account.
- Demonstration of my chat bot, and how it’s set up on Chat Fuel.
1:30-1:50: Start working on your own chatbot
- Use ChatFuel, Dexter or another chat bot creator your find to make a bot that works with Facebook Messenger. Publish a blog post that has a link to the bot. Explain the purpose of the bot, what information problem it tries to solve, and what you learned in the process of creating it.
- Make it informative about a specific topic, or representative of an organization or person (make sure you have permission).
3/1/2018 Lecture Notes: 360 video part 2, and Unity
March 1, 2018
- Review Finds in the slackchat
- We have a new 3D scanner called the HP Sprout if anyone is interested in using it for a field test. You can read about it here.
12:40-1:10: Editing and publishing 360 video in Adobe Premiere
- Open the Adobe Premiere tutorial from NHMediahelp.syr.edu.
- Work with the videos you shot with your partner.
- Refer to this Adobe Premiere for 360 tip sheet as you work on a video.
- This is a little more advanced, but Unity is pretty easy to figure out if you put in the time. I will go through the following.
- Getting around the Unity environment
- Making a simple scene
- Creating a terrain and applying a texture
- Using the Asset Store
- Adding items from the Asset store to your scene
- Adding 3D sounds to your scene
- Moving through your scene using a First Person Controller
- Exporting your scene for Mac or PC
- Saving your project files to your portable hard drive
- Loading your project and/or scene on an Innovation Lab PC
1:30-1:50: Work on Assignment 2
- Assignment 2 is due next Wednesday, March 7 (not Sunday this time 🙂
- You have two choices for this assignment. You can either create a 3D environment in Unity, or you can publish a 360 video with 2D text effects and a custom nadir patch using footage we shot on Tuesday.If you choose to create something in Unity, use QuickTime to create a screencast of your scene and upload that into YouTube and embed it into a blog post where you describe what you were trying to illustrate in the scene, and share some ideas for how you could use Unity and VR for another type of journalistic story. Submit the blog URL with the assignment and also share it in the Slack Chat in the #blogposts category.
If you choose to publish a 360 video, export it from Adobe Premiere, making sure to check “Video is VR” in the export settings. Upload the video into YouTube and make sure YouTube interprets it as a 360 video. Embed the YouTube video in a blog post where you describe what you did, and share some ideas for how you could use 360 video for another story. Submit the blog URL with the assignment and also share it in the Slack Chat in the #blogposts category.
2/27/2018 Lecture Notes: 360 Video
February 27, 2018
- Assignment 1 examples
Emily Campbell, car: https://skfb.ly/6wRqw
Jennifer Castro, Syracuse hat: http://journovationsu.org/assignment-1-creating-a-3d-model/
Cara Fusillo, sugar bowl: http://journovationsu.org/caras-3d-sugar-bowl/
Mikey, a fail with the scan but good contrarian thoughts on the application of the technology. http://journovationsu.org/an-attempt-at-a-3d-model-of-the-sheaffer-pfm/
- Other problems: embedding?
- What else did you learn from the assignment?
- Anyone thinking of doing a 3D web field test?
- Review Finds in the slackchat
My BB8 Model
February 22, 2018
This is my BB8 scan.
2/22/2017 Notes: 3D Web
February 22, 2018
3D, part one.
- Slackchat: please say hello after you join.
- How Slack works. Did you know there’s a Slack mobile app? It works pretty well, too.
- Share news there that you find about what we cover in class. See what I shared about Facebook …
- Please download the Trnio app for IOS, or Scann3D for Android.
12:40-1: Overview of the 3D Web
- AFrame, for creating 3D / VR stuff in a web browser.
1-1:10: What have students done with these technologies in the past? Here are two examples:
1:10-1:25: 3D Depth Cameras and Photogrammetry
- The Structure Sensor and how it works.
- What is photogrammetry?
- What is videogrammetry? See 8i.com.
- The Trnio app (iOS) and Scann3D (Android).
1:25-1:50: Work on creating a model for Assignment 1. You can:
- Scan yourself or a friend (note, I will have to do an in-app purchase for your model).
- Create a 3D model with one of the photogrammetry apps
- When you have something, upload it to SketchFab and annotate it. Then embed in your blog post and share your thoughts about the potential for the 3D web for journalistic storytelling.
- Feel free to also try out Realities.io on the Vive, or Sketchfab on the Oculus.
February 20, 2018
Assignment 7: Make a map with Leaflet
February 15, 2018
In class we started going through the tutorial on the Leafletjs site about how to create a simple map with points, placemarkers, polygons and more. You can review the tutorial again here: http://leafletjs.com/examples/quick-start/
Find a story in the news today, or from something in history, in which location played a role. Create your own map using Leafletjs to illustrate one or more places where the story took place. Upload and embed the HTML into a blog post where you recount the details of the story and then use the map as a way to illustrate the geographical information in the story.
2/15/2017: Factba.se and Leaflet
February 15, 2018
12:30-1: Bill Frischling of Factba.se
- What is it? Check out the Leaflet.js site.
- Why use this instead of Google Maps?
- Take a look at the map I created this morning. It is embedded below, too.
- Let’s go through the tutorial I used to make this map. Please try to follow along!
- Start by downloading this simple HTML template and open it in sublime.
- Note: you may need to use this div code instead to make the map appear:
- You may need to get a Mapbox ID, then register for a token. Put that token into the “accessToken” part of the code when you get to that step. For now, try using this one: pk.eyJ1IjoicGFjaGVjb2QiLCJhIjoiLWk3WnpUTSJ9.MoCPhEjLDP6_wyjHjFDIvg
- Things not working? Feel free to work backwards from this workingmap.html.
1:30-1:50: Work on last few assignments.
- Assignment 6: NVD3: due Sunday night
- Assignment 7: Leaflet: due Sunday, Feb. 25
- Assignment 8: Propose your final project: due Thursday, Feb. 22
Also, don’t forget ….
- Independent learning blog post: 20 points of grade!!!
- Grad students must publish a data visualization professionally somewhere, OR create a web site on your own domain name and web host and post your final project there.
Here is the example map from above embedded into a post.
2/13/2018 Lecture Notes: D3 and NVD3
February 12, 2018
- Course evaluations: please make sure you do them. Unfortunately you have to do one for each of the 3-pack classes. This is a pain, but I really value your feedback and remember it is all anonymous.
- #NHData Finds.
- Review of assignment 5.
- Where did you fail? How did you get out of the sand traps? What did you learn?
- A few great examples:
- Amanda Dominguez: Drug overdoses
Zachary: Fake News Twitter accounts
Tiffany: Domain names of Donald Trump
Maria: Restaurant health code violations. Excellent work with both the map and the chart!
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 a few good ones:
- Midterm election maps from 2014
- Interactive stories from the last Winter Olympics
- Tax rates across the country
- See examples of different types of visualizations here.
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.
(Power Tip: Wondering how to get a lot of data into JSON format? There are converters online, like this one. If you use it, upload a CSV, choose commas as the separator, make sure “First row is column names” is selected, and choose CSV to JSON Array as the output.)
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. A data set to work with
See if you can use sorting and filtering with this data set on causes of death in NYC to generate a comparison graph in NVD3 comparing two different factors (men vs. women, different causes, etc.)
V. NVD3, Assignment 6
Assignment 6 is to work on your own NVD3 chart using your own data. Feel free to use one of the other charts at NVD3.org.