Skip to content
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
Cannot retrieve contributors at this time
837 lines (544 sloc) 53.3 KB

Metrics + Data Visualization I - SVA-DSI



Find this resource here:


Sept. 6th - Dec 13th
Tuesdays 6-9:00PM

Here is the course listing.


Aurelia Moser


Fridays 5-6PM, by appointment via gcal - send to


Data visualizations increasingly shape the way we process the success of initiatives, and the expectations for activism and innovation globally. How might you evaluate the success or impact of a program? What skills should you hone to communicate your projects and progress to a new audience? How can technology hone critical thinking and problem framing for a particular area of social need and interest?

This course will introduce web development for data visualization, including an introduction to web scripting languages, version control for collaborative coding, and the authorship of interactive visualization on/off the web.

The goal of the course is to compliment student's existing coursework and interests with some basic visualization skills, by course completion, helping them design, build, and deploy a data-driven interactive on a topic related to their work. Students will workshop an interactive of their own design throughout the course, punctuated by smaller exercises and lecture pairings on the topics of HTML5/CSS3, Javascript and contemporary development in open source and non-profit tech.


Being successful in programming or social change initiatives involves producing under deadline. Funders, employers, collaborators, and patrons of your products will expect that you work efficiently. This course is modeled for your future success, and so deadlines will be applied to keep time with a professional pace. The final project for the course, and primary graded assignment, will depend on an agglutinative series of tasks designed to help you learn and think critically throughout the semester.


  1. how to assess, manipulate, and analyze data
  2. how to bulletproof your data
  3. the merits of certain visualization types
  4. the mechanics of collaboration and github
  5. the basics of building interactive graphics: html/css/js/processing
  6. the value of publishing and self-publishing


Here is a basic breakdown of graded tasks along that trajectory:

  • 10% Attendance/Participation
  • 30% Assignments
  • 20% Project Proposal
  • 40% Final Project, completed on conclusion of the course

TOTAL: 100%

It is understood that coding is tough and you may be new to this, you will be graded on your progress throughout the class, your ability to complete assignments on time, your interaction with peer reviewers, and your ability to justify your decisions thoughtfully.


Coding is an art; you will have a series of art supplies for this course that will all be free unless otherwise noted, but will require some non-trivial investment on your part to set-up. I'm available to help if you need it.






You will find a parter, or a triplet in this course and have some time afforded to workshop your ideas, your narratives and your code with them during peer review. They will give me feedback that contributes to your grade; so pair well with your peers.


Attendance accounts for 10% of your final grade.


Each week you will have readings assigned, accompanied by often (but not always) an Assignment and a Practice activity. See the calendar below to confirm the expectations from week to week. I will grade your assignments and aggregate them as contributions to your final grade. Most assignments are working toward your Final Project, counting as 40% of your final grade.

  • All assignments will be submitted via gist on your Github account.
  • Aurelia will repost assignments in Canvas, where possible
  • You can view a template of what your assignment should look like here in this gist.
  • We have a Github classroom for our course, to which you will add your final projects, more on that later.
  • Assignments are due on the course date following the class in which they are assigned unless otherwise indicated - there are short assignments every week - Week 2 for example, "Critique an interactive" is due on 9/13
1 09/06 Read the syllabus
2 09/13 Critique an interactive X GUEST: Nadja Popovich
3 09/20 Comparing interactives X GUEST: Rachel Berry
4 09/27 Evaluating platforms + Versioning X GUEST: Caroline Sinders
5 10/04 Intro to Creative Code + Visualizations X
6 10/11 Dataset selection X GUEST: Andy Eschbacher
6 10/18 Prototype 1: Mapping X GUEST: Ekene Ijeoma
7 10/25 Prototype 2: Time-Series/Stats X GUEST: Francis Tseng
8 11/01 Prototype 3: Graphs
9 11/08 Style guide for Final Project ELECTION DAY
10 11/15 Proposal for Final Project X
11 11/22 Template your project
12 11/29 Peer review: groom projects with feedback
14 12/13 Final Presentations/Final Projects Due DEMO
  • note: November 08 is Election Day, if you are eligible to vote, I encourage you to do so.


Readings are assigned to correspond with that week's assignment and class lesson. I'll be lecturing outside the readings with some references to them, and your assignments will allude to them too. Feel free to read ahead to make certain weeks easier.

There is no textbook for this course as most of the resources can be found for free online.

You can find the FULL BIBLIOGRAPHY in the repository for this course.


This course is 15 weeks long. Dates are based on the academic calendar for SVA.



