Advanced coding

Course Description

This three-credit course will introduce students to effective, data-driven interactive storytelling. Students will learn how to effectively research and pitch stories; they will learn how to employ design and code to tell these stories; and they will learn how to produce, iterate and publish their projects.

Class	Weekday	Dates	Subjects	Work due	Guest speaker	Presenter
1	Tuesday	8/30/2016	News dev community & beat memo
2	Tuesday	9/6/2016	Data from your beat (types of data); data headaches and how to salvage them	Pitch news assignment		Michael
3	Tuesday	9/13/2016	Static vs. interactive graphic; data formatting, Github review;	Draft news assignment	Andrew Van Dam, graphics reporter, WSJ	Johanna
4	Tuesday	9/20/2016	Multi-screen graphics, illustrator (review and advanced tricks); media queries; AI2html introduction/installation	Final news assignment	Azmat Khan, formerly at BuzzFeed	Rhea
5	Tuesday	9/27/2016	What's my data story? Finding insights in microdata (part 1); ai2html (part 2)		Coulter Jones, data reporter, WSJ	Noah
6	Tuesday	10/4/2016	What's my data story? All the iterations of a data story (part 2); pseudocoding; simple app	Pitch for Ai2HTML	Sarah Squire, Interactive Editor, Dowjones Media Group	Kathryn
7	Tuesday	10/11/2016	The considerate coder - clean code; check yourself, before your wreck yourself; browser and device testing, underscore.js	Draft for Ai2HTML	Karen Zraick, foreign desk, New York Times (tentative)	Brandon
8	Friday	10/14/2016	Go, team go!; github for team players; semantic-ui	Final news Ai2HTML		Nicole
NO CLASS		10/18/2016
NO CLASS		10/25/2016
9	Tuesday	11/1/2016	Principles of organizing information, UX design, animate.css	Data visualization (interactive) pitch		Sandeep
10	Tuesday	11/8/2016	personalization, chosen.js	Data visualization (interactive) draft		Noah
11	Friday	11/18/2016	interactive methods; D3.js (part 1)	Final data visualization (interactive)	Alvin Chang, graphics reporter, Vox.com	Kathryn
12	Tuesday	11/22/2016	D3.js (part 2)	Pitch team project	Joanna Kao, Interactive reporter, The Financial Times	Brandon
13	Tuesday	11/29/2016	D3.js (part 3)	Draft team project	Quoctrung Bui, The New York Times	Nicole
14	Tuesday	12/6/2016	Secure that s***	Final projects (presentation in class)

Skills covered

All the Technology will be taught in the context of gathering, producing, editing and presenting compelling journalism:

Data reporting and analysis

• Data ethics

• Extracting data from PDFs via Tabula

• Github for journalists — version control and collaboration

Story Presentation

For static graphics

• Adobe Illustrator

• Ai2html

• Responsive web design, media queries and serving multiple screens*

For interactive graphics:

• chosen.js or semantic-ui — ways to bring up data

• Javacript/JQuery — clean, object-oriented and reusable code;

• parsing and customizing data

• Underscore.js — manipulating/sorting data

• D3 or Data-driven documents (a JavaScript library) — advanced data-visualizations

Assignments & Due Dates

All assignments will require a total of 250- to 500-words to accompany the interactives. Don't think 500 continuous words, rather words to help transition between various interactive elements. Some assignments and in-class exercises will be produced individually, others in agile teams:

1. Produce a news piece that involves charting of a narrative or trend using Illustrator. Think of it as a post for FiveThirtyEight, Vox.com, Quartz, The Upshot, the Wonkblog, the Fix or other short- to medium-form outlet. Lesson 4, September 19 by Noon

2. Build a data-driven news feature that is produced by using AI2HTML. Lesson 7, October 14 by Noon

3. Create a news app that allows people to understand a data set using a dropdown menu, searchable bar or other interactive component. The dropdown menu should change something in your app — text, a graphic, a table — to give new, personal insights t the data set. Lesson 11, Nov. 16 by Noon.

4. Produce a team project that explores a single timely and complex topic from different angles using the skills and story forms acquired during the semester. Final due lesson 14, Dec. 6 by Noon.

5. Extra Credit: Team to build and maintain publishing platform

Grading Rubric

For all assignments

In assessing students' work, the instructor will focus on the following factors applicable to all assignments (specific criteria for each assignment will be detailed later):

• Editorial quality: Has the work been prepared with careful thought and attention to detail? Were the drafts iterated and improved based on faculty feedback? (50%)

