Better Data Visualizations with Svelte

Better Data Visualizations with Svelte

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 36 Lessons (9h 44m) | 1.66 GB

Build Powerful, Performant and Interactive Data Visualizations

Learn how to declaratively build responsive, interactive data visualizations with Svelte and D3. This course contains dozens of lessons, each complete with live coding examples for students to study and build upon. By the end of the course, you’ll have finished four production-ready, professional data visualizations, and you’ll have learned many industry best practices.

WHAT YOU WILL LEARN

  • How to create the best data visualizations on the web
  • The importance of declarative chart construction
  • How to integrate Svelte and D3 to make more intuitive data visualizations
  • Differences between ‘old-school’ and modern approaches to data visualization
  • What problems a framework-driven approach to visualization can solve
  • How to create charts that wow your audience
Table of Contents

1 Better Data Visualizations with Svelte
2 Svelte Tutorial – What You’ll Learn in This Video Course
3 Why Use Svelte for Data Visualization Versus D3
4 What is Svelte. A JavaScript Framework that Simplifies UI Creation
5 JavaScript and Scalable Vector Graphics in Svelte
6 How D3.js and Svelte Complement Each Other
7 A Guide to Setting Up Your Svelte Development Environment
8 How to Create Your First Svelte Scatterplot
9 Getting Started With Svelte – Draw Your First SVG Element
10 Draw Axes, Gridlines, and Labels With Svelte + D3.js
11 Using Svelte’s Dimension Bindings for Responsive Scatterplots
12 A Guide to Svelte Hover Events, Dynamic Styling, and Tooltips
13 Adding Finishing Touches to a Svelte Scatterplot
14 How to Build a Dynamic, Physics-Based Beeswarm Plot
15 An introduction to d3-force for Svelte Visualizations
16 Making Our Circles Reactive and Responsive
17 Adding Dynamic, Data-Based Styling to a Svelte Beeswarm Plot
18 Add Axes, Titles, and Legends to Svelte Beeswarm Visualization
19 Using the on-mouseover Event to Create Tooltips With Svelte
20 How to Add Filters and Hover Effects to Style Svelte Visualizations
21 Svelte Beeswarm Walkthrough – Wrapping Up
22 Create an Interactive Globe Visualization With Svelte + D3.js
23 An Introduction to the D3 Module d3-geo for Svelte Charts
24 Build a Responsive Globe Visualization With Svelte Dimension Bindings
25 Styling our Globe
26 How to Add Data to a Svelte Globe Visualization
27 Creating a Rotating Globe Visualization in Svelte
28 How to Add Interactive Tooltips to a Svelte Globe Visualization
29 Add a Legend and Reference Line to a Svelte Globe Visualization
30 Adding a Title to a Svelte Rotating Globe Visualization
31 How to Build an Interactive Scrollytelling Scatterplot
32 Create a Scrollytelling Component With Svelte
33 How to Trigger New Behavior on Scroll With Scrollytelling
34 How to Update Axes Based On Scroll Position With Scrollytelling
35 Adjusting Svelte Chart to Fit Within Articles
36 How to Clean Up and Componentize Svelte Code

Homepage