Ohai there! Welcome to Storytelling with Data + Interactivity

Source: Giphy

Course objectives

This three-credit course introduces students to conceptualizing and producing content across multiple platforms--from Web sites to tablets and mobile devices-- by exploring essential concepts, tools and interactive story forms.

This course explores how the news industry is adapting to new technologies and ways to map or illustrate data and news. Students will also explore ways to add interactivity to audio and visual storytelling.

More specifically, this course introduces students to the basics of HTML/CSS and a touch of JavaScript.They'll also leverage existing frameworks, libraries and content management systems (WordPress).

We'll explore all these tools and technologies within the journalistic context of pitching, reporting, producing data and interactive-rich news packages.

The course covers fundamental technical skills that will serve as the foundation for your interactive work at the CUNY Graduate School of Journalism.

Course outcomes

Students will leave this course with experience:

Students will also have experience telling meaningful and complete stories in interactive formats where space is at a premium.

Story Guidelines

Your work for this class should be your own original reporting. However, if you've done reporting for another class that you'd like to expand on in an interactive project, we encourage you to return to stories you know well.

Every story you produce for our class should include clear source information for any data or images that you did not produce yourself.

Sample data bases can be found here.

Assignments & Due Dates

No. 1 - Data graphic or chart

Pitch due: Friday, Sept. 25 at 10pm

Deliverables: Find a data story! It’s time to find a data-driven story. What subject areas are interesting to you? And what stories do you wanna tell? Answer the following questions:

Final due: Monday, Oct. 5 at 10pm


No. 2 - Mapping

Pitch due: Friday, Oct. 9 at 10pm

Deliverables: Find a data story! It’s time to find a data-driven map story. What subject areas are interesting to you? And what stories do you wanna tell? Answer the following questions:

Final due: Monday, Oct. 19 at 10pm


No. 3 - Journalistic portfolio using WordPress

Draft due: Oct. 30 at 10pm

Put together an outline of your materials and all the components you want to display.

Final due: Nov. 16 at 10pm

No. 4 - Paper prototype of an Interactive feature

Draft due: Dec. 11 at 10pm

Create a paper prototype of the kind of coverage you would do for a major news event or enterprise story. This is both a coverage plan and wireframes of potential components.


If you don't have a story you want to do, here are some sample topics you can choose from:

Showing: During class week 15.

Grading Assessment

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

For Discussions

For In-class Exercises

Assignment Values

Grading for individual assignments is based on the level of professionalism of the finished work:
A being professional quality work with minimal editing required.
B being good quality student work.
C being unsatisfactory work.
F being atrocious, unacceptable work.

Grading for the class as a whole will be based on your overall performance, with the weights of assignment and other grades as follows:

Assignment Percentage Value
In-class participation/professionalism/in-class exercises 20%
Data-viz assignment 20%
Map assignment 20%
Portfolio 20%
Paper Prototype 20%
TOTAL 100%



I'm an interactive editor for Al Jazeera America, where I lead a team of coder-journalists and cover poverty-related stories. Before coming to Al Jazeera, I was a multimedia producer for NPR's Planet Money where I created interactives, data visualizations, videos and photographs to explain economic issues in visual ways. From 2009-2011 I worked for The Wall Street Journal in Asia and was the editorial lead for video content in the region. I worked with more than a dozen bureaus to create both breaking news stories, regular series and produced enterprising multimedia projects. My reporting in Asia includes stories about China's property market, the 2011 Japanese earthquake and climate change issues in Vietnam's Mekong Delta.

The way I teach is very informed by my work experience: I've hired and worked with a range of people — from freelance videographers, photographers, developers and writers to full-time reporters whose pitches I edit and hone. I will hold your assignments to a high standard and expect you to be working independently. I believe that this will prepare you for real newsrooms and help you deal with editors who are strapped for time and expect high-quality work. Don't be worried, I will still give you advice on your stories and we will workshop ideas in class to help guide your progress. But the goal is for you to come out of this not just with tech skills but also with an understanding of what might be expected of you in newsrooms.

Plagiarism and Copyright

It is a serious ethical violation to take any material created by another person and represent it as your own original work. Any such plagiarism will result in serious disciplinary action, possibly including dismissal from the CUNY J-School. Plagiarism may involve copying text from a book or magazine without attributing the source, or lifting words, code, photographs, videos, or other materials from the Internet and attempting to pass them off as your own. Please ask the instructor if you have any questions about how to distinguish between acceptable research and plagiarism.

In addition to being a serious academic issue, copyright is a serious legal issue.

Never "lift" or "borrow" or "appropriate" or "repurpose" graphics, audio, or code without both permission and attribution. This guidance applies to scripts, audio, video clips, programs, photos, drawings, and other images, and it includes images found online and in books.

Create your own graphics, seek out images that are in the public domain or shared via a creative commons license that allows derivative works, or use images from the AP Photo Bank or which the school has obtained licensing.

If you’re repurposing code, be sure to keep the original licensing intact. If you’re not sure how to credit code, ask.