• Production value: Is it presented clearly and in a professional manner suitable for an audience? Is it executed with skill and subtlety, and has it been edited well and polished? (25%)

• Punctuality, completeness and attention to detail: Is it on time and complete, and does it fulfill the assignment? (25%)

For Discussions

• Preparedness: Has the student completed the work necessary in preparation for the discussion (viewing assigned video, completing assigned reading or tutorial)?

• Participation: Was the student engaged in the discussion (both paying attention and participating)?

For In-class Exercises

• Effort: Did the student try to complete the exercise to better understand the lesson at hand?

• Participation: If the exercise involves collaboration, did the student contribute?

Assignment Values

Grading for individual assignments is based on the level of professionalism of the finished work:

• A Student work that is approaching professional level, with minimal editing required.

• B Good quality student work.

• C Unsatisfactory work.

• F Late, unacceptable work.

Final Grading

Assignment	Percentage Value
In-class participation/professionalism/in-class exercises	20%
Assignment 1	20%
Assignment 2	20%
Assignment 3	20%
Assignment 4	20%
TOTAL	100%

Lesson-by-lesson

Class concept

Students are introduced to the course, including what skills and topics are covered, the long term project and short term assignments, and some of the production logistics like server space, GitHub and where to publish.

We will be covering race and ethnicity with the following verticals:

1. Politics and policy

2. Economics

3. Arts and culture

4. Education

5. Immigration

6. Science, Technology and Health

During this class you will be assigned a beat which you cover throughout the semester and we will designate 2-3 web editors for extra credit. Once they have been given or chose a beat they will start putting together a quick beat memo: who are the main players in their beat, what are the 3-5 most prominent subjects within their beat and what are the best data sources for their beat.

Lesson 1 (Tuesday, August 30)

Introductions: Give me your info! (form)

Topics: The news nerd cosmos — How you might fit in it (slides)

Craft: The art of a beat memo (slides)

Tech: Start your beat memo! (template)

Homework:

• Assignment 1: Find datasets and other newsworthy story material that fits the profile of our publication and your beat. You should aim for a news piece that involves charting of a narrative or trend. Think of it as a post for FiveThirtyEight, Vox.com, Quartz, The Upshot, the Wonkblog, the Fix or other short- to medium-form outlet. The pitch must be filed in this Google Form by 10 pm the day before our next class. It has to include:

  • your name

  • a headline

  • a one or two paragraphs that include why it's newsworthy right now, what is at the heart of your story (your nutgraf) and links to data sources

  • links to data sources, other research

Lesson 2 (Tuesday, Sept. 6)

Topics: Finding stories in your data beat: an imperfect step-by-step guide (slides)

Craft: Data headaches — my favorite (advanced) things in Excel (slides)

Tech: Illustrator — make a graphic using Illustrator templates (slides | template)

Homework (Assignment 1):

• Make first draft of your graphic assignment. The draft must be filed in this Google Form by 10 pm the day before our next class.

Lesson 3 (Tuesday, Sept. 13)

Topics: Static is the new interactive — trends in data visualizations (slides)

Craft: jQuery — a quick review | JavaScript vs jQuery (slides)

Everything is data — data structures for different data visualizations; from csv to json to columns (slides)

Tech: Intro to your code template (template)

Homework (Assignment 1):

• Finish your assignment! The final draft must be filed in this Google Form by noon Sept. 20, 2016.

Lesson 4 (Tuesday, Sept. 20)

Topics: Serving graphics to a multi-screen generation (slides)

Craft: Responsive web design and the art of media queries (slides)

Tech: Ai2HTML (part 1) — installation, setup and making multiple graphics (slides)

Lesson 5 (Tuesday, Sept. 27)

Topics: What’s my data story? Finding insights in microdata (slides) ** **

Craft: Object oriented CSS (slides)

Tech: SASS (slides)

Homework:

• Assignment 2: Pitch a data-driven news feature that is produced by using AI2HTML. The pitch must be filed in this Google Form by 10 pm the day before class. It has to include:

  • your name

  • a headline

  • a one or two paragraphs that include why it's newsworthy right now, what is at the heart of your story (your nutgraf)

  • links to data sources, other research

Lesson 6 (October 4, 2016)

Topics: What’s my data story? All the kinds of formats (slides)

Craft: Pseudocoding — coding with pen and paper (slides)

Tech: Pseudocode a project with jquery function names and comments

SASS (slides)

Homework (Assignment 2):

• Build a first draft of a data-driven news feature that is produced by using AI2HTML. The draft must be filed in this Google Form by 10 pm the day before class.