"Numbers have an important story to tell. They rely on you to give them a clear and convincing voice." ~ S. Few

What is an interactive application, a data visualization, and what is this course about? We'll talk about instances of success and failure in apps, review some basics of this course and take care of some technical logistics related to Github, version control, and the basics of web literacy.


Interactive to Inspire:



We will go over this process, but you should practice some of the terminal commands and markdown syntax so that you feel comfortable on your own machines. We'll go over it next week.


Find an interactive that you appreciate, prefereably (but not obligatorily) one that addresses a social issue of interest to you. Write 2 paragraphs about why you chose it, what it is about, how the interactive/online medium chosen was particularly conducive to the narrative (or wasn't). Finally, explain how it was built, do some research to define what programming language it was written in; what was its creation story (if you can find it)?

It could be something like an NPR multimedia piece, as complex as a ProPublica graphic, as iconic as Snowfall, as riveting as a graphic novel, or as arty as this exhibit of themed photos, but the effort to understand and document it should be the same. Extra points for finding something not on the list above, or review something in the 13pt Graphics list, a grouping assembled by the NYTimes.

Remember, you can view a template of what your assignment format herein this gist.



"Visualizations act as a campfire around which we gather to tell stories." ~ A. Shalloway

This week we'll here from an interactive developer working in a newsroom in NYC; Aurelia will be out this week so Nadja Popovich will take her place, starting the course with a talk, after which you can leave class. Our practice and assignment exercises will go over different approaches to similar topics in news and art, and ways that they might inspire eachother.


The Guardian, _Are you reflected in the new Congress.

Nadja Popovich, The Guardian US

Nadja is an interactive journalist at the Guardian U.S.

She's worked on interactive projects like:



Continue to practice your fluency in Github commands with this online interactive tutorial.

Finish the exercises on the Basics of HTML/CSS Practice Site.

Here are some other resources for Github learning:


The following interactive projects deal with data about drones. Think about who handled it (that is, the topic) better:

Why was the one you chose superior? How? What aspects are more or less compelling, what would you say is a better approach to communicating this material?

Consider the pieces and work shown by the guest lecturer, highlight some aspect of their work that seemed very difficult to you and find some resources online detailing how you would develop skills to support what you find difficult. Maybe they have to code, maybe they have to write tests or evaluate the user experience of their project, maybe they have to make high quality mockups in Illustrator. Pick something they describe that you don't understand and find ways to learn about it so you might be better prepared to deal with that in the workplace. Then write a paragraph about how you would develop this skill, what resource you would use.



"I just wanted to share my view on the distinction I personally make between the two main types of visualization function: exploratory and explanatory" ~ A. Kirk

How can you use data visualization to innovate with integrity and intelligence in our contemporary world? There are many online venues and platforms for editorializing and delivering your message, which will you choose? This process might involve some code and custom building, but also concise research into your audience, and what guides viewers to a greater understanding of the topics you are treating.

We'll talk about ways you can publish your work, and practice a few different methods of distributing narrative.

Ramadan Tweets

Interactive to Inspire:

Rachel Berry, Github

Rachel is an Analytics Engineer at Github.

She'll be talking about how to use Github to publish, host and render your code.




Try to setup up a bl.ocks account based on your gists (the first few assignments for this course should suffice). Bl.ocks accounts like mine are based on gists, so you're already on your way to having an online interactive portfolio, yay! You can see blocks in action in today's Interactive to Inspire above, which links to the raw version of the interactive as well as the code (if you remove the raw in the URL).

This syllabus is written in markdown. You can study how it's made by looking at the format and the rendered version. Click on RAW (a button) in the Github view to compare, copy the raw text into Mou and view the side-by-side comparison.

Optionally, you can also go over some of the basics of HTML/CSS and web pages with this Khan Academy course, it will take an hour max.


Take a look at the following platforms for citizen journalism and community activism, consider the merits of each and choose one to profile. Explain in a few paragraphs why it appeals to you, what you might use it for, and describe how you tested it to confirm. Propose another method of self-publishing, inspiring change or soliciting grassroots opinion if you find none of these satisfactory, and explain why it seems superior.

Consider the readings an try to incorporate some of the readings' content into your assessment of these different platforms.

BONUS: link to your first bl.ock (see practice above). Write a sentence or two about how you might incorporate blocks into a larger narrative, or an interactive piece.



"Narrative can on the one hand be broken down into a set of universal laws and principles that may transcend mediums. Stories have temporality in common (they deal with time) as well as causation (they deal with cause and effect of something). On the other hand there are the more media specific narrative affordances as for example in the way that film, opera, novel and data visualisation – because of their physicality and the dimensions open to them – would be able to give a different ‘staging’ of a story." ~ C. Twigg

What is data-driven development and what kind of stories can it help us convey? How does it relate to art, and why are visualizations such an important component to interactive development? This week, we'll identify some data sources to support solid narratives. We'll feature a guest talk from Caroline Sinders as well.

Guantanamo Calendar)