The exception to this rule is fair use: if your story is about the image itself, it is often acceptable to reproduce the image. If you want to better understand fair use, the Citizen Media Law Project is an excellent resource.

When in doubt: ask.

Office hours

By appointment or email me. Please allow 2-3 days for me to reply.

Lesson Plan Changes

The lesson plan below is subject to change depending on the progress and success of the students in the class.

Lesson Plan

Week 1 - Overview

Presentation of wide-ranging set of examples that showcase the use of coding and design to enhance storytelling.
Introductions (slides)
Syllabus review (site)

Prep for Week 2

Read: Analysing data is the future for journalists | The Guardian
Read: Why Math Matters | Poynter

Week 2 - What's the story in the dataset?

Introduction of the use of data in journalism (slides)
Data Tools (slides)
Basic Spreadsheets tutorial, including various formulas, pivot tables (slides)
Numeracy (Normalize, Percentages, Rates)

Prep for Week 3

Read: Design Principles for News Apps & Graphics - ProPublica
Which chart or graph is right for you? | Tableau Software

Week 3 - Charts & Graphs | Design Principles for Web/Mobile 1

Data Tools continued (slides)
Types of charts (slides)

Design (slides)

Illustrator (slides)

Prep for Week 4

Read: Using Web Maps to Tell Your Story | ArcNews

Week 4 - Mapping Data 1 | Design Principles for Web/Mobile 2

Maps (slides)

Information Design (slides)

Prep for Week 5

Install Sublime (trial)
Github account (free: educational (takes some time) | general )
jsfiddle (free)

Read: Should journalists learn how to code? They already do. (And yes, they should) | Online Journalism Blog
Read: Introduction to the Web by Scott Murray

Week 5 - Intro to HTML/CSS 1

HTML and CSS (slides)

Sample files to play with can be found here

Week 6 - Intro to HTML/CSS 2

Steal that code! (slides)

Learn CSS (slides)
Id v. Class

Week 7 - Mapping Data 2

Steal that code! continued — Github, uploading to hosting service (slides)

Taking the HTML/CSS we've learned, we customize mapping with CartoDB (slides)
Discuss domain names and how to purchase them (instructions)

Week 8 - Portfolio Building 1

The story of you (slides)

Setting up your Wordpress site (slides)

Prep for week 9

Write 150-word bio
categorize and gather your material

Week 9 - Portfolio Building 2

How to navigate Wordpress (slides)

Set up portfolio with with gathered content

Week 10 - Analytics, SEO & SMO

Guest lecturer: Blair Hickman

Understand social media metrics tools and techniques (slides)
Engagement and the Attention Web (slides)
Impact models (slides)
Installing Analytics (slides)

Prep for week 11:

Scooped by code » Nieman Journalism Lab

Week 11 - Intro to Scraping Data

Harness free tools and techniques to scrape websites and PDFs. (slides)
Recognize how a web page structures and holds data, images and other information you might want to capture.
Tap tools to analyze a page to determine how to scrape it.
Scrape web pages with minimal coding.
Transfer collected data to a CSV or Excel spreadsheet where it can then be analyzed.

Week 12 - Adding Interactivity to HTML/CSS

Javascript and JQuery (slides)

Week 13 - HTML and Jquery part two

Using Javascript libraries like highcharts! (slides)

Week 14 - Paper Prototyping

Create a plan for how to cover a major news event during the initial breaking news and ongoing coverage. Decide your team and the skills you need and what each of them will be doing.

Plan an interactive project as part of your coverage and create a paper prototype or wireframe to explain your concept and how it will work.

You’ll present your idea in front of the class -- pretend they’re the editor of your publication -- in the final week.

Class presentation slides

Prep for Week 15

Organize and practice your presentations

Read: Tips for Class Presentations

Week 15 - Paper Prototype Showcase

Each team presents their prototype in front of the class.


Coaches work one-on-one with students to guide them on projects and help problem-solve. Students are advised to consult a coach if they have tried something themselves and it hasn’t worked to their satisfaction.

Kirsti Itameri, Design, WordPress, Illustrator, Photoshop, Social Media – Newsroom. Office Hours: Tuesdays 6:30-8:30 pm or by appointment. Email: kirsti.itameri@journalism.cuny.edu

Meghan Louttit, Interactive Storytelling, JavaScript, Jquery, HTML, CSS - Newsroom, Office hours: Wednesdays 6-8 pm or by appointment. Email: meghan.louttit@journalism.cuny.edu

Malik Singleton, Data Storytelling, WordPress, HTML, CSS – Newsroom. Office Hours: Monday and Wednesday, 5:30-7:30 pm. Email: malik.singleton@journalism.cuny.edu

Nicholas Wells Data Storytelling, HTML, CSS, R -- Newsroom. Office Hours: Tuesday 6:00 - 8:30 pm. Email: Nicholasbwells@gmail.com

Jue Yang, Data Storytelling, Data Analysis, GitHub, UI/UX, Information and Visual Design, Interactive Storytelling, JavaScript, jQuery, Python, Web Scraping, HTML/CSS— Office Hours: Virtually and by appointment. Email: github.com/jueyang/call-me-maybe