Lesson 7 (October 11, 2016)

Craft/Tech: Make me a news app (slides)** | **Check yourself before you wreck yourself — what to look for before you deploy (slides)

Lesson 8 (October 14, 2016)

Topics: Github (for team players) — version control and collaboration, a game (slides)

Craft/Tech: Semantic-ui — your searchable dropdown (slides) | Use Lam’s Scraper! (slides)

Homework (Assignment 2):

• The final version of your second assignment must be filed in this Google Form by noon the day of next class (October 18, 2016).

Weeks off

Homework:

• Assignment 3: Pitch a news app that allows people to understand a data set using a dropdown menu, searchable bar or other interactive component. The pitch must be filed in this Google Form by 10 pm the day before class. It has to include:

  • your name

  • a headline

  • a one or two paragraphs that include why it's newsworthy right now, what is at the heart of your story (your nutgraf)

  • links to data sources, other research

Lesson 9 (November 1, 2016)

Topics: The art of debugging (slides)

Craft: UX design (slides)

Tech: Why isn’t this working?! — Let’s debug a project (slides)

Homework (Assignment 3):

• Create a draft for a news app that allows people to understand a data set using a dropdown menu, searchable bar or other interactive component. The draft must be filed in this Google Form by 10 pm the day before class.

Lesson 10 (November 8, 2016)

Topics: All you care about is yourself — personalization through interactivity **(slides) Craft: d3.js — your best friend, your worst enemy, an introduction to how d3 works (slides)

Tech: Load data through d3.js (slides)

Homework (Assignment 3):

• The final version of your second assignment must be filed in this Google Form by noon the day of next class (November 16, 2016).

Lesson 11 (November 18, 2016)

Topics: Interactive wonderlands — how users learn through interaction (games) and how animation can help you do better linear data storytelling (data explorations) (slides) Craft/Tech: Drawing shapes and styling them with d3.js (slides)

Homework:

• Assignment 4: Pitch a team project that explores a single timely and complex topic from different angles using the skills and story forms acquired during the semester. The pitch must be filed in this Google Form by 10 pm the day before class. It has to include:

  • your name

  • a headline

  • a one or two paragraphs that include why it's newsworthy right now, what is at the heart of your story (your nutgraf)

  • links to data sources, other research

Lesson 12 (November 22, 2016)

Craft/Tech d3 — Scales and axes (slides)

In-class lab: work on your projects

Homework (Assignment 4):

• Create a draft of a team project that explores a single timely and complex topic from different angles using the skills and story forms acquired during the semester. The draft must be filed in this Google Form by 10 pm the day before our next class.

Lesson 13 (November 29, 2016)

Craft/Tech: d3 — adding pazzazz (slides) | securing your information (slides)

In-class lab: work on your projects

Homework (Assignment 4):

• The final version of your second assignment must be filed in this Google Form by noon the day of next class (December 6, 2016).

Lesson 14 (December 6, 2016)

Topics/Craft: Secure that s*** (slides)

Online Tutorials

Data, data journalism, code:

-Data Journalism Handbook (great examples and approaches): http://datajournalismhandbook.org/1.0/en/ -ProPublica Data Style Guide (it has a great checklist of dos and donts when you work with data and interactive storytelling): https://github.com/propublica/guides/blob/master/news-apps.md -A Guide to Bulletproofing Your Data https://github.com/propublica/guides/blob/master/data-bulletproofing.md
-The Quartz guide to bad data (compilation of the most typical issues you encoounter when working with data): https://github.com/Quartz/bad-data-guide -What is code (Paul Ford explains in depth the bits and bytes of coding): http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/ and the github repository where you can find all the assets of the story and see how it was made https://github.com/BloombergMedia/whatiscode -Field Guide to Media Tech + Product (basic guide to news product development and it`s components) https://github.com/newsnerdery/docs/blob/master/resources/field-guide.md

