Back To Course Home

Master D3.js for Data Visualization

0% completed

Overview

Introduction Understanding D3 & Data Visualization

SVG Basics

Getting to Know SVG Basic Shapes in SVG Paths Quiz: SVG

D3 Fundamentals

Adding D3 Selections Appending Elements Transformation Methods Classes and Styles Joining Data The Enter Selection The Exit Selection Displaying Data Enter, Update, and Exit The Update Pattern Loading Data Externally Quiz: Fundamentals

Drawing a Scatter Plot

First Steps Drawing the Image Adding Margins Accessor Functions Understanding Scales Writing Scales Applying Scales to Visualizations Refining Scales Adding an Axis Refining the X-axis The Y-axis Flipping the Y-axis Refining the Axis Ticks Summary Quiz: Scatter plot

Scales

Continuous vs. Discrete The ‘scaleLinear()’ Scale Introduction to Heatmaps Drawing the Heatmap Colors with a Linear Scale The ‘scaleQuantize()’ Scale The ‘scaleQuantile()’ Scale The ‘scaleThreshold()’ Scale Quantize vs. Quantile vs. Threshold Color Scales Understanding the Log Scale The ‘scaleLog()’ Scale Summary Quiz: Scales

Animations & Interactivity

Introduction to Animations & Interactivity What is a Histogram?Preparing the Histogram Understanding the Problem Creating Bins Histogram Finishing Touches Changing Metrics with Events Updating the Chart Transitions Understanding the Problem Fixing the Transition Fixing the Exit Transition Tweaking the Bars and Labels Adding the Mean Adding a Tooltip Mouse Events Formatting Understanding the Voronoi Diagram Creating a Voronoi Diagram Fixing the Voronoi Diagram Quiz: Animations & Interactivity

Even More Charts!

What's next Preparing the Line Chart Time Scales & Parsing Line Generator Adding an Axis Preparing the Tooltip Understanding Bisectors Custom Bisectors Finishing the Tooltip Getting Started with Pie Charts Drawing Arcs Understanding Ordinal Scales Using Ordinal Scales Adding Labels Fixing the Pie Chart Preparing the Stacked Bar Chart The Stack Function Band Scales Drawing the Stacked Bars Drawing the Axis Finishing Touches Responsive Charts Quiz: Even more charts!

Conclusion

Setting up your Editor

Appendix

An appendix of links and resources provided in the course.

Here is a full list of resources provided in this course:

Tell a Meaningful Story With Data: https://www.thinkwithgoogle.com/marketing-strategies/data-and-measurement/tell-meaningful-stories-with-data/
SVG: Scalable Vector Graphics: https://developer.mozilla.org/en-US/docs/Web/SVG
Official D3 Repository: https://github.com/d3/d3
D3 GitHub Profile: https://github.com/d3
D3 Selection: https://github.com/d3/d3-selection
Transformation Methods: https://github.com/d3/d3-selection#modifying-elements
D3 Fetch: https://github.com/d3/d3-fetch
D3 Array: https://github.com/d3/d3-array
D3 Axis: https://github.com/d3/d3-axis
Shape Rendering: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering
D3 Scale: https://github.com/d3/d3-scale
D3 Scale Chromatic: https://github.com/d3/d3-scale-chromatic
Log Transformation: Purpose and Interpretation: https://medium.com/@kyawsawhtoon/log-transformation-purpose-and-interpretation-9444b4b049c9
D3 Bins: https://github.com/d3/d3-array#bins
D3 Transition: https://github.com/d3/d3-transition
D3 Format: https://github.com/d3/d3-format
D3 Time Format: https://github.com/d3/d3-time-format
D3 Delaunay: https://github.com/d3/d3-delaunay
D3 Shape: https://github.com/d3/d3-shape
Radians: https://www.mathsisfun.com/geometry/radians.html
Difference Between Histogram and Bar Graph: https://keydifferences.com/difference-between-histogram-and-bar-graph.html
Observable: https://observablehq.com/@d3/gallery
Kaggle: https://www.kaggle.com/

Get hands-on with 1300+ tech skills courses.