Assignment 1 Illustrating a News Investigation

Assignment #1 - Illustrating a Data-Driven News Investigation

Out: September 14, 2015
Due: October 5, 2015

Overview
The goals of this assignment are to get you thinking about illustrating the news using visualization, and to gain experience using the D3 that you’re learning through tutorials in order to create those visualizations. You’ll start by examining a specific investigative, data-driven story from ProPublica while considering and sketching out different visualizations that might support claims made in the article. Then you’ll work to implement at least two of your visualization ideas in D3, and produce an article page that integrates those visualizations into the flow of the text to help tell the story.

Getting Started
It’ll be easiest to break this assignment down into separate steps, including (1) reading the original ProPublica article and looking at the data they analyzed, (2) sketching out and considering what visualizations might be integrated into the textual article to help support the claims made there, (3) programming the specific visualizations you want to create, (4) integrating those visualizations into a combined article plus visualization page.

Step #1
Here is the article: Vying for Market Share, Companies Heavily Promote ‘Me Too’ Drugs. Read it carefully, maybe even print it out. Underline, mark, or annotate sections of the article that you think would benefit from a visual treatment. How can you augment this article with data visualization to make the claims, observations, and story more clear?

Behind this article is a data-driven investigation. You can see the News App that they published for the story here: http://projects.propublica.org/open-payments/ - spend some time tinkering with it to get a feel for what data is there. Read the notes and methodology for the app so you understand the data more completely. Start thinking about how this data connects back to the article. You can get more background on the original data from CMS’ Open Payments Site: http://www.cms.gov/OpenPayments/About/How-Open-Payments-Works.html, http://cms.gov/OpenPayments/About/Open-Payments-Data-in-Context.html, and in particular definitions of some of the data fields: http://www.cms.gov/OpenPayments/About/Natures-of-Payment.html

To facilitate your creation of your own visualizations for this project I have made available two datasets, one for drugs, and one for companies. By looking at the row header in each file you should be able to determine how this data was used to create the News App that ProPublica produced. Download these datasets and explore them a bit in excel to make sure you understand the fields and how they were used in the ProPublica App.

Step #2
Once you feel like you have a better handle on the article and data, start sketching out some ideas for visualizations that would help illustrate the story using the data that’s available to you. You do not have to get too fancy -- consider different types of basic charts like line, bar, pie, scatterplot, histograms, or other basic charts. They need not be interactive. You do not have to use all of the data that’s provided (you can filter it or transform it), and you may optionally use other data that you acquire, though be careful as this could get very time consuming. You might consider adding context for particular companies or drugs, or reinforcing claims made in the text. After you’ve sketched out some options, pick at least two that you think are feasible for you to implement in D3.

Step #3
Using the data that is provided and linked above develop your charts as you would like them to appear on the page with the article. It might be helpful to develop each one on a separate page at first to get it looking the way you want. Write your javascript and CSS code to draw the charts and style them.

Step #4
Copy the raw text from the original article and create your own HTML page design which integrates the article text and your two visualizations. Style it using CSS to tie everything together. Think about how an end-user would see this page as a package which connects the article text and the visualizations.

Submission
This is an individual assignment and you may NOT work in groups. All work should be your own. You may use code you find online provided that you clearly credit the source in your own source code (with a link), as well as in your write-up. You must complete the assignment using D3 however. You'll be evaluated on the quality of the write-up, as well as the accuracy, context, design, clarity, usability, aesthetics, and functionality of the visualizations you code.

Your should submit a write-up of up to ~500 words describing your rationale for your design decisions and your process and reflection on the assignment: Why did you choose to illustrate what you did? Why did you choose the visualizations that you did, including their size, colors, scales, fonts and other visual elements? How do you think your visualizations help to illustrate the article? You should also append to your write up copies (photos are fine) of all sketches that you created during your design process. If you used other data in your visualizations, provide links. You should also provide some reflection on what was most challenging about the assignment.

You should also submit a zip file of your final coded page named according to ASGN1_<your lastname>.zip. Make sure that it can easily be unzipped and tested (i.e. make all paths relative so they are not specific to your individual computer).

Mail your zip file and PDF (filename of ASGN1_<your lastname>.pdf) of your write-up to Professor Diakopoulos: nad@umd.edu before class on the due date.