Bouncing Donut Chart with Native Web Components / Canvas / TypeScript / d3-shape (NO FRAMEWORK)
Full code walkthrough showing best practices to build Animated Chart with Native Web Components, Canvas, JavaScript/TypeScript, and d3-shape/d3-ease. No Framework, No Chart Library.
Episode source code: https://github.com/jeremychone-channe...
Quickstart source code: https://github.com/dom-native/quickstart
00:00 - Intro
00:18 - Setup
00:57 - c-pie tag component
01:37 - Draw rectangle
02:32 - Draw circle
03:02 - Draw first d3-shape donut part
04:24 - Draw all donut parts
06:01 - Simple animation
07:37 - Bouncing animation
08:36 - Text animation
09:29 - div label
10:38 - Retina display (pixelratio)
11:36 - The end
Approach:
Scalable web application UI code using the Browser As The Framework.
NO ReactJS, NO Angular, NO vuejs or virtual-dom.
Good code design and Native Web Component can scale as well if not better than big or "small" web framework.
Principles:
Best Practices over Frameworks
Simple scales better
Making something easy does not make it right.
OWN your code design from the start, do not delegate it to frameworks!
#JavaScriptChart #JavaScript #WebComponents #TypeScript #NativeWebComponents #Frontend