Course Description

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

Students will learn fundamentals of how to find, analyze and visualize data.

More specifically, this course introduces students to the basics of HTML/CSS.They'll also leverage existing platforms. We'll explore all these tools and technologies within the journalistic context of pitching, reporting, producing data and interactive-rich. news pieces.

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

Course Learning Objectives

Students will leave this course with experience in:

Instructor - Sandeep Junnarkar

I'm the Director of the Interactive Journalism at the CUNY Graduate School of Journalism. I began my career by helping to build the earliest digital editions of The New York Times as a breaking news editor, reporter, and Web producer.

More recently, I conceived of and spearheaded The Hate Index, a website that compiles incidents of intolerance since the 2016 presidential elections. Visitors can filter the hate incidents by who, where and how the hate occurred.

In 2017, my colleague Jere Hester and I received a grant from the NYC Media Lab to work on an Augmented Reality project called YOU ARE HERE - an immersive smartphone-based experience that uses AR to tell NYC stories, melding past and present from a street-level view.

I'm also the founder of a groundbreaking tool called PathChartr, which would allow news and community organizations without coders to deliver personalized, relevant and helpful information to users who are guided through interactive journeys, fueled by their answers to a series of questions.

I've received numerous journalism awards, including an Online Journalism Award for my investigative series on hackers' frequent intrusions into banking systems and how that presaged the vulnerability of all our personal information online.

And I love to teach and inspire my students, and to learn from them.

Office hours & Contact

Mondays 12:30-2:00 p.m. or by appointment

The best way to reach me is to Slack me.

  • Direct message me if you need to address a personal concern.
  • Message #general for a question that might apply to others too.

    • Assignments & Due Dates

    No. 1 — HTML/CSS Icon Graphic

    Create graphic related to a news story you are working on.

    Your graphic should include the following elements:

    • Headline
    • At least four icons that represent some important facet of your story.
    • Write a short paragraph that conveys an important data point attached to each icon as it relates to the news story.
    • Build the graphic using ONLY HTML and CSS.
    • Use pre-designed, royalty-free icons.
    • Include your name and data somewhere at the bottom of your graphic
    • You MUST use the design the principles we’ve discussed — pay attention to font, hierarchy and color.

    Logistics

    • Your project folder should be the name of your project slug (one or two words)
    • Remember to use proper file names (index.html, all lowercase, etc)
    • Have proper folder/file hierarchy
    • FTP to your hosting service
    • Figure out the URL (web address) for your piece.

    Pitch Due: Sept. 13 by 10 pm
    Pitch Here: pitch form
    Due: Oct. 1 at 10 p.m.
    File Here: submission form

    No. 2 — Data chart

    You'll Find a topic you are interested in that involves data and datasets. Analyze it as you did for the homework assignment to find interesting, timely patterns or trends.

    Pitch me your idea (why is it interesting, timely and insightful. Once I approve the pitch, call an expert on that subject who can evaluate the relevance and accuracy of the concept/trend you found in the data.

    Write a maximum 150-word piece (including the quote) and create a chart.

    Build your own HTML/CSS responsive page with the following:

    • Headline
    • Byline
    • Your 150-word max text.
    • Chart with caption aligned left or right
    • Link to original data set
    • A photograph that reflects the topic, centered above the headline, with a caption and credit
    • You will FTP the content to your site

    Pitch Due: Nov. 7 by 10 pm
    Pitch Here: pitch form
    Final Due: Nov. 16 by 10 p.m..
    File Here: submission form

    No. 3 — Mapping

    This is a news short story -- 150-250 words -- that has a geographic component which you will illustrate using a map or maps.

    Pitch me your idea (why is it interesting, timely and insightful. Once I approve the pitch, call an expert on that subject who can evaluate the relevance and accuracy of the concept/trend you found in the data.

    Write a maximum 150- to 250 word piece (including a quote from the expert) and create a map.

    Build your own HTML/CSS responsive page with the following:

    • A meaningful headline that captures the story, not that simply labels the map
    • Byline
    • Your 150-word max text
    • An interactive map. Do not create a static graphic.
    • Link to original data set
    • Link to the final clean data you used to create the graphic
    • A photograph that reflects the topic as an illustration, centered. above the headline, with a caption and credit
    • You will FTP the content to your site

    Pitch Due: Dec. 3 by 10 p.m.
    Pitch Here: pitch form
    Due: Dec. 14 by 10 p.m..
    File Here: submission form

    Grading Rubric

    In assessing students' final project, the instructor will focus on the following factors:

    For Discussions

    For In-class Exercises

    Assignment Values

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

    A: High quality student work with minimal editing required.

    B: Good quality student work.

    C: Unsatisfactory work.

    D: Painful to review.

    F: Atrocious, unacceptable work.

    Assignment Percentage Value
    Attendance 15%
    Professionalism 10%
    Icon Assignment 25%
    Chart Assignment 25%
    Map Assignment 25%
    Total 100%

    Deadlines

    You must meet Deadlines by filing your assignments no later than due date and time. Missing a deadline results in an automatic half-grade reduction. Your grade will continue to drop by half a grade for each subsequent day after the deadline until you file your assignment.

    Plan ahead and remember that in journalism: done is better than perfect. It will always be better to hand in something than nothing. If you are having trouble with your assignment let me know immediately, do not wait until it is too late.

    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.

    Importance of Diversity

    It's critical that students learn to include a diverse set of voices in their stories -- something that is often glossed over when telling stories through charts and graphics. You are encouraged to look for stories about and voices from communities that are underrepresented.

    Week-by-Week

    In-Class Sharing/Links

    Week 1 (Aug. 30) - Overview: What's Interactive Data Journalism?

    Week 2 (Sept. 6)- Intro to the languages of the Web

    Week 3 (Sept. 13) - Design Principles for Web/Mobile | Language of Style

    Week 4 (Sept. 20) - Shaping Content with HTML & CSS

    Week 5 (Sept. 27) - Icon Assignment Workshop

    Week 6 (Oct. 4) - What's the story in the dataset 1?

    Week 7 (Oct. 11) - What's the story in the dataset 2?

    Week 8 (Oct. 18) - What's the story in the dataset 3?

    Week 9 (Oct. 25) - What's the story in the dataset 4

    Week 10 (Nov. 1) - Charts & Graphs 1

    Week 11 (Nov. 8) - Charts & Graphs 2

    Week 12 (Nov. 15) - Workshop for Charting Assignment

    Week 13 (Nov. 29) - Mapping Data

    Week 14 (Dec. 6) - Buffer

    Week 15 (Dec. 13)- Mapping Assignment Workshop

    Coach Schedule

    All coaches based in the newsroom

    Name Coaching Expertise Hours
    Kirsti Itameri Interactive Journalism: Design, WordPress, Illustrator, Photoshop, Social Media Tuesdays 6:30-8:30 p.m. or by appointment
    TC McCarthy Interactive Journalism: Coding Thursdays 4-6 p.m.
    Malik Singleton Interactive Journalism: Data Storytelling, WordPress, HTML, CSS Mondays 5:30-7:30 p.m.
    Nicholas Wells Interactive Journalism: Data Storytelling, HTML, CSS, R Tuesdays 6:00 - 8:30 p.m.