Data Visualization with D3.js

with Ray Villalobos
please wait ...
Data Visualization with D3.js
Video duration: 0s 3h 20m Intermediate


Creating data-driven visualizations and infographics that run on multiple devices responsively is a tough challenge. The D3.js library has revolutionized visualization by making it easier to parse your data and add meaningful interactivity. All you need to bring your data to life is D3, plus a bit of HTML, CSS, and JavaScript, and some SVG graphics. In this course staff author Ray Villalobos explores how the D3 library works, and how you can use it to parse data from different sources and create interactive, visually exciting infographics and visualizations. He'll review the basics—controlling HTML with jQuery-esque selections and customizing attributes with D3's CSS-like language—before moving on to working with SVG graphics, the best choice for graphics in D3 visualizations. He'll also cover working with D3 methods like scaling, events, transitions, and animations; data manipulation (including connecting to external data sources); and creating different types of layouts, including a draggable force-driven layout.

Topics include:
  • What is D3.js?
  • Creating a basic document structure
  • Controlling HTML DOM elements
  • Binding data to the DOM
  • Drawing SVG graphics with D3
  • Using ordinal scales
  • Adding events and transitions
  • Working with data
  • Creating and adjusting layouts


- [Voiceover] Hey there, this is Ray Villalobos staff author at I want to welcome you to Data Visualization with D3. D3 is an amazing JavaScript library for building interactive visualizations with data. I'll start by showing you how to download and install D3 and how to set up a basic document structure. Then, I'll show you how D3 allows you to create jQuery-like selections and control HTML DOM Elements using a language that is just like CSS. Next, we're gonna take a look at creating SVG graphics and why they're better for visualizations than regular HTML.

We'll talk about different ways that D3 uses scales to create different types of graphics plus how to create transitions and animations with the framework. Finally, I'll show you how simple it is to work with external data using D3 and how it provides a series of layouts that makes it easy to create complex visualizations with draggable elements that respond to gravity, charge and physics. So let's get started building visualizations with D3.

please wait ...