SVG Animation and Interaction in Ember
summary
Builds interactive SVG visualizations using only Ember and SVG no libraries, with concrete fixes: wrap components in a <g> via tagName to avoid broken DOM, sort data points by y-coordinate to control paint order, and use transform origin to rotate thermometers (SVG origin is top‑left). Drives a rotation dial from sensor messages at ~3+ Hz, persists notes with Ember Data, and reports 20x improvement in scientific accuracy and precision in the deployed app.
AI-written summary · about
chapters (21)
- 0:00Intro
- 1:09Requirements
- 2:15JPEG
- 2:40SVGs are easy to find/make
- 4:21Objectives
- 6:20Paint Order, not z-index
- 8:03Adding actions to SVGs
- 9:20Binding attributes and classes
- 10:34The top left corner is 0,0
- 11:43use transform
- 14:07use for tagName
- 15:01Paint order problems
- 15:32A closer look at the problem
- 15:56Use sorting
- 19:14Positioning the circles
- 19:54Positioning the labels relatively
- 20:40Rotation Dial
- 21:52This is what 20x improvement looks like
- 22:53Don't forget about...
- 24:45Always be learning
- 27:24Let's build something together!
related talks
33mTemplate-first Data Visualizations
12mBattle-Tested Techniques for Animation & Data Viz
29mSVGs beyond mere shapes
43mVisualizations using SVG, Canvas, and WebGL in Vue
47mSVGs beyond mere shapes
21mBootstrap your dashboard the right way
21mSVG illustrations as React Components
29m"Hand Coded Artisanal Data-Visualization"