Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.


Data Visualization and D3.js

via Udacity


Learn the fundamentals of data visualization and practice communicating with data. This course covers how to apply design principles, human perception, color theory, and effective storytelling to data visualization. If you present data to others, aspire to be an analyst or data scientist, or if you’d like to become more technical with visualization tools, then you can grow your skills with this course.

The course does not cover exploratory approaches to discover insights about data. Instead, the course focuses on how to visually encode and present data to an audience once an insight has been found.

This course is part of the Data Analyst Nanodegree.

Why Take This Course?

Learn by doing! You will analyze existing data visualization and create new ones to learn about the field. At it’s core, data visualization is a form of communication. Learn how to be a great communicator and how to enable readers to walk away from your graphics with insight and understanding. This course also makes use of open web standards (HTML, CSS, and SVG) to create data visualizations.

You can also learn how to...

  • communicate clearly with the best visual representation of your data
  • tell stories, spark discussion, and create calls to actions for readers
  • design graphics like ones from the NYTimes and other media companies
  • how to use open web technologies to create an online portfolio of your work
  • use visualization libraries (dimple.js and D3.js) to create graphics


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 Data Analyst Nanodegree are able to submit the final project for review and certificate. Interested in enrolling? Find out more!

Taught by

Ryan Orban and Jonathan Dinu

Related Courses


2.6 rating, based on 5 reviews

Start your review of Data Visualization and D3.js

  • Gregory J Hamel ( Life Is Study) completed this course and found the course difficulty to be medium.

    Udacity's Data Visualization and D3.js is one of two new intermediate data science courses Udacity released this month, the other being an introduction machine learning. This course consists of 4 lessons covering visualization and D3.js basics, design...
  • Angel completed this course.

    This course is outdated, it uses v3 but d3 has v4 time ago, changing many things between these two versions.
  • Sonsoles López completed this course.

  • Sergiy Matusevych is taking this course right now.

  • Cláudio Tereso completed this course.

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free