-What are API`s, why they matter and how to use them (Sunlight Foundation explains it): https://sunlightfoundation.com/blog/2015/09/08/what-are-apis-why-they-matter-and-how-to-use-them/

Charts and graphs: -Datavizcatalogue: charts and graphs according to function, includeing descriptions of each chart type and different tools you can use to build them: http://datavizcatalogue.com/search.html

Maps: -GeoJournalism Handbook http://geojournalism.org/ -Choosing the right type of maps for your story http://geojournalism.org/2013/08/map-styles/ -Matthew Ericson "When maps, shouldn’t be maps: http://www.ericson.net/content/2011/10/when-maps-shouldnt-be-maps/ -Baking Chart Data Into Your Page: Using “Dayligraphics rig" to build charts with copytext.js (to inject serialized JSON from a Google Spreadsheet onto their page with one line of template code) http://blog.apps.npr.org/2015/01/28/dailygraphics-json.html

**NICAR Tutorials and how to’s (compiled by Chrys Wu): **http://blog.chryswu.com/tag/nicar/#tutorials

Design: -Design Principles for News Apps & Graphics, Lena Groeger, ProPublica: https://www.propublica.org/nerds/item/design-principles-for-news-apps-graphics

Html/CSS coding:

Github:

-Github: Build a Web Portfolio from Scratch with Github Pages https://dannguyen.github.io/github-for-portfolios/ (includes links to other ste by step tutorials on the same topic). Another step by step for portafolio static website http://knightlab.northwestern.edu/2013/08/02/how-to-portfolio-sites-for-journalists-github-makes-em-cheap-and-kinda-easy/

Persuading with facts:

-Debunking Handbook: http://www.skepticalscience.com/docs/Debunking_Handbook.pdf

Data, persuasion and truth: when it comes to disputed subjects people tend to stand by their beliefs rather than the facts because changing their mind means changing themselves. How can we tell stories about disputed subjects with truth and persuade those who much rather stand with their ideas instead of facts?

Books (from which we should choose chapters): -The Functional Art: An introduction to information graphics and visualization. Alberto Cairo. -Lean Analytics, Chapter 5 "Analytics Frameworks" and Chapter 11 “Model Four: Media Site”. Note: I have a .PDF version -Lean UX: http://shop.oreilly.com/product/0636920021827.do

**Metrics, engagement, kpis: -**The data behind the most read article of 2015 in Chartbeat network http://blog.chartbeat.com/2016/01/12/the-data-behind-the-most-read-article-of-2015/

Blogs: Visualizing Data, Information is Beautiful, Flowing Data, Junkcharts

Ethics, data, privacy, legal: -"When Is It Ethical to Publish Stolen Data?" Nieman Reports, June 2015. http://niemanreports.org/articles/when-is-it-ethical-to-publish-stolen-data/

-Jonathan Peters, "Can I Do That? A Legal Primer for Journalists," Columbia Journalism Review, Oct. 2015. http://www.cjr.org/united_states_project/can_i_do_that_a_legal_primer_for_journalists.php -“Newsgathering and Privacy” http://www.dmlp.org/legal-guide/newsgathering-and-privacy -“Recording Phone Calls, Conversations, Meetings and Hearings” http://www.dmlp.org/legal-guide/recording-phone-calls-conversations-meetings-and-hearings -“Recording Police Officers and Public Officials,” Digital Media Law Project, Harvard University. http://www.dmlp.org/legal-guide/recording-police-officers-and-public-officials

Interviews for different types of storytelling: -"Interviewing a Source: Rules of the Road; Talking with Officials and Experts," Journalist’s Resource, Jan. 2013. http://journalistsresource.org/tip-sheets/reporting/interviewing-a-source

Statistics tutorials: Hyperstat http://davidmlane.com/hyperstat/. Stat Trek http://stattrek.com/tutorials/statistics-tutorial.aspx

Coaches

You'll find all coaching hours here here.

The most relevant ones are below:

Name	Coaching areas	Hours	Office Location	Email
Kirsti Itameri	Interactive Journalism: Design, WordPress, Illustrator, Photoshop, Social Media	Tuesdays 6:30-8:30 pm or by appointment	Newsroom	kirsti.itameri@journalism.cuny.edu
TC McCarthy	Interactive Journalism: Coding	Thursday 6-8 pm	Newsroom	tc.mccarthy@journalism.cuny.edu
Malik Singleton	Interactive Journalism: Data Storytelling, WordPress, HTML, CSS	Mondays and Thursdays, 5:30-7:30 pm	Newsroom	malik.singleton@journalism.cuny.edu
Nicholas Wells	Interactive Journalism: Data Storytelling, HTML, CSS, R	Tuesdays 6:00 - 8:30 pm	Newsroom	Nicholasbwells@gmail.com
Jue Yang	Interactive Journalism: Data Storytelling, Data Analysis, GitHub, UI/UX, Information and Visual Design, Interactive Storytelling, JavaScript, jQuery, Python, Web Scraping, HTML/CSS	Virtually and by appointment	Faculty Cubicle	github.com/jueyang/call-me-maybe