Video Tutorial Building Interactive Data Visualizations with D3.js with JavaScript


  • Course duration : 3h24m
  • Lifetime access
  • 30 days money back guarantee
  • Source files included
Building Interactive Data Visualizations with D3.js

add to your wishlist remove this course from wishlist

Create engaging data-driven and interactive visualizations to display complex data using D3.js

About This D3.JS Video Course

  • Produce beautiful and impactful data visualizations for the Web
  • Create highly interactive scatterplots and geo graphic maps
  • Use data to tell a story with custom and novel methods of visualization
  • Incorporate interactivity to enable users to dynamically change visualizations

Data Visualizations with D3.js In Detail

D3.js is a JavaScript library that enables data to drive interactive graphical forms and makes complex data analysis easier.

Nowadays, big data, data deluge, and analytics are all trending buzzwords, so how does D3.js make sense of all this data? Simply by using visualizations and defining rules for dynamic graphics engines, which allows users to gain rich insights from large and complex datasets.

Building Interactive Data Visualization with D3.js showcases the D3 JavaScript library built specifically for the use of driving visual elements with data.

This video course will walk you through the basics of the library by showing its core components and methodologies. By following along with the examples in this video you’ll become proficient at creating dynamic visualizations driven by user interactivity.

This course starts with the very basics of frontend web development showing the challenges of incorporating dynamic graphics without using D3. Users learn to combine data with visual elements on the page to create informative visualizations. By the end of this section, viewers will be comfortable with using the D3 library to create their own custom concept of data-driven visualizations.
We’ll see how to use real datasets via APIs to create custom visualizations. By leveraging the interactive nature of web programming we’ll look at how to incorporate user input to add interactivity to our visualization. We’ll start with basic scatter plots and slowly build upon this foundation to create more complicated forms of dynamic data visualizations. Eventually we’ll end the video course by walking through the process of creating a completely novel form of visualization merging concepts of both a scatter plot and a geographic map.

Building Interactive Data Visualization with D3.js provides one with the foundation to continue on their journey of creating novel and highly impactful data visualizations.

JavaScript training table of contents (duration : 3h24m)

  • Getting Started
    • The Course Overview free 00:03:18
    • Downloading D3.js and Getting the Server Running 00:04:57
    • Console to the Rescue 00:06:56
    • Raw JavaScript Versus D3.js 00:07:02
  • Binding Data to HTML Elements
    • Planning Our Page 00:05:57
    • Entering Our Data 00:06:02
    • Dynamic Color Range 00:05:10
  • Using SVG
    • SVG and Other Image Formats 00:06:34
    • Advanced SVG 00:06:59
    • Using D3.js to Render SVG 00:05:29
  • Entering, Updating, and Exiting with Data and SVG Shapes
    • Adding Shapes Dynamically Based on Data 00:06:54
    • Making Our Bar Chart Dynamic 00:03:04
    • Updating Our Bar Chart with New Data 00:04:26
    • Styling Our Bar Chart and Adding New Data 00:03:41
  • Building Our First Visualization – A Scatter-plot
    • Retrieving Data 00:08:05
    • Plotting Data 00:06:25
    • Creating Axes 00:07:53
  • Adding Interactivity
    • Registering Events on Elements 00:04:13
    • Creating a Mouse-over Tooltip 00:07:20
    • Updating Data with a Form (Part 1) 00:05:33
    • Updating Data with a Form (Part 2) 00:08:37
  • Adding Transitions
    • Introduction to Transitions 00:08:59
    • Adding Transitions to Our Scatter-plot 00:04:46
    • Advanced Scatter-plot Transitions 00:05:14
  • Building a GeoMap
    • Getting GeoJSON from Natural Earth 00:06:22
    • Creating a Choropleth with Data Values 00:08:03
    • Focusing on Reusability – Integrating User Input 00:10:08
    • Finishing Touches – Zooming, Tooltip, and Legend 00:09:26
  • Putting It All Together - Geo-scatter
    • Refactoring and Planning 00:10:13
    • Drawing Country Shapes as Points 00:07:20
    • Geo-scatter Finishing Touches 00:09:10

Instructor : Packt

Packt has published 45 tutorials and has sold 10 coursess. See others courses from Packt

  • What is the required level to follow this tutorial ?
Access to more than 19 free tutorials

no, I don't want to learn for free !

see our data protection policy