O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning to Visualize Data with D3.js

Video Description

In this Learning to Visualize Data with D3.js training course, expert author Rafael Hernandez teaches you how to build data visualizations with the D3 JavaScript library. This course is designed for users that already have some HTML, CSS, and JavaScript programming experience.
You will start by learning the basics of D3, including how to bind data from JavaScript arrays to elements, scale data, and style simple data visualizations with CSS. From there, Rafael will show you how to introduce interactivity into your data visualization, including how to add a sort button, animate changes, and respond to other mouse events. This video tutorial will also cover how to create a line chart and a scatter-plot data visualization.
Once you have completed this computer based training course, you will have developed a solid working knowledge of D3, and be able to build your own data visualizations. Working files are included, allowing you to follow along with the author throughout the lessons.

Table of Contents

  1. Introduction
    1. Introduction To Data Visualization With D3.mp4 00:00:57
    2. About The Author.mp4 00:00:51
    3. What You Will Need.mp4 00:02:07
    4. Setting Up Your Development Environment.mp4 00:03:49
    5. Using The Project Template.mp4 00:03:45
    6. Reading The D3 Documentation.mp4 00:01:53
    7. How To Access Your Working Files.mp4 00:03:22
  2. Javascript Essentials
    1. Reviewing Arrays And Objects.mp4 00:08:55
    2. Using The Map And Filter Array Methods.mp4 00:06:01
    3. Using Special D3 Array Functions.mp4 00:05:07
  3. Creating A Simple Bar Chart
    1. Creating The SVG Element Programatically.mp4 00:04:37
    2. Creating Bars From Data.mp4 00:04:55
    3. Scaling Data.mp4 00:03:23
    4. Styling The Bars With CSS.mp4 00:03:10
    5. Adding Text To The Chart.mp4 00:05:27
    6. Adding Flexibility With A Chart Function.mp4 00:02:34
    7. Using SVG Groups.mp4 00:03:18
  4. Creating A Complex Bar Chart
    1. Working With Arrays Of Objects.mp4 00:04:49
    2. Creating An Ordinal Scale.mp4 00:05:07
    3. Setting Color With Color Scales.mp4 00:04:30
    4. Adding X And Y Axes.mp4 00:08:18
    5. Flipping The Axes.mp4 00:05:41
    6. Adding Gridlines.mp4 00:04:43
    7. Rotating The X Axis Text.mp4 00:03:27
    8. Adding Axis Labels.mp4 00:06:00
    9. Updating The Plot Function With Best Practices.mp4 00:02:27
  5. Making The Chart Interactive
    1. Adding A Sort Button To The Webpage.mp4 00:06:31
    2. Sorting Data.mp4 00:03:24
    3. Updating The Chart With Changes In Data.mp4 00:06:14
    4. Updating The Axes With Changes In Data.mp4 00:10:11
    5. Animating Changes In Data.mp4 00:03:21
    6. Responding To Other Mouse Events.mp4 00:05:44
  6. Creating A Line Chart
    1. Working With Dates.mp4 00:03:48
    2. Plotting Time Data.mp4 00:08:10
    3. Formatting A Time Scale Axis.mp4 00:06:17
    4. Drawing A Path.mp4 00:08:05
    5. Shading An Area Of The Chart.mp4 00:04:33
    6. Exploring Path Options And Styling.mp4 00:04:11
  7. Creating A Scatter-Plot
    1. Scatterplot Overview.mp4 00:02:14
    2. Examining The Data.mp4 00:01:47
    3. Plotting The Data.mp4 00:06:25
    4. Creatively Scaling The Data Points.mp4 00:03:14
    5. Plotting Groups Of Data Points.mp4 00:08:26
    6. Adding The Y Axis And Gridlines.mp4 00:06:59
    7. Adding The X Axis And Gridlines.mp4 00:05:09
    8. Styling The Data Categories.mp4 00:02:29
    9. Adding Interactivity - Data Detail.mp4 00:02:33
    10. Adding Interactivity - Chart Key And Labels.mp4 00:08:41
    11. Loading External CSV Data.mp4 00:04:19
  8. Conclusion
    1. Wrap Up.mp4 00:00:46