Share Description
In this course, you will learn :
- How to use D3.js, a popular JavaScript library, to create your own interactive data visualisations for the web.
- Beginning with the fundamentals, you'll learn about SVG, selections, classes, and styles, as well as data display. This will provide you with a foundation for working with more advanced concepts.
- After you've mastered the fundamentals, you'll begin practising drawing various scatter plots, where you'll learn all the best practises for creating stunning visualisations.
- You'll get into scales and one of the more enjoyable parts: adding animation and interactivity.
Syllabus :
1. SVG Basics
- Getting to Know SVG
- Basic Shapes in SVG
- Paths
2. 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
3. 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
4. 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
5. 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
6. 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
