OpenCourser
Learn skills that shape your future
Visit OpenCourser.com
Welcome to D3.js: From Beginner To Understanding. This course is an introduction to the vast world of D3.js. Create beautiful interactive data visualizations with D3.js v5. If you are new to D3, this is a great beginner's guide to understanding how D3 works at an introductory level. You will learn how to create data visualizations by understanding how small pieces work before putting them all together into a chart. Understanding the smaller, less complicated concepts will enable you to build out more accurate ways to display your data so that you or your business can make better-informed decisions. In this course, we start out with simple concepts first. With each lesson, we build upon what we had learned in the lessons before and by the time you create your first data visualization, you will have a much clearer understanding of how D3 v5 works and how each small chunk of code contributes to the overall data visualization. By learning in this way, you will understand how to manipulate the visualization to best represent your data. Come join us on this journey to understand the basics of D3.js v5 and bring your skillset to the next level. I'll see you in the first lesson.
Welcome to D3.js: From Beginner To Understanding! This course is intended to be an introduction to D3 that will serve as a foundation and enable you to learn more advanced concepts as you continue using D3. By the end of this course you will understand the basic concepts of D3.js (v5) and will have created many interactive data visualizations. I do my best to go through the material slowly and explain things in different ways throughout the course so that understanding the many concepts is easier. The course contains projects, quizzes, and homework assignments so that you can practice what you learned on your own with your own data. So, let's get started! (Music in this video is provided by https://www.bensound.com)
This lesson discusses what a data visualization is and why we create them. Attached to this lesson are two examples of data visualizations. We will be creating both of the charts in the attached pictures during this course.
This lesson briefly goes over what makes a great data visualization. Keep these pointers in mind when creating your own charts and graphs.
This is the link to the GitHub repository.
In this lesson, we are going to set up a server using Express.js and use Express-Handlebars as our templating language.
In this lesson we finish our setup. We set them up in such a way that we can focus on D3.js for the remainder of the course instead of continuously having to update our server setup for each new project or assignment. Attached to this lecture is the index.css file populated with pre-written CSS.
D3.js makes accessing CSV, TSV, and JSON files very easy with its intuitively-named methods: d3.csv(), d3.tsv(), and d3.json(). The purpose of this lesson is to expose you to these methods since we will be using them to access the files which store our data for the remainder of the course.
In this lesson, we briefly go over the difference between D3's selection methods and how to implement them.
In this lesson, we briefly go over data joins and D3's .data(), .enter(), .update(), and .exit() methods.
In this lesson we briefly go over how to create SVG elements without using D3.js.
In this lesson we briefly go over how to create SVG elements with D3. We take examples from the previous lesson and do them with D3.js.
In this lesson you will learn how to create an SVG circle using D3.js.
In this lesson you will learn how to create an SVG line using D3.js.
In this lesson students will learn how to create a single SVG rectangle using D3.js.
In this lesson, students will learn how to create elements in D3.js using a dataset and style them.
In this lesson students will learn how to attach events to elements using D3.js.
This lesson provides a basic overview and an example of the linear scale using D3.js.
This lesson provides a basic overview and an example of the ordinal scale using D3.js.
This lesson provides a basic overview of the scale band as well as a comparison between d3.scaleBand() and d3.scaleOrdinal().
In this lesson, we go over D3's time scales as well as built-in functions for parsing and formatting time.
In this lesson, we put the linear scale to use by creating a line and then scaling it.
In this lesson we remake the scaled line from our last lesson and then add a small amount of code to animate it.
In this lesson, we go one step further and add an X and Y axis around our scaled line.
In this lesson, we take the basic line chart that we built in the last lesson and add points.
In this lesson we go over how to create an area chart. We see how similar it is to the line chart in the previous lessons.
In this lesson, we build another line chart but this time, using data from a CSV which requires us to utilize the time scale.
In this lesson, we build a vertical bar chart showing the diameters of our solar system's planets.
In this lesson, we go over how to create a horizontal bar chart.
In this lesson we are introduced to D3's Pie Layout and Arc Generator. We learn how to use these two tools by creating a simple pie chart in the shape of a peace sign.
In this lesson, we build upon what we had learned in the previous lesson and add text labels and transitions to our pie chart.
In this lesson, we get creative! We build another pie chart but this time, with exaggerated corner radii. The result of this type of exaggeration, is a pie chart that looks like a flower. We then add labels and hover events and use one of D3's own color schemes.
In this lesson we go over how to update the data and transition between the two datasets.
In this lesson we go over how to update data and transition the bars and axis of a bar chart between the changing datasets.
In this lesson, we take what we had built in the previous lesson and add user interactivity. Instead of updating the chart on a set interval, we enable the user to selecta filtering option which then re-renders the chart.
In this lesson, we take the simple pie chart from our "Peace!" lesson and transition between multiple datasets.
Thank you everyone who took this course. I really hope you learned a lot and have a better understanding of D3.js. I hope that you take the information that you have learned in this course and go on to more advanced aspects of D3.js and data visualizations in general. Thanks again!
Save
Hands-on examples reinforce learning.
Concepts explained simply and effectively.
Excellent first step into D3.js v5.
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