Interactive to Inspire:

Caroline Sinders, Eyebeam, IBM Watson

Caroline Sinders is a user researcher for IBM Watson, as well as an artist, researcher, and video game designer. She'll give a talk on her projects, and thoughtful approaches to creative work with computers.

She's worked on interactive projects like:


The following are mostly data resources, feel free to use them for the assignment or seek your own dataset.

The following are mostly for coding practice, feel free to use them to keep up with your coding skills



In prep for our study of maps and extra-journalism interactive platforms, evaluate the utility and validity of Pattrn's projects, including The Gaza Platform, a partnership with Amnesty Intl. Another resource that might be helpful for dissecting visualizations is Source, a blog that dissects a lot of interactives for journalism articles, like this one on the Chicago Police corruption investigation.

For coding practice, take a look at the Completed vs Practice files in this week's slides, and try to identify some differences that contribute to how different the visualizations look. Hint: look at the "stylesheets" or CSS files to see how they are different.


Do some research, find a few stories that inspire you, or some that don't. Think about what data they use to prove their assertions, or what datasets might help to bolster their arguments.

Consider if you could develop a visualization to support that topic, or study it further. Consider what open data sources you could use (see those listed in the readings above); consider what closed data sources you might try to solicit (check out this Five Minute Field Guide to find data relevant to your idea).

Try to find one or two datasets that suit a narrative or argument you'd like to build. Write 1-3 paragraphs about:

  • what datasets you chose
  • why you chose them
  • what story you might like to tell
  • what type of data you have (time-series, geospatial, graph data)?
  • how you expect your audience to engage with those data.

Link to the datasets if they are available online, if not, explain how you intend to get those data over the course of the next few weeks.



"For people just starting out, I'd suggest starting either with Processing or D3. Both of them have a very large user base and a great number of examples you can learn from." ~ Jan Willem Tulp

Open SNPs

Interactive to Inspire:

This week kicks off our visualization series, we'll be exploring more HTML/CSS and some prototyping tools. And you'll also be able to play with Processing among other creative languages for data visualization.

Reminder, you can volunteer to attend Visualized 2016 at Parsons on Thursday!



Choose your own adventure:

1. Continue practicing HTML/CSS with the practice sites previously linked:

2. Try practicing some code with Processing or Visdown, other languages for visualizations:

Review the Processing Hour Of Code exercise (1 hr long), don't feel compelled to spend the whole hour, just skim the video for the components of processing that interest you.

Other resources that might be useful to you:


Finish your comparison of the Practice Files and the Completed Files from last week's course, find at least 3 things that are different between the practice and completed files, and tell me what they do to the resulting website.


In the pracice files, there are no stylesheets linked in the index.html, whereas in the completed files there are two stylesheets, styles.css and reset.css. Tell me what the addition of these files does for the resulting website?

List your "3 things" in a gist, as you do each week for your assignments.

Try using these practice files, and modifying them to create your own visualization with RAW. Attach those files (index.html, and styles, if any) to your gist.



"It's turtles all the way down" ~ Wikipedia

This week we'll explore geospatial data and mapping visualizations. We'll consider cartography as a method of storytelling on a fairly intuitive canvas, and we'll explore a few tools that help you parse geographic information. We'll feature a guest talk from Andy Eschbacher as well.

Losing Ground

Interactive to Inspire:

Andy Eschbacher, Carto

Andy is a physicist, educator, and programmer at Carto. He'll give a talk on his work as a map scientist and cool open source technologies to build thoughtful, creative, and clever map tools for the masses.

He's worked on interactive projects like:


Check these out:


Carto is an online mapping platform and series of libraries/APIS that allows you to map geospatial data easiy in Javascript.

Here is an example using Carto.JS for a Census tract visualization of water quantity.

Here is a more complex example with button selectors for exploring data and reloading layers.

Try to modify the code the match your own data and integrate your practice into the assignment below.

