Data Visualization and D3.js

Lesson 1a Visualization Fundamentals (2 hours)

Learn about the elements of great data visualization. In this lesson, you will meet data visualization experts, learn about data visualization in the context of data science, and learn how to represent data values in visual form.

Lesson 1b D3 Building Blocks (4 hours)

Learn how to use the open standards of the web to create graphical elements. You’ll learn how to select elements on the page, add SVG elements, and how to style SVG elements. Make use of all the Instructor Notes throughout this lesson if you have little to no experience with HTML and CSS.

Mini-Project 1: RAW Visualization (2 hours)

Create a data visualization using a software of your choice. We will provide recommendations for visualization software as well as data sets. We want you to get right into making data visualization so here’s your first chance!

Lesson 2a Design Principles (2 hours)

Which chart type should I use for my data? Which colors should I avoid when making graphics? How do I know if my graphic is effective? Investigate these questions, and learn about the World Cup data set which will be use throughout the rest of the course.

Lesson 2b Dimple.js (4 hours)

Learn how to create graphics using the Dimple JavaScript library. You will learn about this library as a gentle coding introduction before learning about D3.js. You will be able to produce great graphics with minimal code, and all of your graphics will come with interactivity without any extra effort on your part. Dimple, it's simple!

Mini-Project 2: Take Two (2-5 hours)

Find an existing data visualization, critique it for what it does well and what it doesn’t do well, and finally, recreate the graphic using a software tool of your choice. We recommend using Dimple.js, which is covered in Lesson 2b, but we don’t want you to feel constrained by the choice of tools. Use any tool that works for you.

Special Note

At this point in the course, you can start the final project. The remaining content of the course covers narrative structures, types of bias, and maps. All of the code in Lesson 3 and Lesson 4 pertains to d3.js. If you'd like to learn d3.js and complete the final project using d3.js, then please continue. If you prefer to stop, you can complete the final project using dimple.js.

Lesson 3 Narratives (5 hours)

Learn how to incorporate different narrative structures into your visualizations and code along with Jonathan as you create a graphic for the World Cup data set. You’ll learn about different types of bias in the data visualization process and learn how to add context to your data visualizations. By the end of this lesson, you’ll have a solid foundation in D3.js.

Lesson 4 Animation and Interaction (5 hours)

Static graphics are great, but interactive graphics can be even better. Learn how to leverage animation and interaction to bring more data insights to your audience. Code along with Jonathan once again as you learn how to create a bubble map for the World Cup data set.

Final Project: Making an Effective Data Visualization (2 hours or more)

You will create a data visualization that conveys a clear message about a data set. You will use dimple.js or d3.js and collect feedback along the way to arrive at a polished product.####NOTE: As a free student, you are welcome to complete the project to showcase your learning; however, only students enrolled in the are able to submit the final project for review and certificate. Interested in enrolling?