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

Master D3.js for Data Visualization/

...

/

Appendix

Appendix

An appendix of links and resources provided in the course.

We'll cover the following...

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

...