If that seems overwhelming, try to follow these tutorials instead:


  1. Find some geospatial data.
  2. Think about the narrative that you might build around it.
  3. Write a pitch (< 3 ¶s) explaining your story and linking to the data.
  4. Defend your pitch in a few short arguments, describing the format of your data, and what tools/languages you would use to explore and visualize it.
  5. Use your practice exercise to defend your pitch with a prototype.



"In short, we're tasked with transforming data into directives. Good analysis parses numerical outputs into an understanding of the organization. We "humanize" the data by turning raw numbers into a story about our performance." ~ J. Bladt + B. Filbin

This week continues our visualization series, we'll be exploring data sets for time-series interactives and statistical charts/graphs. We'll also feature a guest talk from Ekene Ijeoma.


Interactive to Inspire:

Ekene Ijeoma, New INC.

Ekene Ijeoma is a designer and artist based at Orbital. He was recently awarded NYFA Fellowship in Design, Urban Environments and Architecture and featured in Adweek's Creative 100 as 1 of the 10 "visual artists whose imagination and intellect will inspire you" and Good Magazine's Good 100 for "tackling pressing global issues". He'll give a talk on his work.

He's worked on interactive projects like:



C3.JS is a reusable chart library based on D3. Take a look at the code for this Timeseries Chart and think about how you could modify it to accommodate data of your choice.

Try to do that and integrate your practice into the assignment below (add it to you bl.ocks account if you can!).

Here is an example using C3.JS for a time-series line chart. If you feel like this is more relevant to your dataset, you can use that template too.


  1. Find some time-series or statistical data.
  2. Think about the narrative that you might build around it.
  3. Write a pitch (< 3 ¶s) explaining your story and linking to the data.
  4. Defend your pitch in a few short arguments, describing the format of your data, and what tools/languages you would use to explore and visualize it.
  5. Use your practice exercise to defend your pitch with a prototype.



This week we'll consider visualizations that illustrate spatial relationships between data points (nodes) via (edges). We'll play with a few tools and explore graph data or relationships worth teasing out of your chosen datasets. We'll feature a guest talk from Francis Tseng as well.


Interactive to inspire: Tanahashi, Y., UC Davis, StoryLines You can read their paper on the topic here.

Francis Tseng, NY Times, Coral Project, NEW Inc.

Francis is a creative designer, programmer, researcher at New Inc. He'll give a talk on his work building throughful comment systems, socially sentient machines and dystopic business simulators.

He's worked on interactive projects like:


There are various JS tools for building graph visualizations, Sigma.js and Arbor.js among them. Peruse the examples available using these libraries online, or try Gephi, a free desktop tool for visualization.

Here's a sample visualization that uses Gexf to visualize graffiti artists and their formal art influences, color-coded by country of origin.

Try to build a prototype with one of these libraries/tools to support your assignment pitch. Check out network tracking tools like Kumu too!



  1. Find some network/graph data or a collection of datasets that you think might compliment eachother, or might reveal something interesting in ensemble.
  2. Write a pitch (< 3 ¶s) explaining your story and linking to the data.
  3. Defend your pitch in a few short arguments, describing the format of your data, and what tools/languages you would use to explore and visualize it.
  4. Use your practice exercise to defend your pitch with a prototype, or at least choose one dataset, one library and try to describe how in specific you think they partner appropriately.

