Data Visualization with Svelte and D3 Tutorial - Custom and Interactive Data Visualization
via freeCodeCamp
Become an AI & ML Engineer with Cal Poly EPaCE — IBM-Certified Training
Learn Backend Development Part-Time, Online
Overview
Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
Learn to build responsive, animated, and interactive data visualizations by combining the power of Svelte and D3.js in this comprehensive tutorial. Master the fundamentals of creating custom charts that respond to user interactions while leveraging Svelte's reactive framework alongside D3's robust data manipulation capabilities. Explore practical examples using real-world datasets including League of Pigs gaming statistics and Pokemon data from the PokeAPI. Follow along with hands-on coding exercises in the browser using Svelte's interactive playground, progressing from basic chart creation to advanced interactive features. Discover how to implement smooth animations, handle user input events, and create responsive designs that adapt to different screen sizes. Gain practical experience with D3's data binding concepts, scale functions, and SVG manipulation while utilizing Svelte's component-based architecture for clean, maintainable code. Access complete source code examples and additional resources to continue your data visualization journey beyond the tutorial.
Syllabus
Data Viz w/ Svelte and D3 Tutorial – Custom and Interactive Data Visualization
Taught by
freeCodeCamp.org