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!

Preparing the Line Chart

Time Scales & Parsing

Preparing the Tooltip

Understanding Bisectors

Custom Bisectors

Finishing the Tooltip

Getting Started with Pie Charts

Understanding Ordinal Scales

Using Ordinal Scales

Fixing the Pie Chart

Preparing the Stacked Bar Chart

The Stack Function

Drawing the Stacked Bars

Drawing the Axis

Finishing Touches

Responsive Charts

Quiz: Even more charts!

Conclusion

Final Thoughts Setting up your Editor Appendix

Master D3.js for Data Visualization/

...

/

What's next

What's next

We have explored the core concepts of D3. Here is what to expect in this section.

We'll cover the following...

- How to read this section

In this section, we are going to draw a couple of charts. We have explored most of the core functionality that D3 ...