Animating Charts with Vanilla JavaScript

Displaying data is made richer with chart visualizations. And those charts are made richer with animations. With a little HTML and CSS, you can quickly display data in custom SVGs. Add some JavaScript, and you can animate data as it appears on screen! In this video, we’ll:
- Create a pie/circle/line chart as an SVG
- Animate the SVG chart
- Add keyframe animations in JavaScript
- Add intersection observers to load animations only once in frame

? Key Links ?
- Live Code: https://codinginpublic.dev/projects/animated-pie-charts/
- CodePen: https://codepen.io/Coding-in-Public/pen/NWyPpbx
- GitHub: https://github.com/coding-in-public/animated-pie-chart-javascript

---------------------------------------

? Additional Links ?
- SVG Docs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
- Animation JS Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

---------------------------------------

? Related Videos ?
- Intersection Observer playlist: https://www.youtube.com/watch?v=noBm_S4IKr0&list=PLoqZcxvpWzze3Hkult9jLfCvZlzCYLb8G
- Animate SVG Circles: https://youtu.be/-Na_WRk3k74
- Animate SVG World Clocks: https://youtu.be/tYKlLQmg6OM

---------------------------------------

⏲️ Timestamps ⏲️
0:00 Introduction
1:02 Basic SVG Animation
12:16 Landing Page Example

---------------------------------------

? Connect With Me ?
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog
- Twitter: https://twitter.com/cpenned
- Patreon: https://www.patreon.com/coding_in_public