Data Visualization and Infographics with D3.js

Time: March 16 - April 26, 2015

Instructors: Alberto Cairo and Scott Murray


Welcome to “Data Visualization and Infographics with D3,” a six-week online course with professors Alberto Cairo and Scott Murray!   

Goal

This course consists of an in-depth discussion about the principles of infographics and data visualization, and how they apply to the real world. Students will learn how to display information using charts, maps, diagrams, and visual narratives, and how to bring them to life using d3.js, a Javascript library, which is quickly becoming a standard in visualization for communication.

Objectives

At the end of the course, you will come away with knowledge about:

  • How to choose appropriate graphic forms to represent your information effectively.
  • How to combine charts, maps, diagrams, etc., and arrange them as narratives.
  • How to interpret visualizations correctly, and avoid the most common kinds of mistakes.
  • How to use d3.js to create data charts and maps.
  • How to use animation and interaction using that same Javascript library.

Who can enroll

This course is open to anyone interested in learning the principles of visualization and infographics for effective communication, and about how to apply them using d3.js. You don’t need any previous experience.

Instructors

Alberto Cairo is a Professor of the Professional Practice at the School of Communication of the University of Miami. He teaches courses on information graphics and visualization, and is interested in the convergence between visual communication, journalism, cognitive science, cartography, and statistics.

He is author of the books Infografía 2.0: Visualización interactiva de información en prensa (Alamut, Spain, 2008) and The Functional Art: an Introduction to Information Graphics and Visualization (Peachpit Press/Pearson Education, 2012). He's working on a new book, titled The Truthful Art: Data, Charts, and Maps for Communication, to be published in March 2016 by Peachpit Press.

Scott Murray is a code artist who writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art. Scott is an Assistant Professor of Design at the University of San Francisco, a contributor to Processing, and author of "Interactive Data Visualization for the Web: An Introduction to Designing with D3".  Scott earned an A.B. from Vassar College and an M.F.A. from the Dynamic Media Institute at the Massachusetts College of Art and Design. His work can be seen at alignedleft.com

How the course works

First of all, note that this is an asynchronous course.  That means there are no live events scheduled at specific times.  You can log in to the course and complete activities throughout the week at your own pace, at the times and on the days that are most convenient for you.

Despite its asynchronous nature, there are still structures in place for the duration of the course from March 16 to April 26, 2015.  The material is organized into six weekly modules.  Each module will be taught by Alberto Cairo and/or Scott Murray and will cover a different topic through videos, presentations, readings and discussion forums.  There will be a quiz each week to test the knowledge you’ve gained through the course materials.  The weekly quizzes, and weekly participation in the discussion forums, are the basic requirements for earning a certificate of participation at the end of the course.

This course is very flexible, and if you are behind with the materials, you have the entire length of the course to complete them.  There are, however, suggested weekly deadlines for each module.

We recommend you note the deadlines listed in each week of the course.

  • Classes are opened on Monday.  The materials for that week’s module will be available on Monday.
  • Videos should be watched in the week they are assigned.
  • Readings should be completed in the week they are assigned.
  • Participation in the discussion forums should be completed after watching the videos and reading all of the week’s materials.  You choose one of the forums to participate in.
  • Quizzes should be completed at the end of each week, after watching the videos and reading the materials.  Weekly quizzes will be available until the last day of the course, April 26, in case you get behind with the modules.

The course is divided into six weekly modules:

Module 1 -- Visualization and Data
This week you will learn:

  • What is a visualization? The history of infographics.
  • Data fundamentals: What is data? Types of values (qualitative, quantitative).
  • Acquiring data: Sources (data.gov, other countries, local data, NGOs, APIs)
  • Working with data: Data formats (CSV, JSON, XML) and tools (Excel, Numbers, Libre Office, Google Sheets) -- example walkthrough of data download and clean
  • Using GitHub's Gists to Share Your Data

Module 2 -- Web + D3
This week you will learn:

  • Being truthful: Good and bad data • Introduction to HTML
  • Introduction to CSS
  • Introduction to SVG
  • Introduction to JavaScript, arrays, and objects
  • Introduction to D3
  • Loading in CSV data
  • Sharing your work with GitHub's Gists and bl.ocks.org

Module 3 -- Mapping Data to Visual Properties
This week you will learn:

  • Choosing the right graphic form
  • Generating new DOM elements
  • Binding Data
  • Generating Visual Elements from Data
  • Setting attribute values based on index values and data

Module 4 -- Scales and Axes
This week you will learn:

  • Improving the looks of your charts
  • Using scales to map data values to pixel values (widths)
  • Using scales to map data values to pixel values (bar height and spacing)
  • Generating a horizontal axis with a <g> element and the transform attribute • Adding a vertical axis with labels

Module 5 -- Two-Dimensional Data
This week you will learn:

  • Annotation and storytelling
  • From Bar Chart to Scatterplot • Formatting Ticks
  • Transitions
  • Transition Delays

Module 6 -- Time Series with Multiple Values
This week you will learn:

  • What lies ahead for visualization • Working with Dates
  • Line Charts
  • Area Charts
  • Conditional Styling

Please add the email addresses knightcenter@austin.utexas.edu and nmazotte@gmail.com to your address book to ensure you receive emails about the course.