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 Path: Doing Data Visualization

Video Description

Put your data to work on the modern web

In Detail

You’ve collected your data, undertaken a preliminary analysis, and now you need to communicate your findings to the world. In this Learning Path you’ll discover how you can utilise the power of the modern web to communicate complex concepts and ideas as simple and easily digestible interactive visualizations.

Prerequisites: Familiarity with HTML and JavaScript syntax

Resources: Code downloads and errata:

  • Mastering HTML5 Canvas

  • Web Visualization with HTML5, CSS3, and JavaScript

  • Rapid Highcharts

  • Building Interactive Data Visualization with D3.js

  • Mastering D3.js

  • PATH PRODUCTS

    This path navigates across the following products (in sequential order):

  • Mastering HTML5 Canvas (3h 23m)

  • Web Visualization with HTML5, CSS3, and JavaScript (2h 41m)

  • Rapid Highcharts (1h 9m)

  • Building Interactive Data Visualization with D3.js (3h 24m)

  • Mastering D3.js (2h 42m)

  • Photo Credit: ©iStockphoto.com/traffic_analyzer

    Table of Contents

    1. Chapter 1 : Mastering HTML5 Canvas
      1. The Course Overview 00:02:26
      2. Preparing Our JavaScript for Canvas 00:09:34
      3. Canvas Hello World 00:06:20
      4. The Palau Flag and the Perfect Circle 00:05:04
      5. Creating Canvas Elements Dynamically 00:06:12
      6. Drawing Our First Canvas Lines 00:09:43
      7. Meeting Canvas Paths 00:05:30
      8. Drawing Triangles with Paths 00:07:57
      9. Creating the Flag of Guyana 00:12:20
      10. Creating Multipoint Shapes 00:08:46
      11. Working with Sine, Cosine, and Radians 00:11:31
      12. Creating an Animated Clock 00:09:47
      13. Creating Complex Shapes 00:10:26
      14. Adding More Vertices 00:11:49
      15. Overlapping Shapes to Create Other Shapes 00:07:22
      16. Drawing Arcs 00:07:00
      17. Drawing with Quadratic Curves 00:07:23
      18. Drawing with Bezier Curves 00:04:31
      19. Drawing Images into Canvas 00:07:11
      20. Creating an Interactive Linear Gradient 00:09:06
      21. Working with Interactive Radial Gradient 00:06:07
      22. Working with Text 00:08:18
      23. Pixel Manipulation 00:07:23
      24. The Art of Clipping 00:09:17
      25. Transforming the Canvas 00:05:53
      26. Scale, Rotate, and Translate 00:06:30
    2. Chapter 2 : Web Visualization with HTML5, CSS3, and JavaScript
      1. The Course Overview 00:01:53
      2. Sprucing Up Your Design with Custom Fonts 00:07:02
      3. Gentle Roundness 00:07:32
      4. Leveraging Stunning Gradients 00:07:06
      5. Creating Patterns with Gradients 00:05:55
      6. There Is a Shadow Between Us 00:09:10
      7. Life Is More Colorful with Alpha Channels 00:04:48
      8. 2D Transformations with CSS3 00:04:44
      9. Creating 3D Elements 00:08:23
      10. 3D Transformations with CSS3 00:04:47
      11. Getting a Perspective of Things – 3D Things 00:03:14
      12. It's Time to Animate It All with CSS Transitions 00:02:55
      13. Creating a Basic SVG Image 00:07:53
      14. Drawing a Circle in SVG 00:05:50
      15. Integrating SVG into HTML5 00:04:41
      16. Creating a Polygon 00:06:15
      17. Animating SVG 00:05:20
      18. Browser Support and Canvas 00:06:20
      19. Starting to Draw 00:07:41
      20. Drawing a Grid in Canvas 00:08:24
      21. Animating Canvas 00:03:44
      22. Dynamic Visualization 00:09:26
      23. Creating a Typewriter Effect 00:07:30
      24. Animations Need Order – Creating a Queue 00:06:15
      25. Creating a Callback and Activating the Queue 00:06:33
      26. Using an Animation Library 00:07:40
    3. Chapter 3 : Rapid Highcharts
      1. Getting Started 00:04:47
      2. Building Your First Chart 00:05:33
      3. The Example Dashboard Application 00:04:52
      4. Creating a Line Chart 00:06:23
      5. Creating a Theme 00:03:28
      6. Creating a Heatmap Chart 00:06:36
      7. Creating a Geographical Map Chart 00:05:34
      8. Creating a Stock Chart 00:04:16
      9. Adding the Drilldown Functionality 00:05:19
      10. Interaction with Form Components 00:05:20
      11. Exporting Charts 00:03:41
      12. Processing CSV Data 00:04:10
      13. Processing Real-time Data 00:05:06
      14. Processing Data from HTML Tables 00:04:34
    4. Chapter 4 : Building Interactive Data Visualizations with D3.js
      1. The Course Overview 00:03:18
      2. Downloading D3.js and Getting the Server Running 00:04:57
      3. Console to the Rescue 00:06:56
      4. Raw JavaScript Versus D3.js 00:07:01
      5. Planning Our Page 00:05:57
      6. Entering Our Data 00:06:02
      7. Dynamic Color Range 00:05:10
      8. SVG and Other Image Formats 00:06:34
      9. Advanced SVG 00:06:59
      10. Using D3.js to Render SVG 00:05:29
      11. Adding Shapes Dynamically Based on Data 00:06:54
      12. Making Our Bar Chart Dynamic 00:03:04
      13. Updating Our Bar Chart with New Data 00:04:26
      14. Styling Our Bar Chart and Adding New Data 00:03:41
      15. Retrieving Data 00:08:05
      16. Plotting Data 00:06:25
      17. Creating Axes 00:07:53
      18. Registering Events on Elements 00:04:13
      19. Creating a Mouse-over Tooltip 00:07:20
      20. Updating Data with a Form (Part 1) 00:05:33
      21. Updating Data with a Form (Part 2) 00:08:37
      22. Introduction to Transitions 00:08:58
      23. Adding Transitions to Our Scatter-plot 00:04:46
      24. Advanced Scatter-plot Transitions 00:05:14
      25. Getting GeoJSON from Natural Earth 00:06:22
      26. Creating a Choropleth with Data Values 00:08:03
      27. Focusing on Reusability – Integrating User Input 00:10:08
      28. Finishing Touches – Zooming, Tooltip, and Legend 00:09:26
      29. Refactoring and Planning 00:10:13
      30. Drawing Country Shapes as Points 00:07:20
      31. Geo-scatter Finishing Touches 00:09:09
    5. Chapter 5 : Mastering D3.js
      1. What Are Layouts? 00:03:15
      2. Pie Charting Manually 00:04:29
      3. Using a Layout 00:03:02
      4. Default D3.js Layouts 00:04:49
      5. Sketching Out the Idea 00:04:00
      6. Making Our Code Reusable 00:08:27
      7. Final Tweaks 00:03:55
      8. Getting the Raw Dataset 00:03:59
      9. Parsing and Cleaning the Data 00:07:25
      10. Scope and Functional Style Coding 00:08:14
      11. Drawing a Map 00:05:37
      12. Adding Data to a Map 00:06:35
      13. Geo Data 00:11:10
      14. Housekeeping 00:02:36
      15. Animating with Timers 00:07:36
      16. Delta-based Animations 00:03:05
      17. Transitions and Easing 00:07:49
      18. Improving the Main Animation Loop 00:08:07
      19. User Animation Controls 00:08:26
      20. More Interactions 00:05:28
      21. Making the Visualization Responsive 00:08:59
      22. Structuring Your Code 00:06:45
      23. Debugging the D3.js Code 00:06:39
      24. Helpful Libraries 00:04:55
      25. How to Approach a Visualization 00:05:02
      26. Going from meh to wow 00:05:49
      27. Some of My Favorite Visualizations 00:06:24