facebook-pixel
$39.00
Enroll Now 5 Add to Cart
Certification

Industry recognized certification enables you to add this credential to your resume upon completion of all courses

Need Custom Training for Your Team?
Get Quote
Call Us

Toll Free (844) 397-3739

Inquire About This Course
Instructor
Bill Shander, Instructor - Interactive Data Visualization: Getting Started with D3.js Key Concepts

Bill Shander

Bill Shander is Founder of Beehive Media, a Boston-based data visualization and information design consultancy. Bill specializes in creating interactive experiences for thought leadership, research, advocacy, and knowledge management. Clients over the years have included the World Bank, United Nations, PricewaterhouseCoopers, Harvard University, Facebook, and the EPA.
Read More
Show Less

Instructor: Bill Shander

Learn the basic skills to start creating interactive visualizations using d3js.

  • Create an interactive and animated scatter plot using D3.js V4.
  • This course is ideal for people with at least some basic HTML, CSS, and Javascript capabilities, but you'll be able to follow along with very little knowledge.
  • Instructor has more than 20 years of data visualization experience and has catered to LinkedIn, Disney, State of California, and others.

Course Description

D3.js has become the standard for creating custom interactive data visualizations for the web. This feature-rich open source javascript library allows you to create dynamic and extremely diverse experiences that can interact with users and any other element on a web page. For programmers familiar with Javascript, it is not hard to pick up and run with D3 very quickly. For those with limited javascript experience, it can be intimidating. This course will help anyone who has some javascript familiarity get comfortable creating rich, animated, interactive experiences with D3. If you have worked with jQuery, for instance, you can easily work with D3. Your instructor, Bill Shander, is a self-taught programmer with over 20 years doing data visualization. He remembers how confusing and intimidating it can be to learn a new technical skill. This course uses simple language, not technical lingo, and walks through everything step by step, explaining every minute detail. Even if you don't know any javascript, you should be able to follow along with the lessons, even if it might be a little confusing at times. All of the code used in the videos are available for download under "Class Project" to help you follow along. FYI, this course is using D3 version 4 - the current version of the library.

Read More

What am I going to get from this course?

Create an interactive and animated scatter plot using D3.js V4. These specific skills be be translatable to allow students to easily move on to other D3 chart types, because D3 is so modular and consistent in its processes and syntax to do similar tasks.

Prerequisites and Target Audience

What will students need to know or do before starting this course?

This course is ideal for people with at least some basic HTML, CSS, and Javascript capabilities. But you do not need to be an expert in an of these. In fact, even if you know very little, you will be able to follow along. This is ideally suited to beginner to intermediate programmers and is not intended for advanced users. However, an advanced programmer looking for a quick introduction to D3 will appreciate this course as well!

Who should take this course? Who should not?

If you are interested in creating custom interactive and animated visualizations for the web, D3 is the standard technology to use and this course is for you.

Curriculum

Module 1: Module 1

Lecture 1 Introduction: D3.js in a Nutshell

D3 is introduced at a high level and we get right to work creating a web page with all of the elements to support a D3 chart.

Lecture 2 Adding SVG Elements in D3

D3 works using either SVG (vector graphics) or Canvas (HTML5). This course will be focused on SVG and in this video, we start to explore how D3 and SVG work.

Lecture 3 Getting Started Working with Data in D3 Getting Started Working with Data in D3

In this lesson, we start to integrate real data into our project. We explore the basics of importing and seeing our data in D3, some concepts like variable scope, and other key ideas that will make the rest of the project possible.

Lecture 4 Making Data-Driven Graphics in D3

In this video, we will start to apply the data to make our chart elements position dynamically on the page, based on the data itself.

Lecture 5 Using D3 Scales

Scales are a very powerful feature built into D3 that can save you a ton of time and effort and increase the accuracy and flexibility of every project you do. In this video, we'll setup 3 different dynamic scales for our project.

Lecture 6 Using D3 Axes

D3 can create axes for you, and it's a huge benefit of the library. We'll automatically add axis lines, tick marks, and labels to our project.

Lecture 7 Animation in D3

In this lesson, we'll bring the entire project to life by animation our data-driven dots into place. This is another great advantage of D3 over some of the other options out there - the ability to animate objects in just about any way you can imagine.

Lecture 8 Interactivity in D3

One more great feature of D3 is the ability to make everything interactive: click and hover events, and really any interaction with any other element in the browser. We'll add mouseover tooltips to our project in this lesson.

Lecture 9 D3 - One More Thing

In this lesson, we'll do some final cleanup and discuss some interesting things to consider when visualizing any data.