by | Released October 2014 | ISBN: 9781771373043

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. Show and hide more Publisher resources Download Example Code

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