Alternatively, for your assignment, you can try to make a Graph Visualization with sample data (say from Sigma.js's examples page, or from another graph example/library), or follow the following tutorial, take notes on your experience and screenshots of your work along the way.



"It’s not uncommon for designers to confuse a beautiful looking product with one that works beautifully. A great technique for creating smarter, better products is to approach them using story-centered design." ~ B. Kowitz

Color and mood are important to visualizations and the general legibility of your narrative. We'll discuss ways to convey or amplify your story with design, and think through some of the aesthetics of your interactives to come.

Whale Hunt

Interactives to inspire:




Make a few sketches of the data visualizations that might suit your project, take a photo of those sketches and create a style guide or swatch board (with color palette, fonts, layout indications) in a gist. These can build on your prototype time-series, mapping, or graph visualizations from previous weeks, but should reflect your "ideal" layout and not be limited to what you were able to accomplish in previous weeks.

It doesn't have to be as detailed as this one but it should have a few main sections:

  • Colors (hex values chosen)
  • Fonts
  • Template (general layout, with sketches-hand sketched and photographed/embedded in a gist or uploaded somewhere.
  • Description of the dataset(s)
  • Description of the concept and larger narrative - what aspects of your data will this style highlight?



Choosing a way to display your data is a non-trivial operation, and using the past few weeks' study of a few general visualization types, we'll discuss what combination of visual data diagrams best suit the data we've groomed for our final projects. We'll also go over some of the tools for rendering those data as such.

UC Campus Expenses

Interactive to Inspire:



Consider the data visualization types in this catalogue, and the tools listed here.

Determine which type of visualizations you might make with your data, list them, and then select one to test and pursue.

Diagram (aka, discuss in one ¶) what type of visualization you choose for your dataset and what tools you will use to achieve this (include the languages they are written in or the languages you might need to code in).

Keep in mind how this changes or updates your style guide from last week; update that assignment where necessary; and link to the style guide at the end of your proposal.



"And I want you to ask yourself when you make things, when you prototype interactions, 'am I thinking about my own clock, or the user’s?' Am I going to help someone make order in his or her life, or am I going to send that person to a commune in Vermont?" ~ P. Ford

This week we'll talk about creative approaches to building narrative and new methods for publishing interactive material. We will likewise learn more about hosting our projects on github or otherwise.

"Every dance is a kind of fever chart, a graph of the heart." ~ M. Graham


Interactive to Inspire:



Think about where you would like to publish your project and in what format. Will it be a stand-alone site with some text, a text-dense narrative with embedded graphs, a larger scroll-pages multimedia piece with images and video embeds to compliment?


Think about the interactives we've seen this semester and plan out your template layout.

Reconsider your data and the pitch exercises from previous weeks, choose the best visualization and pitch for your narrative and pursue pushing that onto the web.

Here are some resources to help you get it on the web.

Here is an example of an interactive time series visualization of Graffiti cleanup rates (taken from 311 data). Here is the code and readme explaining how this was made. This will be the format of your final projects (unless you choose a more creative way of hosting it). All of your code will be submitted on github with at least a link to the live demo in the of your repository.



"I realize there’s a whole lot of inspiration out there, and some damn fine examples of great work, but I still find it hard to get a sense of direction...We need to know what makes a data story “work”. And what does a data story that “works” even mean?" ~ N. Diakopoulos

This week we'll go over how to process reactions to your work, and how to bulletproof your story accordingly, pre-publication.


Interactive to Inspire:




Continue with last week's assignment, work on publishing your project on github, posting the interactive on gh-pages, and explaining your process, sources, and reasoning in your



"I realize the instant communication platforms we enjoy now do have some negatives that are troubling." ~ J. Spann

Meet with your project partners to discuss how you plan to wrap-up your projects over the next week.


Interactive to inspire:




Continue with working on your final projects, you can make something from this template for example.

  • publishing your project and code on github

  • post the interactive demo on gh-pages

  • explaining your process, sources, and reasoning in your with the following sections:

    • Project Title
    • Description
    • Demo Link
    • Project Procedure: describe your data processing, visualization selection, and analysis post-visualization



"Give your characters opinions. Passive/malleable might seem likable to you as you write, but it’s poison to the audience." ~ Pixar, 22 Rules of storytelling.

This will be a follow-up lab to polish your projects and get extra-help.

There will be no class. Instead, each student will make individual appointments with me to meet over Google Hangouts and discuss his/her project and get help with bugs, issues, or fixing final projects.

An invite will be sent to coordinate this meeting the week prior.

This meeting will go over:

  • the status of your project
  • any lingering problems to troubleshoot
  • how to evaluate and test your projects prior to submission
  • how to document your project



DUE: 12/13/16 9AM, in my inbox.

Please send the link to your project repository and any supportive materials to my email

Final Project Guide:

We will spend the first minutes of class going over your project pitches, please send me your current assignment/latest project draft before class, and prepare a 3-5 minute presentation of your project, describing why you chose it, what resulted from your efforts and what you would like to do with the project moving forward.

But in general, this project is a big deal! The final project is a substantial portion of your grade, and there will be no late grading because they lock me out of the grading system 7 days after our last class (around the 21st); ie. no late grades accepted.



Library of Babel Bot.




It's not that hard, code or respect. You will be expected to produce both in this class.

This code of conduct is a partnership we are building in mutual respect. I take it personally when you miss my classes and my assignments; being ontime is a way to show myself and the other students that you have respect for us. If you fail to do that, you're hindering your own education, but more importantly you're hindering your reputation as a person with integrity.

Here are a few general things:

  • Late assignments will not be accepted
  • Attendance is mandatory barring an emergency which you can work out with the instructor over email.
  • Regardless of circumstances, you're expected to turn in your assignment on the day that it's due, and otherwise keep up with work.